什么是 acitree
acitree 是一个基于 jQuery 的树形控件，它具有多种配置和定制能力，可以用于前端项目中的导航、目录、分类等展示结构。它采用简单易懂的 JSON 数据结构，支持异步加载节点数据，支持多选、单选、拖拽等常见交互功能。
安装与引入
在项目目录下执行以下 npm 命令安装：
npm install acitree --save
在需要使用 acitree 的文件中引入该包：
import 'acitree';
配置参数
最基本的 acitree 创建方式：
$('selector').aciTree({
ajax: {
url: 'data.json'
}
});其中 selector 为 acitree 容器的选择器字符串，data.json 是一个 JSON 数据文件的 url 地址。
更多配置参数可以参见官方文档：https://acoderinsights.cn/acitree-docs
数据格式
acitree 默认以以下 JSON 数据格式为例：
-- -------------------- ---- -------
-
-
-------- ------
------ ----
-------- -----------
----------- -----
--------- -----
--------- -----
------ -----
------- -
------ -----------
--
----------- -
-
-------- ----------
------ -----
------- --------------------
-
-
--
-
-------- ------
------ ----
------- -----
------- --------------------
-
-其中，title 是节点名称，key 是节点唯一标识符，class 和 selected 分别为 css 类名和是否选中的属性，expand 和 folder 分别为是否展开和是否为文件夹节点的属性。ajax 为此节点的异步请求地址及参数，children 为子节点数组。
常见功能与实现
以下是几个常见的 acitree 功能和实现方法：
点击选择节点
$(document).on('acitree', function(event, api, node, eventName) {
if (eventName === 'selected') {
// 获取选中节点的 key
console.log(node.key);
}
});异步加载子节点
-- -------------------- ---- -------
------------------------- --------------- ---- -
------------------ -------------- ---- ----- -
--- ---- - --------
--- ----- - --------
--- --- - ----------------------
-- ----- -
-- -- ----------- ----
--------
----- ------
---- ----
--------- -------
-------- -------------- -
--- ----- - -----
-- ------- -
---------
----- -----
----- -----
---
-
-
---
-
---
---拖拽节点
-- -------------------- ---- -------
-----------------------
------------ -----
-------------------- ---------
----------- -----
--------- -----
----- -
---- -----------
-
---其中，dragAndDrop、dragAndDropPosition、bubbleDrop 和 dropMove 均为拖拽配置参数。
示例代码
HTML
<div id="aciTreeContainer"></div>
JavaScript
-- -------------------- ---- -------
------ ----------
------ --------------------------
---------------------------- -
--------------------------------
----- -
---- -----------
-
---
---数据文件 data.json
-- -------------------- ---- -------
-
-
-------- ------
------ -------
--------- -----
----------- -
-
-------- ------
------ ----
--------- -----
------- -----
------- -
------ -------------
-
--
-
-------- ------
------ ----
--------- -----
------- -----
------- -
------ -------------
-
--
-
-------- ------
------ ----
--------- -----
------- -----
------- -
------ -------------
-
-
-
-
-结论
acitree 是一个使用简单、配置丰富、可定制性强、功能齐全、代码规范的前端树形控件，深受部分前端团队的喜爱。通过本文的学习，您已经了解到了 acitree 的安装与引入、配置参数、数据格式、常见功能与实现等方面，可以对其进行进一步的学习和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672513660cf7123b3631b