ztree怎么使用json

Ztree与JSON的完美结合：从数据加载到交互实现

Ztree是一款基于jQuery的树插件,以其“配置简单、数据灵活、功能强大”的特点，被广泛应用于Web项目中需要树形结构展示的场景（如组织架构、菜单导航、文件目录等），而JSON作为轻量级的数据交换格式，因其结构清晰、易于解析，成为Ztree最常用的数据源，本文将详细介绍“Ztree怎么使用JSON”，从数据格式定义到代码实现，一步步带你两者的结合使用。

Ztree与JSON：为什么是“黄金搭档”？

在开始具体操作前,我们需要明确：为什么Ztree优先选择JSON作为数据源？这主要源于两者的特性匹配：

• JSON的结构化优势：JSON通过“键值对”和“嵌套数组”天然表达树形层级关系，与Ztree需要的“节点数据结构”高度契合。
• Ztree的解析效率：Ztree内置了JSON数据解析方法，无需手动转换，可直接加载并渲染树形结构。
• 前后端分离友好：后端可直接返回JSON格式的树数据，前端通过AJAX获取后无缝对接，符合现代Web开发模式。

核心基础：Ztree节点的JSON数据格式

Ztree的树形结构由多个“节点”组成，每个节点通过JSON对象定义。必须包含的属性和常用可选属性如下（以Ztree v3.5为例）：

必须属性（定义节点基本身份）

常用可选属性（控制节点状态与样式）

示例：标准JSON树数据

[
  {
    "id": 1,
    "pId": 0,
    "name": "总公司",
    "open": true,
    "isParent": true
  },
  {
    "id": 11,
    "pId": 1,
    "name": "技术部",
    "isParent": true,
    "icon": "tech.png"
  },
  {
    "id": 111,
    "pId": 11,
    "name": "前端组",
    "url": "/dept/frontend",
    "target": "content"
  },
  {
    "id": 112,
    "pId": 11,
    "name": "后端组",
    "url": "/dept/backend"
  },
  {
    "id": 12,
    "pId": 1,
    "name": "市场部",
    "checked": true
  }
]

Ztree使用JSON的完整步骤

步骤1：引入Ztree依赖文件

使用Ztree前,需在HTML中引入jQuery、Ztree的CSS和JS文件（可从Ztree官网或CDN获取）：

<!-- jQuery（Ztree依赖jQuery） -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0.min.js"></script>
<!-- Ztree CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ztree@3.5.40/css/zTreeStyle/zTreeStyle.min.css">
<!-- Ztree JS -->
<script src="https://cdn.jsdelivr.net/npm/ztree@3.5.40/js/jquery.ztree.all.min.js"></script>

步骤2：定义容器元素

在HTML中创建一个容器（如<div>），用于渲染Ztree：

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

步骤3：编写JS代码初始化Ztree

核心是通过$.fn.zTree.init()方法初始化树，关键参数包括：

• 第一个参数：容器选择器（如#treeDemo）。
• 第二个参数：Ztree配置对象（setting），定义树的交互行为。
• 第三个参数：JSON数据数组（zNodes），即步骤2中定义的树数据。

示例1：静态JSON数据直接加载

适用于数据量小、固定的场景（如固定的部门树）：

// 1. 定义Ztree配置（setting）
var setting = {
    view: {
        // 是否显示图标（需配合icon属性）
        showIcon: true,
        // 是否显示连接线
        showLine: true
    },
    data: {
        // 数据属性名称映射（默认为id/pId/name，若JSON属性名不同需配置）
        simpleData: {
            enable: true,
            idKey: "id",       // JSON中id字段的映射
            pIdKey: "pId",     // JSON中pId字段的映射
            rootPId: 0         // 根节点的pId值
        },
        key: {
            name: "name"       // JSON中name字段的映射
        }
    },
    // 回调函数（如点击事件）
    callback: {
        onClick: function(event, treeId, treeNode) {
            console.log("点击了节点：" + treeNode.name);
            if (treeNode.url) {
                // 跳转链接（示例：在当前窗口打开）
                window.location.href = treeNode.url;
            }
        }
    }
};
// 2. 定义JSON数据（zNodes）
var zNodes = [
    {
        "id": 1,
        "pId": 0,
        "name": "总公司",
        "open": true,
        "isParent": true
    },
    {
        "id": 11,
        "pId": 1,
        "name": "技术部",
        "isParent": true
    },
    {
        "id": 111,
        "pId": 11,
        "name": "前端组"
    }
];
// 3. 初始化Ztree
$(document).ready(function() {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

示例2：动态JSON数据（AJAX异步加载）

适用于数据量大、需从后端获取的场景（如用户权限树、动态菜单）：

// 1. 定义Ztree配置（重点：配置异步加载）
var setting = {
    view: {
        showIcon: true,
        showLine: true
    },
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0
        },
        key: {
            name: "name"
        }
    },
    // 异步加载配置
    async: {
        enable: true,               // 启用异步加载
        url: "/api/departments",    // 后端接口地址（返回子节点JSON）
        type: "get",                // 请求方式（默认get）
        autoParam: ["id"],          // 自动将节点的id参数传给后端（如?id=1）
        otherParam: {"type": "tree"} // 额外传给后端的参数（可选）
    },
    callback: {
        onAsyncSuccess: function(event, treeId, treeNode, msg) {
            console.log("异步加载成功：" + msg);
        },
        onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
            console.log("异步加载失败：" +