1. 程式人生 > >easy ui+springmvc樹的生成

easy ui+springmvc樹的生成

1.   easy ui樹的生成,首先可以看一下easyui tree 的資料格式:

id:節點的 id,它對於載入遠端資料很重要。

text:要顯示的節點文字。

state:節點狀態,'open' 或 'closed',預設是 'open'。當設定為'closed' 時,該節點有子節點,並且將從遠端站點載入它們。

checked:指示節點是否被選中。

attributes:給一個節點新增的自定義屬性。

children:定義了一些子節點的節點陣列。

看完樹的資料格式之後,我們在後臺既可以封裝了。

2.   頁面載入樹有兩種形式

2.1

<ulid="tt" class="easyui-tree">

    <li>

           <span>Folder</span>

           <ul>

                    <li>

                             <span>SubFolder 1</span>

                             <ul>

                                       <li><span><ahref="#">File 11</a></span></li>

                                       <li><span>File12</span></li>

                                       <li><span>File13</span></li>

                             </ul>

                    </li>

                    <li><span>File2</span></li>

                    <li><span>File3</span></li>

           </ul>

</li>

   <li><span>File21</span></li>

</ul>

2.2 js展開,後臺請求json資料

$('#tt').tree({

    url:'tree_data.json'

});

3.   下面主要就是介紹2.2的,後臺為spring mvc ,ibatis

3.1我的表結構

後臺其實主要做的就是查詢

 

3.2封裝tree資料的model

package com.hyjx.business.handleguide;

import java.util.List;

/**

* @author :hanzl

* @version建立時間:20171128下午5:15:07

*/

public classTreeObject {

   private Stringid;//節點的 id,它對於載入遠端資料很重要

   private Stringtext;//要顯示的節點文字

   private Stringstate;//節點狀態,'open' 'closed',預設是 'open'。當設定為 'closed'時,該節點有子節點,並且將從遠端站點載入它們

   private Stringchecked;//指示節點是否被選中。

   private Stringattributes;//給一個節點新增的自定義屬性

   private List<TreeObject>children;//定義了一些子節點的節點陣列

   private Stringlevel;

   private Stringtype;//許可,事項

   private Stringleafflag;

   public String getLeafflag() {

      return leafflag;

   }

   public void setLeafflag(String leafflag) {

      this.leafflag =leafflag;

   }

   public String getType() {

      return type;

   }

   public void setType(String type) {

      this.type =type;

   }

   public String getLevel() {

      return level;

   }

   public void setLevel(String level) {

      this.level =level;

   }

   public List<TreeObject>getChildren() {

      return children;

   }

   public voidsetChildren(List<TreeObject> children) {

      this.children =children;

   }

   public String getChecked() {

      return checked;

   }

   public void setChecked(String checked) {

      this.checked =checked;

   }

   public String getText() {

      return text;

   }

   public void setText(String text) {

      this.text =text;

   }

   public String getId() {

      return id;

   }

   public void setId(String id) {

      this.id =id;

   }

   public String getAttributes(){

      return attributes;

   }

   public void setAttributes(String attributes) {

      this.attributes =attributes;

   }

   public String getState() {

      return state;

   }

   public void setState(String state) {

      this.state =state;

   }

}

3.3查詢並封裝tree 資料,主要用了遞迴的方法

根節點就是沒有父code,從第二級到無限極都是根據父節點無限遞迴查詢,最後將List轉為json即可

public String queryTree(GuidelineModelmodel) {

      List<TreeObject>trees= newArrayList<TreeObject>();//待轉換的樹

      List<GuidelineModel>listguide=newArrayList<GuidelineModel>();//查詢出的樹的資料

      listguide=dao.queryObjectList("guideline.querytrees",model);

      //查詢出一級樹

      for(GuidelineModelguidemodel:listguide){

        TreeObjecttr=new TreeObject();

      if("".equals(guidemodel.getParentcode())||guidemodel.getParentcode()==null){

           tr.setId(guidemodel.getGuidecode());

           tr.setText(guidemodel.getGuidename());

           tr.setLevel(guidemodel.getNodelevel());

           tr.setType(guidemodel.getType());

           tr.setLeafflag(guidemodel.getLeafflag());

           tr.setChildren(this.treechidren(guidemodel));

           trees.add(tr);

        }

      }

      return CommonUtil.getJsonString(trees);

   }

    /**遞迴查詢多級樹*/

   public  List<TreeObject>treechidren(GuidelineModelparentmodel){

      List<TreeObject>trees= newArrayList<TreeObject>();//待轉換的子樹

      @SuppressWarnings("unchecked")

      List<GuidelineModel>childrenlist=dao.queryObjectList("guideline.querychidrenbyparencode",parentmodel);//list

      for(GuidelineModelmodel:childrenlist)

      {

        TreeObjecttrchidren=new TreeObject();

        trchidren.setId(model.getGuidecode());

        trchidren.setText(model.getGuidename());

        trchidren.setLevel(model.getNodelevel());

        trchidren.setType(model.getType());

        trchidren.setLeafflag(model.getLeafflag());

        //呼叫自己的方法

        trchidren.setChildren(this.treechidren(model));

        trees.add(trchidren);

      }

      return trees;

   }

3.4,Controller呼叫即可

/** 載入選單樹資料 */

   @RequestMapping(value = "/selectMenuTrees",method = { RequestMethod.GET, RequestMethod.POST }, produces ="application/json;charset=utf-8")

   @ResponseBody

   public StringselectMenuTrees(HttpServletRequestrequest, HttpServletResponse response) {

      GuidelineModelmodel= newGuidelineModel();

      return service.queryTree(model);

   }

3.5頁面呼叫:

$(function(){

$("#hy-menutree").tree({

           checkedvalue:"",

           showOperate:"0",

           isreadonly:"1",

           url:"<%=basePath%>/guideline/selectMenuTrees.xhtml",

           onClick:function(node){//單擊事件      

                    switchRight(node);

   }  ,

           showAll:"1",

           applyRight:"0"

});

});