工作一年了遇到过三种数型结构JS,dtree 、mifTree、zTree.用起来感觉还是zTree最好,之前也写过一个ztree的学习小结吧,看的人也很多,这里推荐下!!十分感谢ztree作者给我们带来了这么好的一个插件。
api网址:http://www.ztree.me/v3/api.php。
iteye博客地址:http://ztreeapi.iteye.com/。
这次要总结的是ztree的异步加载,异步加载多用于数据量相对较大的情况,如果全部查询出来组织成树的话可能要创建很多dom,出现假死,加载失败等现象。异步加载听上去感觉挺吓唬人的,其实看看api和例子的话很好弄的,以前自己在做户籍地的关联时做了一个,刚好近期又要用到,感觉吧虽然不难可还是总结下更方便。不说废话了。
首先引插件什么的都是必要的,不知道的话找下我的第一篇文章。对于ztree我个人倾向于使用简单数据类型,也就是数组的方式进行初始化,感觉json数据看上去很乱,逻辑也不是很好些,而数组的话只要我们给了对的数据就OK了,所以这篇文章也是基于简单数据类型的。至于json的话我还真没做过,我想也差不多吧。
异步加载的话就是对setting的配置中加上这么一段
var setting = { async:{ autoParam:["id=tid"], contentType:"application/x-www-form-urlencoded", enable:true, type:"post", url:"<%=path%>/deployment/devAndSysAction!synAddDevice.action" } ,data:{ simpleData :{ enable:true } } };
async就是对异步的配置,autoParam是自动提交的参数,这里要说下后面的tid才是我们在后台接受的参数名 ,enable就是控制异步加载是否生效,其他的都没什么说的了。
然后后台我们接值组织数据,我这里用的是伪码。
String id = request.getParameter("tid"); treeStr = ""; List<MyObject> lstMyObj = myService.findMyData(parentId); if(lstMyObj!=null){ for(int i=0,len=lstMyObj.size();i<len;i++){ treeStr += "{id:'myId',pId:'parentId',name:'myname' ,isParent:true},"; } } treeStr = "["+treeStr.substring(0,treeStr.length()-1)+"]"; 这里ajax返回treeStr
这样的话就OK了,这里有一个地方得十分注意就是isParent这个属性,在异步加载中一定要知道这个节点下面是否有子节点,如果有就设置成true,如果没有就设置成false,如果不设置的话就默认是false,那么即使你本次异步加载出的节点有子节点的话,它也不会在节点前加上个小+号,那你就无法进行异步加载了,而如果都设置成true的话,你点击没有子节点的节点前的+就会出现这种情况 ,有显示上的问题。所以这个isParent的正确设置很重要。