javascript - Kendo UI Treeview 折叠所有项目并仅展开当前节点

Question

我有一个问题困扰了我一段时间。我的项目设置中有一个 Kendo UI Treeview ，如 http://demos.telerik.com/kendo-ui/web/treeview/events.html 中所述.

我需要实现的是说当我在 Treeview 上展开一个节点时，不在该分支中的所有其他节点都应该折叠并在该分支上展开。我曾尝试使用以下代码，但不幸的是它进入了无限循环。

<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 处理程序定义为:

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/