easyui-tree动态获取


   一、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 findBy(Integer Id ) {
        List 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 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} 找了半天,才知道问题所在。 第二种方式,就是我上面注释掉的那一行,直接使用字符串拼接。

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


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

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


    刚刚老大又发话了,让我把它给做成一组件。。在其他地方也可以调用的那种,我觉得目前的难题是:如何用JS把后台传来的 实体类型的 list转换成easyui tree可以识别的JSON数据? 不知道各位有没有什么好的办法,希望可以指点一下小弟,谢谢!
   PS:无限极菜单,群里有位网友说是 无限级也最大能支持 65535,不知道是不是这样子的,希望有高手能解答一下我的这个疑惑:无限极菜单到底能支持多少级?

你可能感兴趣的:(jquery,easyui)