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); //字符编码转换
    }

大致一个流程就是前台传来id，然后获取到实体对象，然后对实体进行循环，然后进行字符串处理这里设置state的意义主要在于让 easyui 的tree可以知道当前节点是否为最低级节点，然后在前面显示不同的图标。

总结：

就是这个小东西，折腾了我好几天，呵呵，因为俺太笨了。不过还好最后搞懂了，也理解了很多东西。

以前一直觉得json这东西很神秘，现在觉得它还是有规律的。

使用easyui tree的重点之一，就是对json数据的处理，有两种方式可以实现：第一就是使用string的format方法。这个大家可以去网上参考一下相关的api等等，我第一次写错了，字符串的占位符应该是 %s  我写成了 {0} 找了半天，才知道问题所在。 第二种方式，就是我上面注释掉的那一行，直接使用字符串拼接。

然后上面获取当前节点的所有父节点的时候，又纠结了半天，去网上找了很多代码，都不能用，最后还是自己想了一招，才得以解决。

优点：可以使用异步加载，支持无限级。

缺点：太繁琐，对后台的数据格式要求过高。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。