jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)（生成樹）

更新時(shí)間：2017年02月11日 17:10:08 作者：superdog007

本篇文章主要介紹了jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)（生成樹），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

這幾天因?yàn)楣ぷ餍枰?，要做一個(gè)支持無限級的菜單。

我也是菜鳥一只，能想到的東西不多，所以用了Easy UI的tree組件。

不得不說，easyui確實(shí)很強(qiáng)大。

因?yàn)槭菬o限級菜單，數(shù)據(jù)量可能有點(diǎn)大，所以考慮采用異步加載。

但是因?yàn)楹笈_(tái)默認(rèn)傳來的數(shù)據(jù)是一個(gè)實(shí)體，所以又在后臺(tái)進(jìn)行了JSON字符串拼接。

最后，在網(wǎng)上找了N多代碼，然后又去問了好幾個(gè)群里的網(wǎng)友，終于搞出來這個(gè)小東西。

一、HTML部分代碼

  <div id="categoryChooseDiv" title="請選擇分類"
      style="width: 650px; height: 300px;">
       <ul id="MyTree"></ul>
  </div>

html部分很簡單，只要放一個(gè)ul就可以了。

二、JS部分代碼

  function showCategory(){
      $('#MyTree').tree({  
         checkbox: false,  
         url: '/category/getCategorys.java?Id=0',  
         onBeforeExpand:function(node,param){ 
           $('#MyTree').tree('options').url = "/category/getCategorys.java?Id=" + node.id;
         },        
        onClick:function(node){
          var state=node.state;
           if(!state){                  //判斷當(dāng)前選中的節(jié)點(diǎn)是否為根節(jié)點(diǎn)
             currentId=node.id;
            $("#chooseOk").attr( "disabled" , false );  //如果為根節(jié)點(diǎn) 則OK按鈕可用
            }else{
            $("#chooseOk").attr( "disabled" , true );  //如果不為根節(jié)點(diǎn) 則OK按鈕不可用
            }
          } 
      });
  }

最后幾句代碼是因?yàn)槲疫@個(gè)項(xiàng)目需要，只有選擇到最下級節(jié)點(diǎn)的時(shí)候，才運(yùn)行點(diǎn)擊“確定”。否則不允許。
當(dāng)用戶點(diǎn)擊確定的時(shí)候，需要獲取當(dāng)前用戶選中節(jié)點(diǎn) 的所有父節(jié)點(diǎn)

      var nodes=[];      //定義數(shù)組用來存放各個(gè)節(jié)點(diǎn)名稱
      var node =$("#MyTree").tree("getSelected"); //當(dāng)前選中節(jié)點(diǎn)
      nodes.push(node.text);            //首先放入當(dāng)前節(jié)點(diǎn)
      var pnode = $('#MyTree').tree('getParent',node.target); //獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
      while(pnode!=null){
        nodes.push(pnode.text);          //依次放入各個(gè)父節(jié)點(diǎn)，直到根節(jié)點(diǎn)為止
        pnode = $('#MyTree').tree('getParent',pnode.target);
      }
      nodes.reverse();             //數(shù)組元素倒序排序
      $.each(nodes,function(){        //循環(huán)取值
        var html=this;
          $("#inCategoryDiv").html( $("#inCategoryDiv").html() + html + "&gt;&gt;" );
      });

其實(shí)，主要問題在于后臺(tái)對數(shù)據(jù)的處理，即如何能夠轉(zhuǎn)化為 easyui tree才可以識別的JSON數(shù)據(jù)。

三、后臺(tái)代碼（Java）

 public ResponseEntity<String> findBy(Integer Id ) {
    List<Category> categorys = getcategorys(Id );
    String ss="";
    ss+="[";
    for( Category category : categorys )
       {
       ss+="{";
       //ss += "\"id\": \""+category.getId()+"\",\"text\": \""+category.getName().toString()+"\",\"iconCls\": \"icon-ok\",\"state\": \"closed\"";;
       List<Category> cs = getcategorys( category.getId() );  //判斷當(dāng)前節(jié)點(diǎn)是否還有子節(jié)點(diǎn)
       if(cs.size()==0){ //沒有子節(jié)點(diǎn) 設(shè)置 state 為空
       ss+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"iconCls\": \"\", \"state\": \"\"", category.getId() , category.getName());
       }else{    // 還有子節(jié)點(diǎn) 設(shè)置 state為closed
       ss+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"iconCls\": \"\", \"state\": \"closed\"", category.getId() , category.getName());
      }
       ss+="},";
       }
       ss=ss.substring(0, ss.length() - 1); 
       ss+="]";
      return super.responseString(ss); //字符編碼轉(zhuǎn)換
    }

大致一個(gè)流程就是前臺(tái)傳來ID，然后獲取到實(shí)體對象，然后對實(shí)體進(jìn)行循環(huán)，然后進(jìn)行字符串處理這里設(shè)置state的意義主要在于讓 easyui 的tree可以知道當(dāng)前節(jié)點(diǎn)是否為最低級節(jié)點(diǎn)，然后在前面顯示不同的圖標(biāo)。

總結(jié)：

就是這個(gè)小東西，折騰了我好幾天，呵呵，因?yàn)榘程苛?。不過還好最后搞懂了，也理解了很多東西。

以前一直覺得JSON這東西很神秘，現(xiàn)在覺得它還是有規(guī)律的。

使用easyui tree的重點(diǎn)之一，就是對JSON數(shù)據(jù)的處理，有兩種方式可以實(shí)現(xiàn)：第一就是使用String的format方法。這個(gè)大家可以去網(wǎng)上參考一下相關(guān)的API等等，我第一次寫錯(cuò)了，字符串的占位符應(yīng)該是 %s 我寫成了 {0} 找了半天，才知道問題所在。第二種方式，就是我上面注釋掉的那一行，直接使用字符串拼接。

然后上面獲取當(dāng)前節(jié)點(diǎn)的所有父節(jié)點(diǎn)的時(shí)候，又糾結(jié)了半天，去網(wǎng)上找了很多代碼，都不能用，最后還是自己想了一招，才得以解決。

優(yōu)點(diǎn)：可以使用異步加載，支持無限級。

缺點(diǎn)：太繁瑣，對后臺(tái)的數(shù)據(jù)格式要求過高。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: