树形控件zTree使用

发表于 | 分类于

经常有这个需求，用用到树形菜单做展示或者选择，基于jquery的一个控件zTree非常简单好用，这里做一下记录。

官网介绍，zTree 是一个依靠 jQuery 实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

官网地址：http://www.treejs.cn/v3/main.php

另外还有好多实际效果的演示，可以去看看。

下载

直接去github下载源码：https://github.com/zTree/zTree_v3

选取了一个最基本的例子，带metro风格的，比较好看。

https://github.com/zTree/zTree_v3/blob/master/demo/cn/super/metro.html

提取最核心的东东

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - Simple Data</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="./css/demo.css" type="text/css">
    <link rel="stylesheet" href="./css/metroStyle.css" type="text/css">
    <script type="text/javascript" src="./js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="./js/jquery.ztree.core.min.js"></script>
    <script type="text/javascript" src="./js/jquery.ztree.excheck.min.js"></script>
    <SCRIPT type="text/javascript">
        var setting = {
            view: {
                selectedMulti: false,
				showLine: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: false
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"父节点1", open:true},
            { id:11, pId:1, name:"父节点11"},
            { id:111, pId:11, name:"叶子节点111"},
            { id:112, pId:11, name:"叶子节点112"},
            { id:113, pId:11, name:"叶子节点113"},
            { id:114, pId:11, name:"叶子节点114"},
            { id:12, pId:1, name:"父节点12"},
            { id:121, pId:12, name:"叶子节点121"},
            { id:122, pId:12, name:"叶子节点122"},
            { id:123, pId:12, name:"叶子节点123"},
            { id:124, pId:12, name:"叶子节点124"},
            { id:13, pId:1, name:"父节点13", isParent:true},
            { id:2, pId:0, name:"父节点2"},
            { id:21, pId:2, name:"父节点21", open:true},
            { id:211, pId:21, name:"叶子节点211"},
            { id:212, pId:21, name:"叶子节点212"},
            { id:213, pId:21, name:"叶子节点213"},
            { id:214, pId:21, name:"叶子节点214"},
            { id:22, pId:2, name:"父节点22"},
            { id:221, pId:22, name:"叶子节点221"},
            { id:222, pId:22, name:"叶子节点222"},
            { id:223, pId:22, name:"叶子节点223"},
            { id:224, pId:22, name:"叶子节点224"},
            { id:23, pId:2, name:"父节点23"},
            { id:231, pId:23, name:"叶子节点231"},
            { id:232, pId:23, name:"叶子节点232"},
            { id:233, pId:23, name:"叶子节点233"},
            { id:234, pId:23, name:"叶子节点234"},
        ];

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    </SCRIPT>
</HEAD>

<BODY>
<div class="content_wrap">
    <div class="">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
</BODY>
</HTML>

记住引入metroStyle.css，还有metro的图片文件夹也引入，另外自己还自定义了一些样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ztree li.title {list-style: none;}
.ztree ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
.ztree ul.log {border: 1px solid #617775;background: #f0f6e4;width:300px;height:170px;overflow: hidden;}
.ztree ul.log.small {height:45px;}
.ztree ul.log li {color: #666666;list-style: none;padding-left: 10px;}
.ztree ul.log li.dark {background-color: #E3E3E3;}
ul.ztree li a {text-decoration: none; cursor: default;}
ul.ztree li a:hover {text-decoration: none; cursor: default;}
ul.ztree li a:active {text-decoration: none; cursor: default;}
ul.ztree li a:visited {text-decoration: none; color: #333; background-color: #fff}
ul.ztree li a.curSelectedNode { color: #333; opacity: 1; background-color: #fff;}
ul.ztree li span {cursor: default;}
ul.ztree li span.button.chk {cursor: default;}
ul.ztree li span.button {cursor: default}

API

zTree的API介绍也很详细，http://www.treejs.cn/v3/api.php

这里我弄两个最典型的来讲，一个是获取所有的选择节点，另一个是将所有选择的叶子节点id拿出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 通过id号来获取这个树
var treeObj2 = $.fn.zTree.getZTreeObj("treeDemo");
// 获取所有已经选择了的节点，获得一个node列表
var nodes2 = treeObj2.getCheckedNodes(true);
// 如果是叶子节点就把id拿出来
var idlist = [];
$.each(nodes2, function (i, item) {
    if (!item.isParent) {
        //alert(item.id + ","  + item.name);
        idlist.push(item.id);
    }
});
console.log(idlist);

使用很简单，如果有其他需求直接去参考官网API文档即可。

最后来张效果图: