Question

我需要在Aurelia有一些树形结构。我得到了一些链接。它工作正常。但我的要求就像手风琴树视图。意思是当我点击关闭的父母时，所有打开的父母应该关闭并单击一个应该打开与bootstrap手风琴相同。应该发生同样的事情当我点击父母重复的子父元素时。

下面是树形结构的图像。

Gist run Link： Gist

上面的要点只是树状结构，打开和折叠。从我点击关闭的树节点开始，应该打开，剩下的树节点应该关闭。

在上面的要点＆＃34; node-model.js＆＃34;有开放和关闭的事件。因此，当我点击图标时，此变量中的单击事件将仅获得单击的节点。如何让该方法中的其他节点隐藏。

Answer 1

<强>答案：

在tree-view.js内，添加以下代码（3种方法）：

  attached() {
    window.addEventListener('goCollapseAll', (e) => {
      this.closeOtherBranches(e.detail);
    }, false);
  }
  closeOtherBranches(exceptNode) {
    // traverse node tree to find current one
    var found = null;
    for(var i = 0; i < this.nodes.length; i++){
      if (this.subSearch(this.nodes[i], exceptNode)) { 
        found = i;
      }
    }
    if (found !== null) {
      for(var i = 0; i < this.nodes.length; i++){
        if ((i != found) && (this.nodes[i].expanded)) {
          this.nodes[i].toggleNode();
        }
      }
    }

  }
  subSearch(node, findNode) {
    // recursive search of tree for findNode
    var match = null;
    if (node === findNode) {
      match = node;
    } else {
      for(var i = 0; i < node.children.length; i++){
        if (node.children[i] === findNode) { 
          match = node;
        } else {
          match = this.subSearch(node.children[i], findNode);
        }
      }
    }
    return match;
  }

然后，在node-model.js内，在toggleNode()的开头添加以下行：

// close other node branches
if (!this.expanded) {
  var event = new CustomEvent('goCollapseAll', { 'detail': this });
  window.dispatchEvent(event);
}

<强>解释

当展开节点时，它会发布自定义事件以触发递归搜索，以关闭属于不同分支的所有节点。这不是最漂亮的解决方案，我认为如果你采用不同的树结构可能会有更简洁的方法，但这个解决方案肯定能很好地完成你的目的。

<强> GistRun：

我已更新您的GistRun以演示其功能。你可以在这里看到它：

https://gist.run/?id=828c3c79bff0dfbaffec3252ed376c8c

Aurelia中的递归重复树结构应该像手风琴一样工作[Aurelia]

1 个答案: