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

然后上面获取当前节点的所有父节点的时候，又纠结了半天，去网上找了很多代码，都不能用，最后还是自己想了一招，才得以解决。
优点：可以使用异步加载，支持无限级。

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

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