jsTree节点展开/折叠 [英] jsTree Node Expand/Collapse

问题描述

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

I ran into the excellent jstree jQuery UI plug in this morning. In a word - great! It is easy to use, easy to style & does what it says on the box. The one thing I have not yet been able to figure out is this - in my app I want to ensure that only one node is expanded at any given time. i.e. when the user clicks on the + button and expands a node, any previously expanded node should silently be collapsed. I need to do this in part to prevent the container div for a rather lengthy tree view from creating an ugly scrollbar on overflow and also to avoid "choice overload" for the user.

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

I imagine that there is some way of doing this but the good but rather terse jstree documentation has not helped me to identify the right way to do this. I would much appreciate any help.

推荐答案

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

jsTree is great but its documentation is rather dense. I eventually figured it out so here is the solution for anyone running into this thread.

首先，您需要将open_node事件绑定到所讨论的树.类似于

Firstly, you need to bind the open_node event to the tree in question. Something along the lines of

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

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

i.e. you configure the treeview instance and then bind the open_node event. Here I am calling the closeOld function to do the job I require - close any other node that might be open. The function goes like so

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

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

This will correctly handle the folding of all other nodes irrespective of the nesting level of the node that has just been expanded.

所涉及步骤的简要说明

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

• First we step back up the treeview until we reach a top level node (-1 in jstree speak) making sure that we record every ancestor node encountered in the process in the array levels
• Next we collapse all the nodes in the treeview
• We are now going to re-expand all of the nodees in the levels array. Whilst doing so we do not want this code to execute again. To stop that from happening we set the global ignoreEx variable to the number of nodes in levels
• Finally, we step through the nodes in levels and expand each one of them

这篇关于jsTree节点展开/折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！