使用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 + "&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} 找了半天，才知道问题所在。第二种方式，就是我上面注释掉的那一行，直接使用字符串拼接。

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

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

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

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

使用EasyUI Tree异步加载JSON数据生成树相关推荐

MVC4中EasyUI Tree异步加载JSON数据生成树
1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summar ...
easyUI tree 异步加载数据
easyUI 的 Tree组件在大部分时候都要从数据库读取数据,本文基于Java语言来实现easyUI tree的异步加载. 先看一下实现的效果: 整个过程采用的是简单三层架构,无论采用哪种模式,只要 ...
EasyUI datagrid动态加载json数据
最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...
Easyui Tree 异步加载实例
前台: <div style="border:1px solid #ccc;width:100px;padding:10px"><ul id="MyTr ...
Angular16 Angular整合zTree、异步加载节点数据
1 前提准备 1.1 新建一个angular4项目参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网:点击前往三少使用的版本:点击前往 1.3 参考博客点击前往01 ...
ajax传输json数据格式乱码_解决Ajax加载JSon数据中文乱码问题
一.问题描述使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { ...
ajax treegrid 选中,easyui treeGrid异步加载子节点示例
easyui treeGrid异步加载子节点示例.如果要异步加载treegrid的子节点,需要输出扁平的数据结构,然后通过_parentId来控制treegrid的父节点子节点结构.嵌套的childr ...
Android 应用开发之通过AsyncTask与ThreadPool（线程池）两种方式异步加载大量数据的分析与对比
Android 应用开发之通过AsyncTask与ThreadPool(线程池)两种方式异步加载大量数据的分析与对比标签: AndroidAsyncTaskThreadPool异步加载view 2 ...
Cesium基础知识-加载json数据
viewer = new Cesium.Viewer('cesiumContainer'); //加载json数据生成线 function CreateLineFromJson(params) { / ...

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

使用EasyUI Tree异步加载JSON数据生成树相关推荐

最新文章

热门文章

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

使用EasyUI Tree异步加载JSON数据 生成树相关推荐

最新文章

热门文章

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

使用EasyUI Tree异步加载JSON数据生成树相关推荐