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

如何简单构建一个树？

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
<html>
<head>
    <meta charset="UTF-8">
    <title>zTree Test</title>

    <!-- jQuery -->
    <script src="../bower_components/jquery/dist/jquery.js"></script>

    <!-- zTree -->
    <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../bower_components/zTree/js/jquery.ztree.core.js"></script>
</head>
<body>
    <!-- 容器的id会被作为treeId -->
    <ul id="treeDemo" class="ztree"></ul>

    <script>
        var zTreeObj;
        // zTree 的参数配置
        var setting = {};
        // zTree 的初始节点数据
        var zNodes = [
            {
                name: "test1", open: true, children: [
                    { name: "test1_1" }, { name: "test1_2" }]
            },
            {
                name: "test2", open: true, children: [
                    { name: "test2_1" }, { name: "test2_2" }]
            }
        ];
        $(document).ready(function () {
            // 调用$.fn.zTree.init()方法构造树
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    </script>
</body>
</html>

效果：

$.fn.zTree.init()是否可以多次调用？

可以。因为在init方法中会对容器做清理和事件解绑操作。

如何获得一个树的数据？

zTreeObj.getNodes()方法可以获取所有节点：

可以看出节点是对传入的节点数据做了拷贝和扩展的。

获取数据是否有开销？

1
2
3
zTreeObj.getNodes: function (setting) {
    return data.nodeChildren(setting, data.getRoot(setting));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 从缓存中拿root节点
data.getRoot: function (setting) {
    return setting ? roots[setting.treeId] : null;
}

// 从节点中直接返回子节点数组
data.nodeChildren: function (setting, node, newChildren) {
    if (!node) {
        return null;
    }
    var key = setting.data.key.children;
    if (typeof newChildren !== 'undefined') {
        node[key] = newChildren;
    }
    return node[key];
}

从代码中可以可以看出，获取节点数据是直接返回内部维护的数据，所以基本无开销。

“zTree内部的数据对象”是什么意思

在zTree的文档中，很多地方会看到“请务必保证此节点数据对象 是 zTree 内部的数据对象”这种描述，比如要更新一个节点，那么会要求指定的节点必须是内部数据对象。

这里的内部数据对象是什么意思呢？

因为zTree对于传入的节点数据都会复制一份，所以用于新建传入的节点数据是没什么用的，zTree内部不会保存引用，所以也就无法判断这个到底是哪个节点。

然后zTree内部维护了一个树对应的数据结构，是在传入的节点数据上做了扩展的对象。我们在getNodes系列函数中可以得到这些节点，然后就可以对这些节点进行操作。

所以文档要强调是“内部”数据结构。

这种设计是一种设计风格。另外的设计风格是在使用外部传入的对象，那么会带来很多的复杂性。因为外部对于对象的修改是不可控的，那么内部维持这个更新就非常麻烦了。

如何添加一个树节点？

zTreeObj.addNodes(parentNode, [index], newNodes, isSilent)

  • parentNode 在哪个父节点下添加。如果要添加顶级节点，传null。
  • index 添加的位置，0为第一个，-1为最后一个（可选）
  • newNodes 新添加的节点数据，传入后会被拷贝
  • isSilent 是否静默添加节点，如果为true，不会展开节点。默认为false（可选）

如何更新一个树节点？

更新节点是一个比较泛的操作。

  • 更新节点的名称
  • 更新节点图标
  • 关闭/打开节点
  • 向节点插入/删除子元素

更新节点名称/图标等

zTreeObj.updateNode(treeNode, checkTypeFlag)

  1. 可针对 name、target、 url、icon、 iconSkin、checked、nocheck 等这几个用于显示效果的参数进行更新，其他用于 zTreeNodes 的参数请不要随意更新，对于展开节点，还请调用 expandNode方法，因此请勿随意修改 open 属性。
  2. 用此方法修改 checked 勾选状态不会触发 beforeCheck / onCheck 事件回调函数。

打开关闭节点

zTreeObj.expandNode(treeNode, [expandFlag], [sonSign], [focus], [callbackFlag])

  • treeNode 需要打开关闭的节点
  • expandFlag true展开节点，false折叠节点（可选，不传则根据当前状态）
  • sonSign 是否对子孙节点进行expandFlag的操作（可选，默认false）
  • focus 是否通过设置焦点保证此焦点进入可视区域内（可选，默认true）
  • callbackFlag true 表示执行此方法时触发 beforeExpand / onExpand 或 beforeCollapse / onCollapse 事件回调函数（可选，默认false）
  • 返回值：表示最终实际操作情况，true：展开，false：折叠，null：不是父节点

zTreeObj.expandAll(expandFlag)

此方法不会触发 beforeExpand / onExpand 和 beforeCollapse / onCollapse 事件回调函数。

向节点插入/删除子元素

添加/插入节点：zTreeObj.addNodes(parentNode, [index], newNodes, isSilent)

删除节点：zTreeObj.removeNode(treeNode, callbackFlag)

清空子节点：zTreeObj.removeChildNodes(parentNode)

如何获取选中的节点？

获取选中的节点：zTreeObj.getSelectedNodes()

  • 如果没有选中节点，返回空数组。如果选中多个节点，按照选中的顺序返回。

选中节点：zTreeObj.selectNode(treeNode, [addFlag], [isSilent])

  • treeNode 需要被选中的节点
  • addFlag 是否添加选中到已有的选中数组中（可选，默认false）
  • isSilent false表示会让选中的节点滚动到视野中（可选，默认false）

取消选中的节点：zTreeObj.cancelSelectedNode(treeNode)

  • treeNode 如果省略此参数，则将取消全部被选中节点的选中状态。

树在DOM上是如何组织的？

根节点

  1. dom元素是ul
  2. id属性会被作为treeId，可以通过setting.treeId访问到
  3. class属性用于样式，默认的样式表假设的class为ztree

子节点：

  1. dom元素是li
  2. 有三个子元素：折叠开关（span），图标和标题（a），子树（ul）

新建树的流程是如何的？

初始化zTree的方法：$.fn.zTree.init(obj, zSetting, zNodes)

参数说明：

  • obj 树DOM容器，比如$("#treeDemo")
  • zSetting zTree配置数据
  • zNodes zTree节点数据，可以是Array/Object

返回值：zTree对象，对象上有setting对象和有操作树的方法。

init方法代码分析：

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
init: function(obj, zSetting, zNodes) {
    // 复制默认配置并合并用户配置到默认配置
    var setting = tools.clone(_setting);
    $.extend(true, setting, zSetting);

    // DOM容器的id属性作为treeId
    setting.treeId = obj.attr("id");

    // 清空DOM容器
    setting.treeObj = obj;
    setting.treeObj.empty();

    // settings是zTree的全局缓存，保存所有实例的setting
    settings[setting.treeId] = setting;

    // 初始化root节点
    data.initRoot(setting);
    var root = data.getRoot(setting),

    // 复制外部传入的初始节点数据，并且规整为Array
    childKey = setting.data.key.children;
    zNodes = zNodes ? tools.clone(tools.isArray(zNodes)? zNodes : [zNodes]) : [];

    // 把子节点设置到root节点上
    if (setting.data.simpleData.enable) {
        root[childKey] = data.transformTozTreeFormat(setting, zNodes);
    } else {
        root[childKey] = zNodes;
    }

    data.initCache(setting);

    // 清空事件绑定，再进行事件绑定
    event.unbindTree(setting);
    event.bindTree(setting);

    // ？
    event.unbindEvent(setting);
    event.bindEvent(setting);

    // zTree实例对象，最后返回的对象
    var zTreeTools = {
        setting : setting,
        addNodes : function(parentNode, newNodes, isSilent) {
        // ...
        // 其他方法
    }
    root.treeTools = zTreeTools;
    data.setZTreeTools(setting, zTreeTools);

    // 新建子节点
    // 从这里可以看出，如果传入了初始节点数据，那么就无法使用async加载节点
    if (root[childKey] && root[childKey].length > 0) {
        view.createNodes(setting, 0, root[childKey]);
    } else if (setting.async.enable && setting.async.url && setting.async.url !== '') {
        view.asyncNode(setting);
    }
    return zTreeTools;
}

init中的逻辑只是新建了一个root节点，然后把传入的节点数据都放到这个root节点上。具体新建节点的逻辑在view.createNodes()这个内部方法中：

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
view.createNodes: function (setting, level, nodes, parentNode, index) {
    if (!nodes || nodes.length == 0) return;
    var root = data.getRoot(setting),
        openFlag = !parentNode || parentNode.open || !!$$(data.nodeChildren(setting, parentNode)[0], setting).get(0);
    root.createdNodes = [];

    // 通过view.appendNodes()方法得到需要新建node的HTML字符串数组
    var zTreeHtml = view.appendNodes(setting, level, nodes, parentNode, index, true, openFlag),
        parentObj, nextObj;

    // parentObj赋值为ul元素
    if (!parentNode) {
        parentObj = setting.treeObj;
    } else {
        var ulObj = $$(parentNode, consts.id.UL, setting);
        if (ulObj.get(0)) {
            parentObj = ulObj;
        }
    }
    if (parentObj) {
        if (index >= 0) {
            nextObj = parentObj.children()[index];
        }
        if (index >= 0 && nextObj) {
            // 把节点HTML插入到ul容器中index指定的位置
            $(nextObj).before(zTreeHtml.join(''));
        } else {
            // 把节点HTML追加到ul容器
            parentObj.append(zTreeHtml.join(''));
        }
    }

    view.createNodeCallback(setting);
}

可以看出关键代码在view.appendNodes()方法中，这个方法返回了节点的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
view.appendNodes: function (setting, level, nodes, parentNode, index, initFlag, openFlag) {
    if (!nodes) return [];
    var html = [];

    var tmpPNode = (parentNode) ? parentNode : data.getRoot(setting),
        tmpPChild = data.nodeChildren(setting, tmpPNode),
        isFirstNode, isLastNode;

    if (!tmpPChild || index >= tmpPChild.length - nodes.length) {
        index = -1;
    }

    for (var i = 0, l = nodes.length; i < l; i++) {
        var node = nodes[i];
        if (initFlag) {
            isFirstNode = ((index === 0 || tmpPChild.length == nodes.length) && (i == 0));
            isLastNode = (index < 0 && i == (nodes.length - 1));
            data.initNode(setting, level, node, parentNode, isFirstNode, isLastNode, openFlag);
            data.addNodeCache(setting, node);
        }
        var isParent = data.nodeIsParent(setting, node);

        // 如果新建的节点有子节点，则递归获取子节点HTML
        var childHtml = [];
        var children = data.nodeChildren(setting, node);
        if (children && children.length > 0) {
            //make child html first, because checkType
            childHtml = view.appendNodes(setting, level + 1, children, node, -1, initFlag, openFlag && node.open);
        }

        // 如果新建的节点所在的父节点是打开的，则需要渲染HTML
        if (openFlag) {
            view.makeDOMNodeMainBefore(html, setting, node);
            view.makeDOMNodeLine(html, setting, node);
            data.getBeforeA(setting, node, html);
            view.makeDOMNodeNameBefore(html, setting, node);
            data.getInnerBeforeA(setting, node, html);
            view.makeDOMNodeIcon(html, setting, node);
            data.getInnerAfterA(setting, node, html);
            view.makeDOMNodeNameAfter(html, setting, node);
            data.getAfterA(setting, node, html);
            if (isParent && node.open) {
                view.makeUlHtml(setting, node, html, childHtml.join(''));
            }
            view.makeDOMNodeMainAfter(html, setting, node);
            data.addCreatedNode(setting, node);
        }
    }
    return html;
}

zTree的新建View的模式是，一行一行的拼接HTML，然后放到数组中，等于是通过数组来解耦。。

好坏暂时无法评论。

传入的初始设置和数据，zTree是否会持有引用？

根据上文分析$.fn.zTree.init()，传入的设置和节点数据，zTree都会复制一份。

所以传入后修改这些对象是无意义的。也没必要继续持有这些对象的引用。

参考资料