Blazor TreeView是一个UI组件,允许您在WebAssembly (WASM)和服务器端Blazor应用程序中以树状结构表示平面和分层数据。它提供了多种内置功能,如导航项及其子项、按需加载数据、为各个节点定制模板和键盘导航。
移动节点用拖放的TreeView功能简化了组件的工作流程。该特性是通过Draggable参数启用的,该参数允许用户在TreeView内部或TreeView之间拖放节点。该特性使用OnDrop事件,该事件在节点被删除时被触发。
TreeView组件允许您为不同级别的节点额外定义不同的绑定设置。这提供了极大的灵活性,因为节点的子节点可以使用与其父节点不同的数据字段或模型。
TreeView组件通过它的模板让您完全控制节点的外观。您可以为所有TreeView节点定义一个公共模板,也可以为每个节点级别定义一个不同的模板。此外,模板还可以根据应用程序的逻辑来呈现特定的内容。您可以在其中使用组件,从而提供丰富的内容,而不是纯文本。
TreeView组件允许您一次获取所有项,或者在用户展开树节点时按需加载数据。对于需要加载大量数据的情况,可以通过使用延迟加载(按需加载数据)和只加载子项的扩展子集来提高性能。
OnItemClick事件作为用户单击TreeView中的项目的响应而触发,并为您提供了一种处理此交互以执行有意义的工作的方法—例如,您可能希望在单独的组件中显示关于所单击节点的详细信息。与OnItemClick事件类似,当用户在TreeView中修改选择时,SelectedItemsChanged被触发。以下是所有活动的列表:
为TreeView的每一行添加一个复选框,以便用户选择多个项目,甚至整个项目层次结构,以便对它们执行单个操作。
在这个演示中探索Blazor TreeView复选框
TreeView中的节点可以被选择,这样它们就可以以某种方式被处理——例如,在TreeView中选择一个显示文件和文件夹结构的项目可以在一个单独的组件中打开文件内容。
与Blazor组件的所有其他Telerik UI一样,TreeView组件支持开箱式键盘导航和web可访问性标准实现(WCAG, Section 508和WAI-ARIA屏幕阅读器属性)。这使得仅使用键盘就可以轻松地在树节点中导航,以及通过辅助技术访问组件内容。
您可以使用TreeView OnExpand事件轻松地处理代码中的用户操作。当用户展开或折叠节点(使用鼠标或键盘)时触发事件时,您可以轻松地将业务逻辑应用于这些操作。
OnExpand事件让你在用户扩展节点时可以灵活地使用懒加载TreeView数据。
Telerik Blazor TreeView有几个内置主题比如Default(我们自己的样式),Material(基于材质设计指南)和Bootstrap(看起来像Bootstrap样式以便更好地集成)。属性可以轻松地自定义任何开箱即用的主题,或者使用属性创建新的主题来匹配颜色和品牌Telerik SASS ThemeBuilder应用程序.