zTree官网

https://treejs.cn/v3/api.php

涉及到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

}

最新文章

  1. WPF DatePicker只显示年和月 修改：可以只显示年
  2. Python学习【第四篇】用户输入及判断
  3. SQL注入测试平台 SQLol -6.CHALLENGES挑战
  4. MOGODB REDIS
  5. Toad创建DBLINKsop
  6. 函数xdes_calc_descriptor_page
  7. JS获得QQ号码的昵称,头像,生日
  8. SEO 网站页面SEO优化之页面title标题优化
  9. 安装php时，make步骤报错make: *** [sapi/fpm/php-fpm] Error 1
  10. Zookeeper，也要接触起来啦
  11. ZOJ 1542 POJ 1861 Network 网络 最小生成树，求最长边，Kruskal算法
  12. TextRank：关键词提取算法中的PageRank
  13. js将字符串转化成函数：eval(logOutCallbackFun+&quot;()&quot;);
  14. [CQOI2015]网络吞吐量
  15. Spring学习记录
  16. 一个页面中使用多个UEditor
  17. python 小程序，替换文件中的字符串
  18. 上传APP加入视频预览－－精简点名
  19. dubbo源码解析-spi(3)
  20. BZOJ 2668: [cqoi2012]交换棋子

热门文章

  1. Docker之Redis保姆级别安装
  2. 2022-05-31内部群每日三题-清辉PMP
  3. ubuntu下安装lua和tolua++
  4. goalng 将字符串转化成整数后取余
  5. VUE+Element+若依随笔001：点击左侧菜单跳转外部链接配置并传参数
  6. leecode75. 颜色分类
  7. 关于oracle中scott用户恢复到初始状态的步骤，和一些问题解决方法。
  8. Mac上好用的app们
  9. Python 切片/列表/字符串之间装换
  10. Java基础学习：9、访问修饰符