Question

今天早上我遇到了优秀的jstree jQuery UI插件。总之 - 太棒了！它易于使用，易于风格和做它在盒子上说的话。我还没有想到的一点是 - 在我的应用程序中，我想确保在任何给定时间只扩展一个节点。即，当用户点击+按钮并展开节点时，任何先前展开的节点都应该静默地折叠。我需要做的部分是为了防止容器div在相当长的树视图中在溢出时创建一个丑陋的滚动条，并避免用户“选择重载”。

我想有一些方法可以做到这一点但是好的但相当简洁的jstree文档并没有帮助我找到正确的方法来做到这一点。我非常感谢任何帮助。

Answer 1

jsTree很棒，但它的文档相当密集。我最终想通了，所以这里是遇到这个线程的人的解决方案。

首先，您需要将open_node事件绑定到相关的树。

的内容

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

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

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 变量设置为级别中的节点数
最后，我们逐步浏览级别中的节点并展开其中的每个节点

Answer 2

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

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

和closeOld函数包含：

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];
                    }
                }
                }
        }
    }

Answer 3

jstree 3.3.2的另一个例子。它使用underscore lib，随意使解决方案适应jquery或vanillla js。

$(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();
});

Answer 4

我通过使用事件＆＃34; before_open＆＃34;来实现这一目标。并关闭所有节点，我的树只有一个级别，不知道那是不是你需要的。

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

jsTree节点展开/折叠

4 个答案: