ztree怎么使用json

zTree如何使用JSON数据构建树形结构

在Web开发中,树形控件是展示层级数据（如组织架构、文件目录、分类菜单等）的常用组件，zTree作为一款基于jQuery的轻量级树形插件，以其“配置简单、数据灵活、功能强大”的特点被广泛使用，而JSON（JavaScript Object Notation）作为当前主流的数据交换格式，以其“结构清晰、易于解析”的优势，成为zTree树形数据的首选来源，本文将详细介绍zTree如何使用JSON数据，从基础配置到进阶技巧，帮你快速这一核心技能。

zTree与JSON：为什么是“黄金组合”？

在开始具体操作前,我们先明确一个核心问题：为什么zTree优先推荐使用JSON作为数据源？这主要源于两者的特性匹配：

• JSON的结构天然适配树形层级：JSON通过嵌套的对象和数组，可以直观地表示父子关系（如{id:1, name:"父节点", children:[{id:2, name:"子节点"}]}），与树形节点的“层级嵌套”结构完全一致。
• zTree对JSON的原生支持：zTree内置了JSON数据解析引擎，无需额外处理即可直接加载JSON数据，大幅简化开发流程。
• 前后端数据交互的便捷性：现代Web应用中，后端通常返回JSON格式数据（如RESTful API接口），前端zTree可直接接收并渲染，避免了数据格式转换的麻烦。

使用JSON数据的基础步骤：从0到1构建树

准备工作：引入zTree依赖

在使用zTree前,需先引入必要的CSS和JS文件，zTree的核心文件包括：

• jquery.min.js：zTree基于jQuery，需先引入jQuery。
• jquery.ztree.all.min.js：zTree的核心JS文件（包含所有功能模块）。
• css/zTreeStyle/zTreeStyle.css：zTree的默认样式文件（也可自定义样式）。

<!-- 引入jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- 引入zTree核心JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery-ztree@3.5.41/js/jquery.ztree.all.min.js"></script>
<!-- 引入zTree默认样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ztree@3.5.41/css/zTreeStyle/zTreeStyle.css">

定义JSON数据：树形数据的“原料”

zTree要渲染树,首先需要符合其规范的JSON数据，JSON数据的核心是节点对象数组，每个节点对象通过特定属性定义节点的状态和行为。

1 节点对象的常用属性

zTree的节点属性非常丰富,以下是核心必知属性（完整属性可参考zTree官方文档）：

2 JSON数据示例

假设我们要构建一个“部门-员工”树形结构，JSON数据如下：

[
  {
    "id": 1,
    "name": "技术部",
    "open": true,
    "children": [
      {
        "id": 11,
        "name": "前端组",
        "children": [
          { "id": 111, "name": "张三", "isParent": false },
          { "id": 112, "name": "李四", "isParent": false }
        ]
      },
      {
        "id": 12,
        "name": "后端组",
        "children": [
          { "id": 121, "name": "王五", "isParent": false },
          { "id": 122, "name": "赵六", "isParent": false }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "市场部",
    "open": false,
    "children": [
      { "id": 21, "name": "产品经理", "isParent": false },
      { "id": 22, "name": "运营专员", "isParent": false }
    ]
  }
]

初始化zTree：将JSON“画”成树

有了JSON数据后,只需通过简单的JS配置即可初始化zTree，核心步骤是：定义容器 → 配置zTree参数 → 加载数据。

1 定义HTML容器

在页面中创建一个<ul>元素作为zTree的容器，id需唯一（后续JS通过该ID初始化树）：

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

2 配置zTree参数与初始化

通过$.fn.zTree.init()方法初始化zTree，需传入3个参数：容器选择器、zTree配置项、JSON数据。

<script>
// 1. 准备JSON数据（可从后端API获取，此处直接定义）
var zNodes = [
  {
    "id": 1,
    "name": "技术部",
    "open": true,
    "children": [
      {
        "id": 11,
        "name": "前端组",
        "children": [
          { "id": 111, "name": "张三", "isParent": false },
          { "id": 112, "name": "李四", "isParent": false }
        ]
      },
      {
        "id": 12,
        "name": "后端组",
        "children": [
          { "id": 121, "name": "王五", "isParent": false },
          { "id": 122, "name": "赵六", "isParent": false }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "市场部",
    "open": false,
    "children": [
      { "id": 21, "name": "产品经理", "isParent": false },
      { "id": 22, "name": "运营专员", "isParent": false }
    ]
  }
];
// 2. 配置zTree参数（setting）
var setting = {
  // 核心配置项，后续会展开详细说明
  data: {
    simpleData: { // 简单数据模式（通过parentId关联父子节点）
      enable: true, // 是否启用简单数据模式
      idKey: "id",  // 节点ID的属性名
      pIdKey: "parentId", // 父节点ID的属性名
      rootPId: null // 根节点的父ID（默认为null）
    },
    key: { // 节点数据的属性名映射
      name: "name", // 节点名称的属性名
      children: "children", // 子节点数组的属性名
      checked: "checked" // 勾选状态的属性名
    }
  },
  // 其他配置（如复选框、拖拽等）可按需添加
  check: {
    enable: true // 启用复选框
  }
};
// 3. 初始化zTree
$(document).ready(function() {
  $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>

3 配置项说明：setting的核心作用

setting是zTree的“灵魂”，用于控制树的行为，其中data配置项是JSON数据解析的核心，分为两种数据模式：

（1）简单数据模式（simpleData）

简单数据模式通过parentId字段关联父子节点，适合“扁平化”的JSON