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

前端之家收集整理的这篇文章主要介绍了jquery使用EasyUI Tree异步加载JSON数据(生成树)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件。

不得不说,easyui确实很强大。

因为是无限级菜单,数据量可能有点大,所以考虑采用异步加载。

但是因为后台默认传来的数据是 一个实体,所以又在后台进行了JSON字符串拼接。

最后,在网上找了N多代码,然后又去问了好几个群里的网友,终于搞出来这个小东西。

一、HTML部分代码

分类" style="width: 650px; height: 300px;">

html部分很简单,只要放一个ul就可以了。

二、JS部分代码

Box: 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按钮不可用 } } }); }

最后几句代码是因为我这个项目需要,只有选择到最下级节点的时候,才运行点击“确定”。否则不允许。 当用户点击确定的时候,需要获取 当前用户选中节点 的所有父节点

" ); });

其实,主要问题在于后台对数据的处理,即如何能够转化为 easyui tree才可以识别的JSON数据。

三、后台代码(Java)

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

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

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

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

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

原文链接:https://www.f2er.com/jquery/41799.html

猜你在找的jQuery相关文章