版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_37616173/article/details/71593892
异步加载Tree 想要默认展开全部节点,使用普通的方法是不行的。
例如:
$(document).ready(function(){
$.fn.zTree.init($("#areaTree2"), setting3, zNodes3);
var treeObj = $.fn.zTree.getZTreeObj("areaTree2"); //得到该tree
var node = treeObj.getNodeByTId("areaTree2_1"); //选中第一个节点
treeObj.expandNode(node, true, false, true); //打开节点 ,第一个参数表示哪个节点,第二个参数表示展开还是关闭,第三个参数表示 是否打开全部子孙节点
});
这样使用 expandNode 方法是不能展开异步加载的数据的。
官方demo 中 有一个 异步展开全部节点的 页面 在 \zTree-zTree_v3-2ffc0fa\demo\cn\super\asyncForAll.html 这个页面
但是他给定的方法不一定适合自己 ,所以我做了一些优化,删除了对自己显示数据没用的方法。
<input type="button" value="为该角色添加功能" onclick="addFunction()">
<ul id="areaTree4" class="ztree"></ul>
</div>
<script type="text/javascript">
var setting2 = {
check: {
enable: true
},
async: { //异步
enable: true,
url: getUrl
},
data: {//数据
key: {
name: "functionName" //name
},
simpleData: {
enable: true,
idKey: "functionId", //id
pIdKey: "pid" //pid
}
},
callback: { //回调函数,实现展开功能
beforeAsync: beforeAsync,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError
}
}
function getUrl(treeId, treeNode){ //默认注入两个参数,第一个是当前树的名字,第二个是选中的节点
return "/roleProject/FunctionServlet?dir=getFunctionTree&functionId="+treeNode.functionId+"&roleNo="+key;
}
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
function beforeAsync() {
curAsyncCount++;
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
curAsyncCount--;
if (curStatus == "expand") {
expandNodes(treeNode.children);
} else if (curStatus == "async") {
asyncNodes(treeNode.children);
}
if (curAsyncCount <= 0) {
if (curStatus != "init" && curStatus != "") {
asyncForAll = true;
}
curStatus = "";
}
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
curAsyncCount--;
if (curAsyncCount <= 0) {
curStatus = "";
if (treeNode!=null) asyncForAll = true;
}
}
var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
goAsync = false;
function expandAll() {
var zTree = $.fn.zTree.getZTreeObj("areaTree4");
if (asyncForAll) {
zTree.expandAll(true);
} else {
expandNodes(zTree.getNodes());
if (!goAsync) {
curStatus = "";
}
}
}
function expandNodes(nodes) {
if (!nodes) return;
curStatus = "expand";
var zTree = $.fn.zTree.getZTreeObj("areaTree4");
for (var i=0, l=nodes.length; i<l; i++) {
zTree.expandNode(nodes[i], true, false, false);
if (nodes[i].isParent && nodes[i].zAsync) {
expandNodes(nodes[i].children);
} else {
goAsync = true;
}
}
}
var zNodes2=[{functionId:0,functionName:"功能",pid:-1,isParent:true,checked:true}];
$(document).ready(function(){
$.fn.zTree.init($("#areaTree4"), setting2, zNodes2);
expandAll(); //调用写好的展开全部节点方法
});
这段代码 有很高的复用性,只需要传过来的Json对象 正确,使用zTree 完全不需要做改动,即可使用,只要将你自己的属性字段修改就可以了。