如何使用Kendo UI Treeview仅显示父节点

How to only display parent nodes with Kendo UI Treeview

本文关键字：显示 父节点 Treeview UI 何使用 Kendo      更新时间：2023-09-26

我看过Treeview组件的文档，它似乎没有为我所需要的提供任何开箱即用的功能。

我有一棵树，例如看起来像这样：

根项目

  • 父项
    • 子项目
    • 子项目
    • 子项目
  • 父项
    • 子项目
  • 父项
    • 子项目
    • 子项目

"根项目"始终存在于树中。我希望能够折叠除"父项"之外的所有项，或者更准确地说，只在单击按钮时显示"父项"。

查看为树视图生成的HTML，似乎没有任何方法可以识别哪些项位于"父项"之下。

我目前有：

$("#collapse").click(function() {
    treeview.collapse(".k-item");
});

但是，这将折叠所有内容，包括"父项"。如何具体说明哪些项目被折叠？

您可以使用属性expanded:在dataSource中设置初始扩展项

$("#treeview").kendoTreeView({
    dataSource: [
        { text:'root', expanded:true, items:[
            {text:'parent', expanded:false, items:
            [
                {text:'child'}
            ]}
        ]}
    ]
});

或者你可以折叠所有节点，除了第一个这样：

treeview.collapse('.k-item:not(:first)');
相关文章：