jsTree节点展开/折叠

Dro*_*dOS 7 jstree

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

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

Dro*_*dOS 5

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

首先,您需要将open_node事件绑定到相关的树.有点像

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

即,您配置树视图实例,然后绑定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]);
}
Run Code Online (Sandbox Code Playgroud)

这将正确处理所有其他节点的折叠,而不管刚刚展开的节点的嵌套级别.

对所涉及步骤的简要说明

  • 首先,我们返回树视图,直到我们到达顶级节点(jstree发言中为-1),确保我们记录数组级别中进程中遇到的每个祖先节点
  • 接下来,我们将折叠树视图中的所有节点
  • 我们现在要重新扩展levels数组中的所有节点.虽然这样做,但我们不希望再次执行此代码.为了阻止这种情况发生,我们将全局ignoreEx变量设置为级别中的节点数
  • 最后,我们步中的节点层次,扩大他们中的每一个