jstree是一个轻量级的jQuery插件，用于创建交互式树状图。它可以轻松地在Web应用程序中构建简单而强大的导航结构和文件管理器。
安装
要使用jstree，您需要安装Node.js和npm。打开命令行提示符并输入以下命令来安装jstree：
npm install jstree
基本用法
将jstree添加到您的站点非常简单。只需引入jQuery和jstree脚本文件，并为您的元素调用jstree函数即可。例如，以下代码将在id为“treeview”的div元素上创建一个空白的树状图：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
------- -----------------------------------------------------------
------- ------------------------------------------------------
----- ---------------- ------------------------------------------------------------ --
-------
------
---- --------------------
--------
---------- -- -
------------------------
---
---------
-------
-------现在您已经具有了一个基本的树状图。但是，如果您想动态地加载或修改数据，则需要更多的代码。
加载远程数据
要显示远程数据，您需要使用jstree的AJAX插件。该插件使您能够轻松地将数据从服务器加载到树状图中。以下是一个例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
------- -----------------------------------------------------------
---- -- ------ --- - -- ---
----- ---------------- ------------------------------------------------------------ --
------- ------------------------------------------------------
--------
---------- -- -
-- ----
-----------------------
------- -
------- -
------ ------------
----------- ------
-
-
---
---
---------
-------
------
---- --------------------
-------
-------在上面的代码中，我们将树状图的数据源设置为"data.json"，该文件位于与HTML文件相同的目录中。数据应该是JSON格式的，并且它应该返回一个数组，其中每个对象表示一个节点。
修改和保存数据
jstree可以处理节点的创建、编辑和删除操作。要启用这些功能，您需要使用“crrm”插件。以下是一个例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
------- -----------------------------------------------------------
---- -- ------ --- - -- ---
----- ---------------- ------------------------------------------------------------ --
------- ------------------------------------------------------
--------
---------- -- -
-- ----
-----------------------
------- -
------- -
------ ------------
----------- ------
-
--
---------- --------
---
---
---------
-------
------
---- --------------------
-------
-------现在您可以右键单击任何节点来创建、编辑或删除它。对于每个操作，jstree都会向您的服务器发送请求，以便您可以处理数据。
结论
jstree是一个功能强大而灵活的库，用于创建交
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33654