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内扩展，你将进入无限循环，因为在折叠其他节点之后，你想要扩展当前，这将触发对{{1的新调用}}

为了防止这种情况，您应该将OnExpand处理程序定义为：

OnExpand

这引入了一个名为function OnExpand(e) { if (kendoTreeView.collapsingOthers) { kendoTreeView.collapsingOthers = false; } else { kendoTreeView.collapse('.k-item'); kendoTreeView.collapsingOthers = true; kendoTreeView.expand(e.node); } }的新字段，它控制我是否正在折叠所有节点并以编程方式扩展当前节点。我利用JavaScript允许我动态扩展当前对象添加属性。

请在此处查看：http://jsfiddle.net/OnaBai/mVNw6/1/

Answer 2

从OnExpand处理程序调用expand将为您提供无限循环。

如果在添加崩溃行为后尝试让默认行为执行其余操作，该怎么办？

尝试这样的事情：

    $(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级到第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

我遇到了同样的问题，并且我使用了一些解决方案，因为有些解决了其他分支，但是如果我点击同一个树中更高的节点，我还想折叠到我当前选择的节点。已经扩大了。

对于这种行为，我在treeview defition上使用了expand和select函数：

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

Kendo UI Treeview会折叠所有项目，只展开当前节点

4 个答案: