zTree.v3 是一款基于 jQuery 的树形结构插件，可以帮助开发者快速创建可定制的树状结构。本文将介绍如何使用 npm 安装和使用 zTree.v3，并提供详细的示例代码。
安装
在使用 zTree.v3 之前，需要先安装它。可以通过 npm 在命令行中进行安装：
npm install ztree
当然也可以在 HTML 文件中引入 CDN：
<!-- 引入 jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <!-- 引入 zTree.js 和 zTree 样式文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.57/css/zTreeStyle/zTreeStyle.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.57/js/jquery.ztree.core.min.js"></script>
如果已经有了 jQuery，只需要引入 zTree.js 和 zTree 样式文件即可。
基本用法
使用 zTree.v3 创建一个简单的树状结构非常容易。首先需要一个用于显示树状结构的 DOM 元素：
<div id="my-tree"></div>
然后创建一个 JavaScript 对象来表示树状结构：
-- -------------------- ---- -------
--- -------- - -
- ----- ------- --------- -
- ----- ------ --
- ----- ------ -
---
- ----- ------- --------- -
- ----- ------ --
- ----- ------ -
--
--最后，使用 jQuery 和 zTree.v3 创建树状结构：
-- -------------------- ---- -------
------------ -
--- ------- - --------------
---------------
----- -
----------- -
------- ----
-
--
----- -
--------- ------
--------- -----
--
----- -
------- ----
--
--------- -
--------------- ---------------
------------- ------------
--
------ --------
---
---以上代码会在 #my-tree 元素中创建一个树状结构，其中 data 对象表示数据源，view 对象表示如何展示树状结构，edit 对象表示是否支持编辑功能，callback 对象表示在特定事件发生时执行的函数，nodes 数组表示树的节点。
进阶用法
自定义节点图标
可以通过在节点对象中添加 icon 属性来自定义节点的图标。例如：
var treeData = [
{ name: '父节点1', icon: '/path/to/parent-icon.png', children: [
{ name: '子节点1', icon: '/path/to/child-icon.png' },
{ name: '子节点2', icon: '/path/to/child-icon.png' }
]}
];异步加载数据
如果数据源很大或需要从服务器获取，可以使用 zTree.v3 的异步加载功能。首先需要在 data 对象中设置 async 属性：
var asyncData = {
enable: true,
url: '/path/to/data',
autoParam: ['id']
};然后在 view 对象中设置 addDiyDom 方法来自定义节点展示方式：
-- -------------------- ---- -------
--- ----------- - -
---------- ---------------- --------- -
-- ------------------- -
--- ---- - ----- - ------------ - --------
-----------------------------
- ---- -
--- ---- - ----- - ------------ - --------
----------------------------
-
-
--最后，在 zTree() 函数中指定 asyncData 和 viewSetting：
$(function() {
var $myTree = $('#my
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/33957) ，转载请注明来源
[https://www.javascriptcn.com/post/33957](https://www.javascriptcn.com/post/33957)