ztree树形结构点击每一层树结构动态添加节点数据

ztree树形结构点击节动态添加结构数据

特此记录下，动态添加结构数据的坑，在这之前使用过layui的树形结构，做出来发现无法动态添加，为此大费周章，看到博客上几乎上都是异步加载 ，所以借鉴了一些博客，写下了ztree的动态添加方式。

1. 引入js和css

<script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.ztree.core.js }" charset="utf-8"</script>
<link rel="stylesheet" th:href="@{/css/zTreeStyle/zTreeStyle.css}">

2.初始化HTML结构容器

<div style="height: 500px;"
	<ul id="treeDemo" class="ztree" style="height:100%;overflow-y:scroll;box-sizing: border-box" ></ul>
</div>

2.请求最外层数据和点击动态加载每一层数据

let dataArray; // 声明一个全局变量保存数据
$(function () {
    //请求最外层
    $.post({url: '请求的地址'}).then((res) => {
        const {data} = res; // 请求的数据
        data.map((item, idenx) => {
            try { //使用try catch使用为防止请求出的第一层数据children数组出现null
                item.children.map(v => {
                    v.title = v.name;//修改名称为title 此时的title为每一层节点的名称
                    v.id = v.id;//同理
                })
            } catch (e) {
                console.log(e)
            } finally {
                dataArray = data; //此时的data已经是修改后的data数据
            }
        });
        ztreHandle(data);
    })
})

function ztreHandle(dataChildren) {
    var settingss = { //配置settings
        data: {
            simpleData: {
                enable: true, //true 、false 分别表示 使用 、 不使用 简单数据模式
                idKey: "id",//节点数据中保存唯一标识的属性名称
                pIdKey: "parentId",//节点数据中保存其父节点唯一标识的属性名称
                rootPId: -1//用于修正根节点父节点数据，即 pIdKey 指定的属性值
            },
            key: {
                name: "title" //zTree 节点名称的属性名称  默认值："name"
            }
        },
        callback: { //点击添加树形结构开始
            onClick: function (event, treeId, treeNode) { //点击一个节点获取节点json数据（event 节点对象 treeid 节点id值 treeNode节点json对象数据）
                const {id,children} = treeNode; //点击的json对象中得到id值和children数组（此时只存在id不存在children数组）
                if (id && !children) { //判断点击节点是否进行请求 防止请求过在重新请求数据

                    $.post({url: '/sydoc/shelf/selectpositem.do', data: {positemid: id}}).then((res) => {
                  
                        res.data.map(v => { //改变数据字段
                            v.title = v.name;
                        })
                        treeNode = res.data; //得到children值
                        /*此时的treeNode的数据格式应该是
                        *data:{id:1,title:"父节点",children:[{id:2,title:'子节点1'},{id:3,title:'子节点2'}]}
                        */
                        let newData = treeNode;
                        if(newData.length != 0){ //请求的数据不为空的时候让他不做改变
                            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取ztree的容器
                            //treeNode.halfCheck = false;
                            var parentZNode = treeObj.getNodeByParam("id", id, null);//获取指定父节点
                            newNode = treeObj.addNodes(parentZNode, newData, false);//添加到容器中该父节点下
                        }
                }
            }
        }
};
//数据
    var zNodes = dataChildren; //函数传参的数据传递方式初始化第一层结构
/*此时的初始化数据格式应该是
*    data:{id:1,title:"父节点",children:[{id:2,title:'子节点1'},{id:3,title:'子节点2'}]}
*/
    zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, zNodes); //初始化树结构
    zTreeObj.expandAll(false);    //true 节点全部展开、false节点收缩
}

凡是想实现，不可能实现不了，而是你还没找到方法 ----2020年6月18日 21:23