华山资源网

jquery使用EasyUI Tree异步加载JSON数据（生成树）
网络编程 2024/11/15 佚名
3 1

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

我也是菜鸟一只，能想到的东西不多，所以用了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"/category/getCategorys.java" + 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 + "&gt;&gt;" );
      });

其实，主要问题在于后台对数据的处理，即如何能够转化为 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} 找了半天，才知道问题所在。 第二种方式，就是我上面注释掉的那一行，直接使用字符串拼接。

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

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

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

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

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com