jQuery FileTree 是一个基于 jQuery 和 PHP 的组件，用于在网页上展示本地或服务器中的文件和文件夹。本文将介绍如何使用 npm 包 jqueryfiletree 来使用 jQuery FileTree。
安装
在使用 jQuery FileTree 之前，需要在项目中安装 jqueryfiletree 包。在命令行中运行以下命令即可：
npm install jqueryfiletree
这会将 jqueryfiletree 包下载到项目的 node_modules 目录中。
快速使用
安装好 jqueryfiletree 后，就可以在 HTML 文件中使用它了。首先需要引入 jQuery 和 jQuery FileTree 的 CSS 和 JavaScript 文件：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ------------
----- ---------------- --------------------------------------------------------- --
------- --------------------------------------------------
------- ----------------------------------------------------------------
-------
------
---- --------------------
--------
---------------------------- -
-------------------------
----- ----
------- -----------------------------------------------------------
---
---
---------
-------
-------上面的代码只是简单地使用了 jQuery FileTree 的默认样式和参数。其中，#filetree 是一个用来显示文件和文件夹列表的空 div 元素，root 指定了文件夹的根目录，script 指定了用来获取文件和文件夹列表的 PHP 脚本的路径。
自定义参数
除了上面提到的 root 和 script 参数，jQuery FileTree 还支持以下参数：
expandSpeed：文件夹展开的速度，默认为 500。collapseSpeed：文件夹收起的速度，默认为 500。loadMessage：加载文件夹列表时的提示信息，默认为 "Loading..."。multiFolder：是否允许选择多个文件夹，true 或 false，默认为 false。rootFolderTooltip：根文件夹的提示文本，默认为 "Root Folder"。scriptData：提交给 PHP 脚本的数据，可以是对象或函数，如果是函数，需要返回一个对象，默认为 {}。onSelect：当选择一个文件或文件夹时触发的事件，参数为选择的路径。
下面是一个自定义部分参数的例子：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ------------
----- ---------------- --------------------------------------------------------- --
------- --------------------------------------------------
------- ----------------------------------------------------------------
-------
------
---- --------------------
--------
---------------------------- -
-------------------------
----- ----
------- ------------------------------------------------------------
------------ -----
--------- ------------------ -
------------------------ ----------
-
---
---
---------
-------
-------自定义样式
除了使用 jQuery FileTree 默认的样式，还可以通过修改 CSS 文件来自定义样式。下面是一些常用的 CSS 类名及其作用：
.jqueryFileTree：整个文件树的容器。.directory：文件夹的容器。.file：文件的容器。.collapsed：折叠状态下的文件夹。可以用来添加对应的图标。.expanded：展开状态下的文件夹。可以用来添加对应的图标。
下面是一个自定义样式的例子：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ------------
----- ---------------- --------------------------------------------------------- --
-------
--------------------------- -
-------- ----
------------- ----
-
-------------------------- -
-------- ----
------------- ----
-
------------ -
-------- -----
------------- ----
-
--------
------- --------------------------------------------------
------- ----------------------------------------------------------------
-------
------
---- --------------------
--------
---------------------------- -
-------------------------
----- ----
------- -----------------------------------------------------------
---
---
---------
-------
-------组合使用
jQuery FileTree 还可以与其他组件结合使用，以满足更多的需求。下面是一个与 Bootstrap Modal 结合使用的例子：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ------------
----- ---------------- --------------------------------------------------------- --
----- ---------------- ---------------------------------------------------------------------
-------
----------- -
-------- --
-
--------
------- --------------------------------------------------
------- ----------------------------------------------------------------
------- ----------------------------------------------------------------------------------
-------
------
------- ------------- ---------- ------------ ------------------- -------------------------
------ ----
---------
---- ------------ ----- -------------- ------------- ------------- -------------------------------- -------------------
---- ------------------- ----------
---- ----------------------
---- ---------------------
--- ------------------- -------------------------- - ---------
------- ------------- ------------- -------------------- -------------------
----- ---------------------------------
---------
------
---- -------------------
---- --------------------
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------
------
------
------
--------
---------------------------- -
-------------------------
----- ----
------- ------------------------------------------------------------
--------- ------------------ -
---------------------------------
------------------------------
-
---
---
---------
-------
-------上面的例子中，通过使用 Bootstrap Modal 的方式，将 jQuery FileTree 添加到模态框中，供用户选择文件。选择文件后，模态框会隐藏并将选择的文件路径设置到一个 input 元素中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a3981e8991b448d7dc0