json数据怎么设置ztree

使用JSON数据配置ZTree：完整指南

ZTree是一款基于jQuery的树插件,以其轻量、灵活、功能丰富（如异步加载、复选框、拖拽等）被广泛应用于前端项目中，配置ZTree的核心是正确设置JSON数据结构，本文将详细介绍如何通过JSON数据初始化ZTree，包括基础配置、常用属性、高级功能（如复选框、节点状态）及常见问题解决。

ZTree JSON数据基础结构

ZTree的JSON数据（通常称为setting.data.key中的simpleData或standardData格式）是树节点的核心描述，ZTree推荐使用简单JSON数据格式（simpleData），它通过id、pid（父节点ID）等字段快速构建层级关系，性能更优；而标准JSON数据格式（standardData）则通过children字段嵌套子节点，结构更直观，但灵活性稍差。

简单JSON数据格式（推荐）

简单数据格式通过“父子ID关联”构建树，适合层级关系固定的场景（如组织架构、菜单分类），核心字段如下：

示例：简单JSON数据

[
  {
    "id": 1,
    "pId": 0,
    "name": "父节点1",
    "open": true,
    "isParent": true
  },
  {
    "id": 11,
    "pId": 1,
    "name": "子节点1-1",
    "checked": true
  },
  {
    "id": 12,
    "pId": 1,
    "name": "子节点1-2",
    "url": "https://www.example.com",
    "target": "_blank"
  },
  {
    "id": 2,
    "pId": 0,
    "name": "父节点2",
    "isParent": false,
    "icon": "icon/leaf.png"
  }
]

标准JSON数据格式

标准数据格式通过children字段嵌套子节点，适合动态层级或需要“按需加载子节点”的场景，核心字段如下：

示例：标准JSON数据

[
  {
    "name": "父节点1",
    "open": true,
    "children": [
      {
        "name": "子节点1-1",
        "checked": true
      },
      {
        "name": "子节点1-2",
        "url": "https://www.example.com"
      }
    ]
  },
  {
    "name": "父节点2",
    "icon": "icon/leaf.png"
  }
]

ZTree初始化配置

定义好JSON数据后,需通过setting对象配置ZTree的行为，核心是data和callback等模块。

基础配置（setting对象）

// 1. 准备JSON数据
const zTreeNodes = [
  { id: 1, pId: 0, name: "父节点1", open: true, isParent: true },
  { id: 11, pId: 1, name: "子节点1-1" },
  { id: 2, pId: 0, name: "父节点2" }
];
// 2. 配置setting对象
const setting = {
  // 数据配置
  data: {
    // 指定JSON数据格式（simpleData或standardData）
    simpleData: {
      enable: true, // 启用简单数据格式
      // 自定义id和pId的字段名（默认为"id"和"pId"）
      idKey: "id",
      pIdKey: "pId",
      rootPId: 0 // 根节点的pId值
    },
    key: {
      name: "name", // 节点名称字段名（默认为"name"）
      checked: "checked", // 勾选状态字段名（默认为"checked"）
      children: "children", // 子节点字段名（标准格式下生效）
      url: "url", // 节点链接字段名（默认为"url"）
      icon: "icon" // 节点图标字段名（默认为"icon"）
    }
  },
  // 视图配置（可选）
  view: {
    showIcon: true, // 显示节点图标
    selectedMulti: false // 禁止多选
  },
  // 复选框配置（可选）
  check: {
    enable: true, // 启用复选框
    chkStyle: "checkbox", // 复选框样式（checkbox或radio）
    chkboxType: { "Y": "ps", "N": "ps" } // 勾选/取消勾选时影响父子节点的类型
  },
  // 回调函数配置（可选）
  callback: {
    onClick: function(event, treeId, treeNode) {
      console.log("点击节点：", treeNode.name);
      // 如果节点有url，则跳转
      if (treeNode.url) {
        window.open(treeNode.url, treeNode.target || "_self");
      }
    },
    onCheck: function(event, treeId, treeNode) {
      console.log("勾选状态变化：", treeNode.name, treeNode.checked);
    }
  }
};
// 3. 初始化ZTree（需引入jQuery和zTree插件）
$(document).ready(function() {
  $.fn.zTree.init($("#treeDemo"), setting, zTreeNodes);
});

HTML结构

在页面中放置一个容器（如<ul>），并指定id：

<ul id="treeDemo" class="ztree"></ul>

引入必要文件

ZTree依赖jQuery,需按顺序引入以下文件：

<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- ZTree CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ztree@3.5.44/css/zTreeStyle/zTreeStyle.min.css">
<!-- ZTree JS -->
<script src="https://cdn.jsdelivr.net/npm/ztree@3.5.44/js/jquery.ztree.all.min.js"></script>

常用功能配置

启用复选框（Checkbox）

在setting.check中配置：

check: {
  enable: true, // 启用复选框
  chkStyle: "checkbox", // 复选框样式（"checkbox"或"radio"）
  // 控制勾选/取消勾选时父子节点的联动效果
  // "Y":勾选时，"p"影响父节点，"s"影响子节点；"N":取消勾选时同理
  chkboxType: { "Y": "ps", "N": "ps" }
}

JSON数据中通过checked: true设置节点默认勾选。

节点状态控制（展开/勾选/禁用）

• 展开节点：JSON数据中设置open: true（默认关闭）。
• 勾选节点：JSON数据中设置checked: true（需启用复选框）。