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