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