jsTree节点展开/折叠


jsTree Node Expand/Collapse

今天早上，我遇到了出色的jstree jQuery UI插件。 一句话-太好了！ 它易于使用，易于样式设计，可按包装盒上的说明进行操作。 我还无法弄清的一件事是-在我的应用中，我想确保在任何给定时间仅扩展一个节点。 即，当用户单击+按钮并展开一个节点时，任何先前展开的节点都应以静默方式折叠。 我需要这样做的部分原因是为了防止较长的树形视图的容器div在溢出时创建难看的滚动条，并且还避免了用户的"选择过载"。

我想象有某种方法可以做到这一点，但是好的而简明的jstree文档并没有帮助我确定正确的方法。 我将不胜感激。

jsTree很棒，但是其文档却很密集。我最终弄清楚了，因此这里是任何遇到此线程的人的解决方案。

首先，您需要将open_node事件绑定到所讨论的树。遵循以下原则

1
2
$("tree").jstree({"themes":objTheme,"plugins":arrPlugins,"core":objCore}).
bind("open_node.jstree",function(event,data){closeOld(data)});

即您配置树视图实例，然后绑定open_node事件。在这里，我正在调用closeOld函数来完成我需要的工作-关闭可能打开的任何其他节点。功能像这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function closeOld(data)
{
    var nn = data.rslt.obj;
    var thisLvl = nn;
    var levels = new Array();
    var iex = 0;
    while (-1 != thisLvl)
    {
        levels.push(thisLvl);
        thisLvl = data.inst._get_parent(thisLvl);
        iex++;
    }

    if (0 < ignoreExp)
    {
        ignoreExp--;
        return;
    }

    $("#divElements").jstree("close_all");
    ignoreExp = iex;
    var len = levels.length - 1;
    for (var i=len;i >=0;i--) $('#divElements').jstree('open_node',levels[i]);
}

这将正确处理所有其他节点的折叠，而与刚刚展开的节点的嵌套级别无关。

所涉及步骤的简要说明

  • 首先，我们逐步返回树视图，直到到达顶级节点(在jstree中为-1)，以确保我们将阵列级过程中遇到的每个祖先节点记录下来
  • 接下来，我们折叠树视图中的所有节点
  • 现在，我们将重新展开关卡数组中的所有节点。同时，我们不希望此代码再次执行。为了阻止这种情况的发生，我们将全局ignoreEx变量设置为级别中的节点数
  • 最后，我们逐级遍历节点，并展开其中的每个节点

上面的答案将一次又一次地构造树。
以下代码将打开已打开的节点并将其折叠，并且不会再次构造树。

1
2
3
.bind("open_node.jstree",function(event,data){
        closeOld(data);
        });

和closeOld函数包含：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function closeOld(data)
{
    if($.inArray(data.node.id, myArray)==-1){
            myArray.push(data.node.id);
            if(myArray.length!=1){
                var arr =data.node.id+","+data.node.parents;
                var res = arr.split(",");
                var parentArray = new Array();
                var len = myArray.length-1;
                for (i = 0; i < res.length; i++) {
                    parentArray.push(res[i]);
                }
                for (var i=len;i >=0;i--){
                    var index = $.inArray(myArray[i], parentArray);
                if(index==-1){
                    if(data.node.id!=myArray[i]){
                    $('#jstree').jstree('close_node',myArray[i]);
                        delete myArray[i];
                    }
                }
                }
        }
    }

我仅通过使用事件" before_open"并关闭所有节点来实现，我的树只有一个级别，不知道那是否就是您所需要的。

1
2
3
$('#dtree').on('before_open.jstree', function(e, data){
    $("#dtree").jstree("close_all");
});

jstree 3.3.2的另一个示例。
它使用下划线lib，随时将解决方案调整为适用于jquery或vanillla js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function () {
    var tree = $('#tree');
    tree.on('before_open.jstree', function (e, data) {
        var remained_ids = _.union(data.node.id, data.node.parents);
        var $tree = $(this);
        _.each(
                $tree
                    .jstree()
                    .get_json($tree, {flat: true}),
                function (n) {
                    if (
                        n.state.opened &&
                        _.indexOf(remained_ids, n.id) == -1
                    ) {
                        grid.jstree('close_node', n.id);
                    }
                }
        );
    });
    tree.jstree();
});