插件：ztree 数据格式及基本用法

最新推荐文章于 2024-07-31 14:06:10 发布

原创最新推荐文章于 2024-07-31 14:06:10 发布 · 5.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ztree #ztree数据格式 #ztree默认选中

插件专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍ztree插件的使用方法，包括数据格式设置、初始化配置及事件回调等关键信息，适用于希望快速上手ztree实现树形结构展示的前端开发者。

ztree 官网：http://www.treejs.cn/v3/api.php

数据格式：

JSON

var nodes = [
	{name: "父节点1", children: [
		{name: "子节点1"},
		{name: "子节点2"}
	]}
];

pId 即 paraent-Id, 最顶上的 pid === 0

效果：

基本用法（数据格式 2 ）：

```
api.allTreeData().then((res) => {
  res.data[0].open = true;   //第一个打开
   let setting = {
     view: {
       dblClickExpand: true,
       showLine: true,
       selectedMulti: false
     },
     data: {
       simpleData: {
         enable: true,  //显示层级
         idKey: "id",
         pIdKey: "pId",
         rootPId: 0
       }
     },
     callback: {
       onClick: function (event, treeId, treeNode) {
         _this.callBack(treeNode);
       }
     }
   };
   let zTree = $.fn.zTree.init($('#jg-tree'), setting, res.data);
   //默认选中 第一个
   let firstNode = zTree.getNodeByParam('id', 1);
   zTree.selectNode(firstNode);

 })
```