zTree异步获取,默认展开一级节点
zTree官网
涉及到zTree的异步获取
这里主要是在setting部分的设置:
setting: {
...,
async: {enable: true, url: getUrl },
callback: { //回调函数,实现展开功能
beforeAsync: beforeAsync,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError
}
}
// 获取树对象,这里参数是树组件objId
$.fn.zTree.getZTreeObj('recorders')
// 展开节点
zTree.expandNode(nodes[i], true, false, false);
// 刷新树
zTree.refresh();
参考文章的封装代码
文章链接: https://www.dandelioncloud.cn/article/details/1537353471057838082
点击查看原文章代码
<input type="button" value="为该角色添加功能" οnclick="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" },
simpleData: {
enable: true,
idKey: "functionId", //id
pIdKey: "pid" //pid
}
},
callback: { //回调函数,实现展开功能
beforeAsync: beforeAsync,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError
}
}
var curStatus = "init", curAsyncCount = 0, asyncForAll = false, goAsync = false;
// 默认注入两个参数,第一个是当前树的名字,第二个是选中的节点
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;
}
}
// 自定义展开全部节点的方法
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(); //调用写好的展开全部节点方法
});
</script>
修改后
因为我的需求是展开至第二级,而且组件的使用代码不同,对于上面的代码进行了改造
组件配置代码
var testTree = {
lazy: true,
zTree: '',
pNode: '',
jqueryObj: null,
objId: '',
setting: {
check: { enable: true },
isSimpleData: true,
treeNodeKey: 'id',
treeNodeParentKey: 'pid',
showLine: true,
async: {
//异步
enable: true,
url: getUrl,
},
root: {
isRoot: true,
nodes: [],
},
showLine: true,
view: {
dblClickExpand: false,
showLine: false,
selectedMulti: false,
},
callback: {
// 展开节点触发
onExpand: function (event, treeId, treeNode) {
testTree.pNode = treeNode
testTree.loadNodeByPNode()
},
// 勾选复选框触发
onCheck: function (event, treeId, treeNode) {
testTree.pNode = treeNode
testTree.zTreeOnCheck(treeNode)
let { checked, id, pid } = treeNode
console.log(checked, id, pid)
$.ajax({
url: $('[name=context]').val() + '/4g/openapi/railway/device/find', //后台数据请求地址
type: 'get',
dataType: 'json',
data: {
id: id,
pid: pid,
},
async: false,
success: function (result) {
console.log(result)
},
})
},
// 回调函数,实现展开功能
// 异步获取并展开至第二级,
beforeAsync: beforeAsync,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError,
},
},
//加载根节点,pid=null, treeElement=dev
loadRootNode: function (jqueryObj, objId) {
testTree.objId = objId
testTree.jqueryObj = jqueryObj
var context = $('[name=context]').val()
var zNodes = []
var parameter = null
$.get(context + '/4g/openapi/railway/organizaton/find', parameter, function (data) {
$.each(data, function (i, item) {
var html = {
id: item.id,
pid: item.pid,
name: item.name,
open: false,
noR: false,
isParent: true,
parent: true,
}
zNodes[i] = html
})
$.fn.zTree.init(testTree.jqueryObj, testTree.setting, zNodes)
testTree.zTree = $.fn.zTree.getZTreeObj(testTree.objId)
// 默认列出二级节点,这里展开一级节点但是没有触发获取二级节点
let treeObj = $.fn.zTree.getZTreeObj('recorders')
let nodes = treeObj.getNodesByParam('level', 0)
for (var i = 0; i < nodes.length; i++) {
// 异步加载Tree 想要默认展开全部节点,使用普通的方法是不行的。
// 设置节点展开
// treeObj.expandNode(nodes[i], true, false, true)
// expandAll();
expandNodes(nodes)
}
})
},
// 加载子节点
loadNodeByPNode: function () {
var context = $('[name=context]').val()
var children = []
var folder = false
var parameter = null
var url =
context + '/4g/openapi/railway/organizaton/find?id=' + testTree.pNode.id + '&pid=' + testTree.pNode.pid
//获取pid = mid的数据,也就是子节点的id等于父节点的id,说明此父节点加载了子节点
if (!testTree.zTree.getNodeByParam('pid', testTree.pNode.id)) {
$.get(url, parameter, function (data) {
$.each(data, function (o, item2) {
var html2 = {
id: item2.id,
pid: item2.pid,
name: item2.name,
open: false,
isParent: true,
}
folder = false //item2.checked;
children[o] = html2
})
testTree.zTree.addNodes(testTree.pNode, children, folder)
})
}
},
// 勾选节点复选框触发
zTreeOnCheck: function (treeNode) {
// console.log(treeNode)
if (treeNode.checked == true) {
} else {
}
},
// 选择节点触发
selectNodes: function () {
var selectIds = ''
var treeObj = $.fn.zTree.getZTreeObj(testTree.objId)
return treeObj.getCheckedNodes(true)
},
}
改造后的代码
var curStatus = 'init',
curAsyncCount = 0,
asyncForAll = false,
goAsync = false
function beforeAsync() {
curAsyncCount++
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
curAsyncCount--
// 这里需要配置子节点的isParent属性,不然默认为叶子节点
treeNode.children = treeNode.children.map((row) => {
row.isParent = true
return row
})
// 这里我尝试去掉,不展开子节点,但是去掉之后会影响我的子节点展示为可展开节点
if (curStatus == 'expand') {
expandNodes(treeNode.children)
} else if (curStatus == 'async') {
asyncNodes(treeNode.children)
}
// 取消状态,不再往下展开,
curStatus = ''
// 因为expandNodes也没再往下获取,上面展开子节点会导致展开图标是展开了但是底下无数据
// 遍历然后设置子节点不展开
treeNode.children = treeNode.children.map((row) => {
row.open = false
return row
})
var zTree = $.fn.zTree.getZTreeObj('recorders')
// 刷新树重置子节点的展开状态
zTree.refresh();
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
curAsyncCount--
if (curAsyncCount <= 0) {
curStatus = ''
if (treeNode != null) asyncForAll = true
}
}
function expandAll() {
var zTree = $.fn.zTree.getZTreeObj('recorders')
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('recorders')
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
}
}
}
// 这里改成自己获取子节点的接口
function getUrl(treeId, treeNode) {
//默认注入两个参数,第一个是当前树的名字,第二个是选中的节点
var context = $('[name=context]').val()
var url = context + '/4g/openapi/railway/organizaton/find?id=' + treeNode.id + '&pid=' + treeNode.pid
return url
}