最近项目需要向想做树形导航来管理各个层级的类目,对于中间遇到的一些问题,总结一下,感觉跟着牛人开发确实涨了好多见识。
想必网上好多zTree的例子可以参考,可是,我想说的是zTree的异步加载,以及在使用的时候该如何处理。
下面是其中的一段示例代码,详情可参考zTree官网提供的API:
var setting = {
async: {
enable: true,//启用异步加载
url:"../../xxxxx/xxxxx.do", //异步请求地址
autoParam:["id", "str1"], //需要传递的参数,为你在ztree中定义的参数名称
otherParam:{},
dataFilter: ajaxDataFilter
}
},
callback: {
onAsyncSuccess: onAsyncSuccess,
beforeClick: function(treeId, treeNode)
var zTree = $.fn.zTree.getZTreeObj("ztree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
productIframe.attr("src",treeNode.url);
return true;
}
}
}
};
function ajaxDataFilter(treeId, parentNode, responseData) {
if (responseData) {
//处理返回值,这里的返回值字段必须是json格式
}
return responseData;
};
我想说其实,zTree异步加载的优点个人理解类似于我们最熟悉的分页,我们点下一页的时候才去从后台查数据,而不是一次性查所有数据,这对大数量的情况非常有用。zTree就是采用类似的原理,首先加载的是根节点或者父节点,然后,点击“+”展开的时候再触发后台查询子节点的数据再做展示。
我遇到的问题如下:
1、async中配一个url地址就能达到多次触发的效果?
是这样的,每次展开父节点的时候就是一次加载的过程,需要根据这个url触发后台控制器获取下级节点的数据。
2、dataFilter: ajaxDataFilter方法是用来做什么的?
ajaxDataFilter这个方法中的最后一个参数responseData就是返回的结果,决定着你的树中节点的属性构成,如果你在后台控制器中做了其他封装,那么就需要在该方法中处理得到一个你想要的节点属性的json。
3、autoParam配了值为啥在后端没有取到?例如
autoParam:[“id”, “str1”],
在后端使用request.getParameter(“id”)的方式并没有取到值?
第一次加载的时候是取不到的,因为这颗树还没渲染出来,之后再点“+”就应该能取到,如果取不到,需要检查dataFiler中构造的树节点的属性中有没有这个属性。要保持命名的一致性。
4、为啥点击“+”展开父节点没有通过URL调到后台?
具体我也没搞清楚,估计是zTree内部机制的原因,我试了N次都没搞定,后来无意中在后台java代码中将返回结果的map中多加了一个isParent属性,即设置是否是父节点:map.put(“isParent”:”true”);//或false
这样竟然就可以了。
5、异步加载成功后需要使用updateNode刷新树节点
如:
function onAsyncSuccess(event, treeId, treeNode, msg) {
cancelHalf(treeNode);
}
function cancelHalf(treeNode) {
var zTree = $.fn.zTree.getZTreeObj("ztree");
treeNode.halfCheck = false;
zTree.updateNode(treeNode); //异步加载成功后刷新树节点
}