用于Blazor TreeList组件的Telerik UI是一个数据容器元素，在许多方面类似于Grid。与Grid不同的是，它以层次结构存储和显示项目列表。当你想要结合Grid的干净和可访问的UI时，它被设计用来添加一些额外的信息——即列表中项目之间的关系。例子包括:

• 列出相同组织层次结构的所有员工——每个员工都有姓名、头衔、位置、薪水等，但可以方便地显示经理，方法是让他们的行包含他们的团队成员。
• 列出一个大品牌的所有地点-地点可能按其原产国分组

查看Blazor TreeList演示

为TreeList组件提供数据可以通过以下两种方式完成:

• 一个树状结构，包含所有嵌套项作为父项的子项(例如，你的Employee类将有一个children数组)或
• 传递一个包含所有需要显示的项的平面列表，并用额外的标识符标记需要嵌套的项(例如，您的Employee类将有一个ParentId)。

数据绑定整个列表数据使使用变得简单，并允许您将注意力集中在其他更重要的事情上——比如，如果您希望按需加载数据，我们也支持这一点。

了解有关Blazor TreeList数据绑定的更多信息我们的文档．

要很好地利用这个组件，需要它非常灵活，以便在所有情况下都能发挥作用。因此，用于Blazor TreeList的Telerik UI的列可以是:

• 重新排序和调整大小
• 冰冻，所以它们总是在视线范围内
• 虚拟化，因此组件不会呈现当前在屏幕上不可见的列
• 从您的模型自动生成，因此您甚至不需要指定它们
• 可以显示命令而不是数据(例如，启动编辑、提交或其他数据操作的按钮)

探索树列表列特性

TreeList实现了专用的CRUD事件，使编辑变得容易。它还支持类似excel的编辑，大大减少了击键的次数——按回车键将存储当前单元格的值，移动到列中的下一个单元格，并自动选择其内容，以便下一次击键将覆盖它。事件的完整列表太大了，无法一一列出，但足以说明我们已经涵盖了所有内容在文档．有3种不同的编辑模式:

• 内联编辑让用户直接修改任何给定的条目和所有

  其列。这种编辑模式是快速访问和允许用户更改一切之间的一个很好的组合。该模式允许编辑、保存和删除项目，如果用户单击删除按钮，将显示一个删除确认弹出窗口，需要用户确认或取消操作。
• 弹出编辑使组件显示一个弹出窗口，其中显示当前条目的所有值，就像表单一样。这种编辑模式为用户提供了对所更改内容的最大控制和可见性。
• InCell编辑允许用户单击单元格并立即输入新值。这是用户最简单的编辑模式。

所有3种编辑模式都支持与Telerik UI的内置集成，用于Blazor的表单验证。

编辑过的单元格总是可见和选中的，因此用户总是可以看到他们正在修改的内容。

你可以自定义Blazor树列表的内置过滤使用DefaultFilterOperator和ShowFilterCellButtons参数。它们允许您设置默认的筛选操作符，并控制筛选器下拉菜单和清除按钮是否可见。

让用户使用树列表搜索框找到他们要查找的数据。启用此功能将添加一个文本框，可以在其中键入文本，树列表将过滤掉与文本不匹配的记录。搜索框还设有一个小X按钮，可以轻松清除其内容，也可以通过编程触发。

尝试树列表搜索框

Blazor TreeList组件在专用的TreeListPopupEditSettings标签中为其弹出编辑器公开了多个设置。你可以设置(最大)宽度，(最大)高度，CSS。此外，我们提供了treelistpopupedformsettings标记，它允许您通过buttonlayout配置表单的方向(水平或垂直)、表单的列和列间距布局参数，以及表单中按钮的水平对齐方式。

您可以自定义在Blazor TreeList FilterRow、FilterMenu和ColumnMenu中呈现的筛选编辑器。使用TreeListColumn标记中的FilterEditorType参数，您可以轻松地设置它并呈现DateTime选择器而不是默认的日期选择器，或者使用TextArea而不是默认的文本框。

了解如何更改Blazor树列表中的默认行筛选器编辑器。

Blazor TreeList组件公开了一个EditorType参数，该参数提供了一种不使用模板就可以更改默认字段编辑器的简单方法。为此，只需在TreeListColumn标记中提供首选的编辑器。您可以灵活选择DateTime类型的DatePicker或DateTimePicker，字符串字段的TextBox或TextArea，布尔值的Checkbox或Switch。

了解如何更改Blazor树列表中的默认字段编辑器。

使用TreeList列可见属性以编程方式控制哪些Grid列可见。当一个列需要始终保持隐藏时，您可以直接设置列属性可见为假。然而，当你需要提供有条件的可见性时(例如，隐藏当前不感兴趣的数据)，你也可以动态地管理列的可见性。

默认情况下，TreeList只允许在排序时使用单个条件。当启用此选项时，用户可以选择对一列进行更好的排序，然后对另一列进行排序，并将这两种排序标准应用于数据(按照指定的顺序)。

查看Blazor树列表排序演示

现在可以通过拖放轻松地对TreeList中的行进行重新排序。您只需要启用指定的属性，TreeList将自动完成其他所有工作。

TreeList可以与用于Blazor MediaQuery组件的Telerik UI结合使用，使其更加灵活。根据设备的属性，如分辨率、方向和颜色系统，你可以隐藏不必要的列。

的FilterEditorFormat参数的Blazor TreeList组件允许控制默认过滤器的格式。这样，您就可以在列显示和筛选器编辑器中对齐值的格式。

可以自动调整列的大小，使它们的宽度等于列中最宽单元格的宽度，类似于MS Excel和其他电子表格的操作方式。

在许多场景中，表将包含表示整体的几个部分的列。例如，您可能有一个First和Last name列，这两个列都存储有关人名的信息。在这些情况下，TreeList组件提供多列标头，以帮助您可视化地表示这些列之间的关系。

TreeList还提供了一个工具栏，您可以向其添加不绑定到给定行的操作。有一个内置命令- Add。自定义命令可以声明式地添加-您只需要指定名称，一个可选图标和一个函数，当相应的按钮被按下时调用。

Blazor树列表具有一个无数据模板，它允许您定义在组件没有数据显示的情况下呈现的自定义内容。模板将覆盖“No Data”文本并显示您所提供的内容。

用于Blazor TreeList控件的Telerik UI与模板一起工作，允许您覆盖其所有组件的视觉效果——从单元格、列和行的外观，到列标题，甚至为编辑模式指定自定义编辑器或为过滤指定自定义UI !

通过多复选框过滤器，用户可以通过Blazor TreeList多复选框过滤器的选定值轻松筛选数据。这种类型的过滤器功能类似于Microsoft Excel过滤，有许多应用程序—从查找员工的所有销售额到查找给定类别中的所有库存项目。

您可以使用每个标记中的FilterOperators参数自定义Blazor TreeList组件的筛选操作符列表。该功能可以无缝地工作在过滤器菜单和过滤器行模式。

Blazor TreeList 's的Telerik UIOnCellRender事件在呈现TreeList列时触发。对列中的每个单元格调用事件处理程序，该事件处理程序接收有关使用给定单元格的项目的数据。这是根据数据中的某些条件修改单元格的CSS类的最佳位置。

查看Blazor树列表格式的演示

当Grid的某些行被渲染时，OnRowRender事件被触发。对于集合中的每个项调用一次。项目本身被传递给事件处理程序。该方法用于有条件地格式化不同的行(例如，在每一行中包含一个特定的子字符串)。

通过指定显示格式，提高树列表中所有值的可读性。显示格式控制数据应该如何显示—例如，是将日期打印为dd-mm-yy还是yyyy -mm- dd。要指定显示格式，可以直接在UI中对TreeListColumn标记进行设置，或者通过模型的数据成员上的属性添加它。

默认情况下，TreeList中的数据是不可选择的，但是您可以将其更改为允许单行或多行选择。选择就像你期望的那样工作-使用Ctrl或Shift来扩展或减少选择。选中的行可以通过属性以编程方式访问，因此您只能在这些行上执行命令。通过多重选择，还可以让树列表自动选择所选行的子行。通过单击行来选择行，或添加一个复选框进行选择，以保留单元格编辑的单击交互。

如果没有一些结构，大型数据集很难阅读和理解。这就是为什么分页等功能对于用户理解列表包含的模式和隐藏信息至关重要。

可以通过三种不同的方式定制TreeList分页器:

了解关于树列表分页的更多信息

针对大量数据的用户交互的第三个支柱是排序。与筛选类似，用于排序的UI交互是在组件中构建的——单击列的标题将根据其中的值对所有条目进行排序。可以有选择地在没有意义的列上禁用排序。

过滤是用户理解数据结构的另一个关键特性。在TreeList中的任何列上都支持过滤，并且是开箱即用的。组件将检查列中的数据类型，以便决定需要哪种类型的过滤。例如，如果值是数字，过滤器将建议“等于”或“大于”这样的谓词。

支持两种过滤UI模式:

• 过滤行显示列标题和列值之间的筛选选项。
• 过滤器菜单在每个列上添加一个按钮。单击该按钮时，将显示针对当前列的许多筛选选项。

过滤行是更容易和更快的使用，而过滤菜单有更强大的选项。由您来决定应该向用户呈现哪一个。

查看Telerik UI为Blazor树列表过滤菜单

树列表为终端用户提供了许多可配置的元素，例如当前应用的过滤和排序规则。可配置元素的集合是TreeList的状态．该组件允许开发人员以编程方式保存、加载和更改当前状态。这意味着您可以确保终端用户总是从他们最后一次使用您的应用程序时的相同位置开始。

了解关于树列表持久状态的更多信息

要对Blazor树列表标题单元格应用自定义，可以利用TreeListColumn标记中公开的HeaderClass参数，并为列的标题单元格定义自定义CSS类。

Blazor TreeList组件公开了多个事件，允许您处理编程逻辑。这包括数据管理事件，如OnCreate, OnUpdate和OnDelete，可见性事件，如OnExpand和OnCollapse，动作事件，如OnRowClick, OnRowDoubleClick, OnRowContextMenu，和更多。

事件的完整列表和关于它们被触发的条件的详细信息都在这里在Blazor树列表文档中．

TreeList列提供了一种通过TextAlign参数指定内容水平对齐的方法。您可以轻松地将数字向右对齐，将文本向左对齐，从而在项目中实现经典的对齐标准。或者如果你喜欢，你可以在单元格中居中文本。

探索不同的格式化选项

Telerik Blazor TreeList组件有几个内置主题比如Default(我们自己的样式)，Material(基于材质设计指导方针)和Bootstrap(看起来像Bootstrap样式以便更好地集成)。你可以很容易地定制任何开箱即用的主题，样式化一个特定的组件实例或创建新的主题来匹配您的颜色和品牌使用Telerik SASS ThemeBuilder应用程序．

使用TreeList组件，您可以根据行项的属性拥有条件命令按钮。这是通过将当前行项作为上下文(类型为对象)添加到当前ChildContent参数来实现的。

TreeList组件支持大量的键盘快捷键，允许用户完成通常使用鼠标完成的所有操作，包括导航TreeList的项、选择和编辑它们。

键盘导航现在可以与TreeList组件中的虚拟列一起使用。可在虚拟化和非虚拟化场景中使用的快捷方式有几个不同之处。例如，对于不处于编辑模式的单元格，Home和End按钮会将焦点移动到虚拟列范围中的第一个或最后一个单元格。按Alt + Home/End键将导致焦点移动到一行中的第一个/最后一个单元格，也不在编辑模式中。如果启用了内联编辑模式，按F2将使行进入编辑模式，并且Tab将聚焦虚拟列范围中的下一个可聚焦元素。