jquery使用EasyUI Tree异步加载JSON数据（生成树）
这几天因为工作需要，要做一个支持无限级的菜单。
我也是菜鸟一只，能想到的东西不多，所以用了EasyUI的tree组件。
不得不说，easyui确实很强大。
因为是无限级菜单，数据量可能有点大，所以考虑采用异步加载。
但是因为后台默认传来的数据是一个实体，所以又在后台进行了JSON字符串拼接。
最后，在网上找了N多代码，然后又去问了好几个群里的网友，终于搞出来这个小东西。
一、HTML部分代码
<divid="categoryChooseDiv"title="请选择分类" style="width:650px;height:300px;"> <ulid="MyTree"></ul> </div>
html部分很简单，只要放一个ul就可以了。
二、JS部分代码
functionshowCategory(){
$('#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){
varstate=node.state;
if(!state){//判断当前选中的节点是否为根节点
currentId=node.id;
$("#chooseOk").attr("disabled",false);//如果为根节点则OK按钮可用
}else{
$("#chooseOk").attr("disabled",true);//如果不为根节点则OK按钮不可用
}
}
});
}
最后几句代码是因为我这个项目需要，只有选择到最下级节点的时候，才运行点击“确定”。否则不允许。
当用户点击确定的时候，需要获取当前用户选中节点的所有父节点
varnodes=[];//定义数组用来存放各个节点名称
varnode=$("#MyTree").tree("getSelected");//当前选中节点
nodes.push(node.text);//首先放入当前节点
varpnode=$('#MyTree').tree('getParent',node.target);//获取当前节点的父节点
while(pnode!=null){
nodes.push(pnode.text);//依次放入各个父节点，直到根节点为止
pnode=$('#MyTree').tree('getParent',pnode.target);
}
nodes.reverse();//数组元素倒序排序
$.each(nodes,function(){//循环取值
varhtml=this;
$("#inCategoryDiv").html($("#inCategoryDiv").html()+html+">>");
});
其实，主要问题在于后台对数据的处理，即如何能够转化为easyuitree才可以识别的JSON数据。
三、后台代码（Java）
publicResponseEntity<String>findBy(IntegerId){
List<Category>categorys=getcategorys(Id);
Stringss="";
ss+="[";
for(Categorycategory: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+="]";
returnsuper.responseString(ss);//字符编码转换
}
大致一个流程就是前台传来ID，然后获取到实体对象，然后对实体进行循环，然后进行字符串处理这里设置state的意义主要在于让easyui的tree可以知道当前节点是否为最低级节点，然后在前面显示不同的图标。
总结：
就是这个小东西，折腾了我好几天，呵呵，因为俺太笨了。不过还好最后搞懂了，也理解了很多东西。
以前一直觉得JSON这东西很神秘，现在觉得它还是有规律的。
使用easyuitree的重点之一，就是对JSON数据的处理，有两种方式可以实现：第一就是使用String的format方法。这个大家可以去网上参考一下相关的API等等，我第一次写错了，字符串的占位符应该是%s 我写成了{0}找了半天，才知道问题所在。第二种方式，就是我上面注释掉的那一行，直接使用字符串拼接。
然后上面获取当前节点的所有父节点的时候，又纠结了半天，去网上找了很多代码，都不能用，最后还是自己想了一招，才得以解决。
优点：可以使用异步加载，支持无限级。
缺点：太繁琐，对后台的数据格式要求过高。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。