Table 表格

用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

自定义列名

通过设置 Text 增加列头显示名称

Demo

表格组件 TableColumns 模板中的字段采用的是根据绑定模型的 DisplayName 标签值来自动显示的,如果要自定义显示名称请设置 Text 属性

Loading...

带选择列表格

通过设置 IsMultipleSelect=true 增加表格第一列为选择列

Demo
Loading...

带显示文字的选择列表格

通过设置 ShowCheckboxText=true 表格第一列显示文字为 选择

Demo
Loading...

选择框列

RowTemplate 内部组件 TableCell 设置 Checkbox 并设置相关数据绑定即可,本示例中通过数据绑定将选择框组件与值进行绑定

Demo
Loading...

自定义各列宽度

通过设置 TableColumn Width 属性,来控制列宽度,行内按钮操作列宽度由 ExtendButtonColumnWidth 属性控制

Demo

本例中继续上一个例子,实现了自定义四个功能按钮,并且扩展到行内,点击各个按钮时均有相对应的回调委托方法,TableToolbarButton 采用的是 Delegate 方式完成数据交换,点击工具栏按钮时设置 OnClickCallback 委托方法即可获取表内选中的行数据集合

Loading...

自定义列数据模板

自定义 TableColumn 列的 Template 模板来实现任意 UI

Demo

本例中列 DateTime 值根据 Complete 值是否为 true 显示不同颜色

本例中列 Complete 根据 Complete 值自定义显示为 Checkbox 组件

Template 模板自带 Context 相关联上下文,其值为 TableColumnContext 类型

  • Value 为当前绑定列的数据值
  • Row 为当前绑定列所在行的数据值
Loading...

自定义列数据格式

列绑定时通过指定 FormatString 或者 Formatter 回调委托来实现单元格数值格式化

Demo

本例中列 DateTime 值根据 FormatString 将值格式化为 yyyy-MM-dd 年月日格式

本例中列 Count 值根据 Formatter 将值格式化为 0.00 保留两位小数格式

Loading...

列数据对齐方式

列绑定时通过指定 Align 属性设置对齐方式

Demo

本例中列 DateTime 列设置为居中对齐 Alignment.Center

本例中列 Count 列设置为右侧对齐 Alignment.Right

Loading...

根据屏幕宽度自动显示/隐藏列

通过指定 ShownWithBreakPoint 属性设置在不同宽度下是否显示

Demo

ShownWithBreakPoint 枚举值为:

  • None 未设置均显示
  • Small 屏幕大于等于 576px 时显示
  • Medium 屏幕大于等于 768px 时显示
  • Large 屏幕大于等于 992px 时显示
  • ExtraLarge 屏幕大于等于 1200px 时显示

本例中列 Count 列设置为 BreakPoint.Large 即屏幕在大于 992px 时才显示

注意:

由于 Table 组件默认是支持移动端适配,所以小屏幕时采用的是卡片式模式,本例中显式设置使用 RenderModel="TableRenderModel.Table" 模式

Loading...

自定义显示/隐藏列

通过指定 ShowColumnList 属性设置列是否显示

Demo

ShowColumnList 默认值为 false,显式指定为 true 后工具栏出现相应列调整按钮

TableColumn 增加 Visiable 属性,其默认值为 true,显示设置为 false 时不显示此列

此例中 数量 列通过设置 Visible 未显示,可以通过列控制按钮进行显示设置

Loading...

允许列调整

通过指定 AllowResizing 设置表格列允许调整宽度

Demo
Loading...

自动生成列

通过指定 AutoGenerateColumns 属性值为 true,开启根据绑定模型自动生成列信息功能

Demo

本例中通过设置 AutoGenerateColumns 值为 true 开启自动生成列功能,默认绑定模型实体类所有属性全部生成,实体类可以通过 AutoGenerateColumnAttribute 标签类进行功能设置,如:

  • Ignore 表示忽略此属性,即不生成
  • Readonly 表示只读
  • 更多属性详见 源码
本例中通过 [AutoGenerateColumn(Order = 1, FormatString = "yyyy-MM-dd")] 标签格式化 日期 列;通过代码中设置模板列对 Complete 列进行自定义使用 Switch 组件进行渲染;通过 [AutoGenerateColumn(Order = 10)] 标签中的 Order 对显示顺序进行设定

Loading...
An error has occurred. This application may no longer respond until reloaded. Reload