当前位置：首页 > jquery

jquery树形控件

2026-03-17 00:28:57jquery

jQuery树形控件推荐与使用

jsTree

jsTree是一个功能丰富的jQuery树形插件，支持拖放、复选框、异步加载等功能。适用于复杂树形结构需求。

安装方式：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>

基本初始化：

$('#tree_container').jstree({
    'core' : {
        'data' : [
            { "text" : "Root node", "children" : [
                { "text" : "Child node 1" },
                { "text" : "Child node 2" }
            ]}
        ]
    }
});

FancyTree

FancyTree提供高性能的树形视图，支持延迟加载、过滤、排序和键盘导航等高级功能。

引入资源：

<link href="path/to/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="path/to/jquery.fancytree-all.min.js"></script>

创建示例：

$("#tree").fancytree({
    source: [
        {title: "Node 1", key: "1"},
        {title: "Folder 2", key: "2", folder: true, children: [
            {title: "Node 2.1", key: "3"},
            {title: "Node 2.2", key: "4"}
        ]}
    ]
});

zTree

zTree是国产jQuery树插件，中文文档完善，支持多种皮肤和自定义图标。

基础用法：

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

初始化代码：

var setting = {};
var zNodes = [
    {name: "父节点1", open:true, children: [
        {name: "子节点1"},
        {name: "子节点2"}
    ]}
];
$.fn.zTree.init($("#treeDemo"), setting, zNodes);

Bootstrap Treeview

适用于Bootstrap项目的轻量级树形组件，依赖Bootstrap样式。

引入方式：

<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap-treeview.min.js"></script>

简单配置：

$('#tree').treeview({
    data: [
        {
            text: "Parent",
            nodes: [
                { text: "Child 1" },
                { text: "Child 2" }
            ]
        }
    ]
});

Dynatree

已停止维护但稳定的树形控件，适合老项目维护。

基本实现：

jquery树形控件

$("#tree").dynatree({
    children: [
        {title: "Item 1"},
        {title: "Folder 2", isFolder: true, children: [
            {title: "Sub-item 2.1"}
        ]}
    ]
});