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

关注

原创最新推荐文章于 2026-05-01 18:46:01 发布 5.5k 阅读 AI 写同款· GEO 优化 ›

js树形控件—zTree使用总结树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree v3.3 API 文档从zTree官网下载的zTree包括以下组成部分metroStyle文件夹：zTree的metro风格样式相关文件（图片及css样式表）。zTreeStyle文件夹：zTree的标准风格样式文件夹（图片及css样式表）是完整的js库，可单纯加载此文件实现所有zTree功能，ztree.core。阅读详情

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);

 })
```

收录于