javascript 树控件 比较好用

作为网站的作者，我非常乐意为你讲解“JavaScript 树控件比较好用”的完整攻略。

什么是 JavaScript 树控件？

JavaScript 树控件是一种常用于显示层次数据的 UI 控件，如文件目录，网站导航菜单等。它的特点是可以动态地展开和折叠子节点，方便用户快速浏览和导航大量数据。

常见的 JavaScript 树控件库

市面上有很多 JavaScript 树控件库可供选择，以下是一些较为流行的库：

• zTree
• FancyTree
• jQuery Treeview
• jsTree

这些库都提供了丰富的 API 和功能，可根据具体的需求选择使用。

zTree 的使用示例

下面以 zTree 为例，演示如何使用 JavaScript 树控件。

步骤一：引入 zTree 库

在页面中引入 zTree 的 CSS 文件和 JavaScript 文件：

<link rel="stylesheet" type="text/css" href="zTreeStyle/zTreeStyle.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.ztree.all.min.js"></script>

步骤二：创建 zTree 控件

在 HTML 中添加一个 DOM 元素作为 zTree 的容器：

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

然后在 JavaScript 中创建 zTree 控件，设置容器和参数：

var setting = {
    data: {
        simpleData: {
            enable: true
        }
    }
};
var zNodes = [
    {id:1, pId:0, name:"父节点1", open:true},
    {id:11, pId:1, name:"子节点1"},
    {id:12, pId:1, name:"子节点2"},
    {id:13, pId:1, name:"子节点3"},
    {id:2, pId:0, name:"父节点2", open:true},
    {id:21, pId:2, name:"子节点1"},
    {id:22, pId:2, name:"子节点2"},
    {id:23, pId:2, name:"子节点3"}
];
$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

以上代码使用了 zTree 的简单数据格式，并且在父节点和子节点的 ID 和 name 字段中分别指定了节点的 id 和 name 属性。

步骤三：获取节点数据

zTree 控件提供了多种方法用于获取节点数据，例如：

var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var node = treeObj.getNodeByParam("id", 11, null);
console.log(node);

以上代码获取了 id 为 11 的节点对象，并将节点信息打印到控制台。

FancyTree 的使用示例

下面再来看一个使用 FancyTree 的示例。

步骤一：引入 FancyTree 库

在页面中引入 FancyTree 的 CSS 文件和 JavaScript 文件：

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.0/skin-win7/ui.fancytree.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.0/jquery.fancytree-all.min.js"></script>

步骤二：创建 FancyTree 控件

在 HTML 中添加一个 DOM 元素作为 FancyTree 的容器：

<div id="tree" style="width: 300px; height: 250px;"></div>

然后在 JavaScript 中创建 FancyTree 控件，设置容器和参数：

$(function(){
    $("#tree").fancytree({
        checkbox: true,
        selectMode: 3,
        activate: function(event, data) {
            console.log(data.node.title);
        },
        source: [
            {title: "Node 1", key: "1", children:
                [
                    {title: "Node 1.1", key: "1.1"},
                    {title: "Node 1.2", key: "1.2"}
                ]
            },
            {title: "Node 2", key: "2", children:
                [
                    {title: "Node 2.1", key: "2.1"},
                    {title: "Node 2.2", key: "2.2"}
                ]
            }
        ]
    });
});

以上代码定义了一些参数，例如 checkbox 和 selectMode，以及设置了节点的数据源 source。

步骤三：获取节点数据

FancyTree 控件同样提供了多种方法用于获取节点数据，例如：

var tree = $("#tree").fancytree("getTree");
var node = tree.getNodeByKey("2");
console.log(node.title);

以上代码获取了 key 为 2 的节点对象，并将节点信息打印到控制台。

总结

以上是对 JavaScript 树控件的一个基本介绍和两个常见库的演示。无论是使用 zTree 还是 FancyTree，都需要引入相应的库文件并进行基本的参数设置。掌握了这些基础知识，您可以根据实际需求，灵活应用 JavaScript 树控件来呈现层次数据。