jquery使用EasyUI Tree非同步載入JSON資料（產生樹），easyuijson

jquery使用EasyUI Tree非同步載入JSON資料（產生樹），easyuijson

這幾天因為工作需要，要做一個支援無限級的菜單。

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

不得不說，easyui確實很強大。

因為是無限級菜單，資料量可能有點大，所以考慮採用非同步載入。

但是因為後台預設傳來的資料是 一個實體，所以又在後台進行了JSON字串拼接。

最後，在網上找了N多代碼，然後又去問了好幾個群裡的網友，終於搞出來這個小東西。

一、HTML部分代碼

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

html部分很簡單，只要放一個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){                  //判斷當前選中的節點是否為根節點             currentId=node.id;            $("#chooseOk").attr( "disabled" , false );  //如果為根節點 則OK按鈕可用            }else{            $("#chooseOk").attr( "disabled" , true );  //如果不為根節點 則OK按鈕不可用            }          }       });  }

最後幾句代碼是因為我這個項目需要，只有選擇到最下級節點的時候，才運行點擊“確定”。否則不允許。
當使用者點擊確定的時候，需要擷取 目前使用者選中節點 的所有父節點

      var nodes=[];      //定義數組用來存放各個節點名稱      var node =$("#MyTree").tree("getSelected"); //當前選中節點      nodes.push(node.text);            //首先放入當前節點      var pnode = $('#MyTree').tree('getParent',node.target); //擷取當前節點的父節點      while(pnode!=null){        nodes.push(pnode.text);          //依次放入各個父節點，直到根節點為止        pnode = $('#MyTree').tree('getParent',pnode.target);      }      nodes.reverse();             //數組元素倒序排序      $.each(nodes,function(){        //迴圈取值        var html=this;          $("#inCategoryDiv").html( $("#inCategoryDiv").html() + html + ">>" );      }); 

其實，主要問題在於後台對資料的處理，即如何能夠轉化為 easyui tree才可以識別的JSON資料。

三、後台代碼（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() );  //判斷當前節點是否還有子節點       if(cs.size()==0){ //沒有子節點 設定 state 為空白       ss+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"iconCls\": \"\", \"state\": \"\"", category.getId() , category.getName());       }else{    // 還有子節點 設定 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); //字元編碼轉換    }

大致一個流程就是前台傳來ID，然後擷取到實體物件，然後對實體進行迴圈，然後進行字串處理這裡設定state的意義主要在於讓 easyui 的tree可以知道當前節點是否為最低級節點，然後在前面顯示不同的表徵圖。

總結：

就是這個小東西，折騰了我好幾天，呵呵，因為俺太笨了。不過還好最後搞懂了，也理解了很多東西。

以前一直覺得JSON這東西很神秘，現在覺得它還是有規律的。

使用easyui tree的重點之一，就是對JSON資料的處理，有兩種方式可以實現：第一就是使用String的format方法。這個大家可以去網上參考一下相關的API等等，我第一次寫錯了，字串的預留位置應該是 %s  我寫成了 {0} 找了半天，才知道問題所在。 第二種方式，就是我上面注釋掉的那一行，直接使用字串拼接。

然後上面擷取當前節點的所有父節點的時候，又糾結了半天，去網上找了很多代碼，都不能用，最後還是自己想了一招，才得以解決。

優點：可以使用非同步載入，支援無限級。

缺點：太繁瑣，對背景資料格式要求過高。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。