Kendo UI Treeview摺疊所有項目，只展開當前節點

Question

我有一段時間以來一直困擾着我的情況。我在我的項目中設置了一個Kendo UI樹形視圖，如http://demos.telerik.com/kendo-ui/web/treeview/events.html所述。

我需要實現的是當我在樹狀視圖上展開一個節點時，不在此分支中的所有其他節點都應該摺疊並且在此分支上展開。我試過使用下面的代碼，但不幸的是它進入了一個無限循環。

<div id="example" class="k-content"> 
      <div id="treeview" class="demo-section" style="width: 200px"></div> 
      <div class="demo-section"> 
       <h3 class="title">Console log 
       </h3> 
       <div class="console"></div> 
      </div> 
<script type="text/javascript"> 

     $(document).ready(function() { 

        function onExpand(e) {       
         e.preventDefault(); 
         kendoTreeView.collapse('.k-item'); 
         kendoTreeView.expand(e.node);     
         } 

         $("#treeview").kendoTreeView({ 
          dataSource: [ 
           { text: "Furniture", expanded: true, items: [ 
            { text: "Tables & Chairs" }, 
            { text: "Sofas" }, 
            { text: "Occasional Furniture" } 
           ] }, 
           { text: "Decor", items: [ 
            { text: "Bed Linen" }, 
            { text: "Curtains & Blinds" }, 
            { text: "Carpets" } 
           ] }, 
           { text: "Storage" } 
          ], 
         expand:OnExpand 
         }); 
       }); 
</script> 

請幫忙。

謝謝

Answer 1

由於@Logard正確地指出，如果試圖擴大內需的OnExpand你將進入一個無限循環，因爲倒塌等之後節點，您想要擴展當前，這將觸發一個新的電話OnExpand。

爲了防止這種情況，你應該定義OnExpand處理程序爲：

function OnExpand(e) { 
    if (kendoTreeView.collapsingOthers) { 
     kendoTreeView.collapsingOthers = false; 
    } else { 
     kendoTreeView.collapse('.k-item'); 
     kendoTreeView.collapsingOthers = true; 
     kendoTreeView.expand(e.node); 
    } 
} 

這就引入了一個新的領域被稱爲collapsingOthers如果我崩潰的所有節點和程序擴展電流控制。我利用JavaScript可以讓我擴展當前對象動態添加屬性。

見這裏：http://jsfiddle.net/OnaBai/mVNw6/1/

Answer 2

從OnExpand處理函數調用展開會給你一個無限循環。

如果您在添加了摺疊行爲後嘗試讓默認行爲完成剩下的操作，該怎麼辦？

嘗試是這樣的：

$(document).ready(function() { 

       function onExpand(e) { 
        if($(".k-minus").length > 0){ 
        $("#treeview").data("kendoTreeView").collapse('.k-item'); 
        $("#treeview").data("kendoTreeView").expand(e) 
        } 
       } 

       $("#treeview").kendoTreeView({ 
        dataSource: [ 
         { text: "Furniture", expanded: true, items: [ 
          { text: "Tables & Chairs" }, 
          { text: "Sofas" }, 
          { text: "Occasional Furniture" } 
         ] }, 
         { text: "Decor", items: [ 
          { text: "Bed Linen" }, 
          { text: "Curtains & Blinds" }, 
          { text: "Carpets" } 
         ] }, 
         { text: "Storage" } 
        ], 
       expand:OnExpand 
       }); 
     }); 

希望這有助於:)

Answer 3

OnaBai的和Logard的解決方案將只爲2級節點的工作。

該解決方案將用於從第2級到第n級開始的所有內部級節點的工作：

expand: function (e) { 
    var expanded = $(".k-minus"); 
    var parents = $(e.node).parentsUntil(".k-group.k-treeview-lines"); 

    if (parents.length <= 0 && expanded.length > 0) { 
     this.collapse(".k-item"); 
     this.expand(e.node); 
    } 
} 

編輯：一是解決方案只會崩潰根元素，所以我想出了一個精確解：

expand: function (e) { 
    var items = $(this.element).find(".k-item:has(.k-minus)"); 
    var parents = $(e.node).parents(".k-item"); 
    var toCollapse = []; 

    items.each(function (index, item){ 
     if ($.grep(parents, function (el) { return $(el).data("uid") == $(item).data("uid") }).length <= 0) { 
      toCollapse.push(item); 
     } 
    }); 

    this.collapse(toCollapse); 
} 

Answer 4

我有同樣的問題，我用放在一起，因爲有些工作了關閉其他分支的幾個解決方案，但我也想瓦解了我的當前選擇的節點，如果我點擊了一個節點上上漲在已經擴展的同一棵樹中。

對於這種行爲我用兩個擴大和樹視圖defition選擇功能：

expand: function (e) { 
    var parents = $(e.node).parents('[data-expanded="true"]'); 
    //this line keeps the element you clicked on expanded as well 
    parents[parents.length] = $(e.node)[0]; 
    let allOpenAbove = $(".k-item").parents('[data-expanded="true"]'); 

    for (let i in allOpenAbove) { 
     for (let j in parents) { 
      if (allOpenAbove[i] === parents[j]) { 
       delete allOpenAbove[i]; 
      } 
     } 
    } 
    let toCollapse = []; 
    allOpenAbove.each((i, elem) => { 
     toCollapse.push(elem); 
    }); 
    this.collapse(toCollapse); 
}, 

select: function (e) { 
    let openUnderneath = $(e.node).find('[data-expanded="true"]'); 
    this.collapse(openUnderneath); 
}