Рекурсивная структура повторного дерева в Аурелии должна работать как аккордеон [Aurelia]

Question

Мне нужна структура дерева в Аурелии. У меня есть для этого какая-то ссылка. Он работает нормально. Но мое требование похоже на аккордеон с древовидной структурой. Значит, когда я нажимал на закрытого родителя, все открытые родители должны закрыть и щелкнуть, чтобы открыть его так же, как бутстрап-аккордеон. то же самое должно произойти Когда когда-либо я нажал на дочерний родительский элемент с родительским повторением.

Ниже представлено мое изображение для древовидной структуры.

Gist запустить Ссылка: Gist

выше суть только структура дерева с открытыми и коллапсом. Из этого, когда я щелкнул на закрытом узле дерева, который должен открыть, а оставшиеся узлы дерева должны быть закрыты.

В приведенном выше примере «node-model.js» имеет события для открытия и закрытия. Поэтому, когда я нажимал на значок, событие clicked внутри этой переменной получает только щелкнутый узел. Как я могу скрыть другой узел в этом методе.

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