jquery使用EasyUI Tree异步加载JSON数据（生成树）

这几天因为工作需要，要做一个支持无限级的菜单。

我也是菜鸟一只，能想到的东西不多，所以用了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); //字符编码转换    }