锐客网

  1. 首页 > it技术 > >

BootstrapBlazor-Table

原文地址： https://www.cnblogs.com/ysmc/p/16097712.html
官网地址：https://www.blazor.zone
Table 表格 用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。 Table 组件已经支持移动端适配，当屏幕小于 RenderModelResponsiveWidth 设定值时，组件渲染成卡片式方便查看数据，其默认值为 768
Table 组件有一个 RenderModel 属性，其默认值为 Auto 其他值定义如下

  • Auto: 当屏幕小于 768px 时使用 CardView 模式，否则使用 Table 模式
  • Table: 表格渲染模式，使用 table 元素进行数据渲染，适合宽屏幕下查看数据
  • CardView：卡片式渲染模式，使用 div 元素进行数据渲染，适合窄屏幕下查看数据
Table 组件有一个 UseComponentWidth 属性，其默认值为 false，表示使用 window 宽度来进行判断，当设置值为 true 时，表示使用组件自身宽度进行判断
示例： TableDemo.razor
1 2 3 4 5 6 7

Demo.cs
1 public class Demo 2 { 3/// 4/// 5/// 8[Display(Name = "姓名")] 9public string? Name { get; set; } 10 11/// 12/// 13/// 15[Display(Name = "日期")] 16public DateTime? DateTime { get; set; } 17 18/// 19/// 20/// 21[Display(Name = "地址")]24public string? Address { get; set; } 25 }


展示效果
BootstrapBlazor-Table
文章图片

Attributes 属性
参数 说明 类型 可选值 默认值
TableSize 表格大小 TableSize Normal|Compact Normal
HeaderStyle 表格 Header 样式 TableHeaderStyle None|Light|Dark None
Height 固定表头 int — —
PageItems IsPagination=true 设置每页显示数据数量 int — —
AutoRefreshInterval 自动刷新时间间隔 int — 2000
ExtendButtonColumnWidth 行操作按钮列宽度 int — 130
RenderModelResponsiveWidth 组件布局模式自动切换阈值 int — 768
IndentSize 树状数据缩进宽度（像素px） int — 16
Items 数据集合 IEnumerable — —
PageItemsSource IsPagination=true 设置每页显示数据数量的外部数据源 IEnumerable — —
EditMode 设置编辑行数据模式 EditMode Popup|Inline|InCell Popup
MultiHeaderTemplate 表头分组模板 RenderFragment — —
TableFooter Table Footer 模板 RenderFragment — —
TableToolbarTemplate 自定义按钮模板 RenderFragment — —
EditTemplate 编辑弹窗模板 RenderFragment — —
SearchTemplate 高级搜索模板 RenderFragment — —
BeforeRowButtonTemplate Table 行按钮模板 放置到按钮前 RenderFragment — —
RowButtonTemplate Table 行按钮模板 默认放置到按钮后 RenderFragment — —
DetailRowTemplate Table 明细行模板 RenderFragment — —
IsBordered 边框 boolean true / false —
IsPagination 显示分页 boolean true / false —
IsStriped 斑马纹 boolean true / false —
IsRendered 组件是否渲染完毕 boolean true / false false
IsMultipleSelect 是否为多选模式，为 true 时第一列自动为复选框列 boolean true / false false
IsAutoRefresh 是否自动刷新表格 boolean true / false false
IsTree 是否为树形数据 boolean true / false false
IsDetails 是否为明细行表格，未设置时使用 DetailRowTemplate 进行逻辑判断 boolean true / false / null null
IsHideFooterWhenNoData 无数据时是否显示 Footer boolean true / false false
ClickToSelect 点击行即选中本行 boolean true|false false
ShowCheckboxText 显示文字的选择列 boolean true / false —
ShowFooter 是否显示表脚 boolean true / false false
ShowFilterHeader 是否显示过滤行 boolean true / false false
ShowMultiFilterHeader 是否显示多级表头的过滤行 boolean true / false false
ShowSearch 显示搜索栏 boolean true / false false
ShowSearchText 显示搜索文本框 boolean true / false false
ShowResetButton 显示清空搜索按钮 boolean true / false true
ShowSearchButton 显示搜索按钮 boolean true / false true
ShowSearchButton 显示搜索按钮 boolean true / false true
SearchMode 搜索栏渲染方式 SearchMode Popup / Top Popup
ShowToolbar 显示 Toolbar boolean true / false false
ShowLineNo 显示 行号 boolean true / false false
ShowDefaultButtons 显示默认按钮 增加编辑删除 boolean true / false true
ShowAddButton 显示增加按钮 boolean true / false true
ShowEditButton 显示编辑按钮 boolean true / false true
ShowEditButtonCallback 显示行内编辑按钮，未设置时使用 ShowEditButton 值 boolean true / false true
ShowDeleteButton 显示删除按钮 boolean true / false true
ShowDeleteButtonCallback 显示行内删除按钮未设置时使用 ShowEditButton 值 boolean true / false true
ShowExtendButtons 显示行操作按钮 boolean true / false false
ShowSkeleton 加载时是否显示骨架屏 boolean true / false false
ShowColumnList 是否显示列显示/隐藏控制按钮 boolean true / false false
ShowEmpty 是否显示无数据提示 boolean true / false false
ShowToastAfterSaveOrDeleteModel 保存/删除失败后是否显示 Toast 提示框 boolean true / false true
TreeIcon 树形数据行小箭头 string — fa-caret-right
UseComponentWidth 组件渲染模式是否使用组件宽度来判断 boolean true|false false
ScrollingDialogContent 编辑弹窗框是否为内部出现滚动条 boolean true / false true
FixedExtendButtonsColumn 是否固定扩展按钮列 boolean true / false false
OnQueryAsync 异步查询回调方法 Func>> — —
OnAddAsync 新建按钮回调方法 Func> — —
OnColumnCreating 列创建时回调委托方法 Func,Task> — —
OnDoubleClickCellCallback 设置单元格双击事件 Func — —
OnDeleteAsync 删除按钮异步回调方法 Func, Task> — —
OnEditAsync 编辑按钮异步回调方法 Func — —
OnSaveAsync 保存按钮异步回调方法 Func — —
OnResetSearchAsync 重置搜索按钮异步回调方法 Func — —
OnClickRowCallback 点击行回调委托方法 Func — —
OnAfterSaveAsync 保存数据后异步回调方法 Func — —
OnAfterRenderCallback 表格渲染完毕后回调方法 Func, Task> — —
OnTreeExpand 树形数据节点展开式回调委托方法 Func>> — —
OnDoubleClickRowCallback 双击行回调委托方法 Func — —
SortIcon 排序默认图标 string — fa fa-sort
SortIconAsc 排序升序图标 string — fa fa-sort-asc
SortIconDesc 排序降序图标 string — fa fa-sort-desc
EditDialogSaveButtonText 编辑弹窗中保存按钮文字 string — —
EditDialogIsDraggable 编辑弹窗是否可拖拽 bool true|false false
EditDialogShowMaximizeButton 编辑弹窗是否显示最大化按钮 bool true|false true
EditDialogSize 编辑弹窗大小 Size — Large
SearchDialogIsDraggable 搜索弹窗是否可拖拽 bool true|false false
SearchDialogShowMaximizeButton 搜索弹窗是否显示最大化按钮 bool true|false true
SearchDialogSize 搜索弹窗大小 Size — Large
AddModalTitle 新建数据弹窗 Title string — —
EditModalTitle 编辑数据弹窗 Title string — —
UnsetText 未设置排序时 tooltip 显示文字 string — 点击升序
SortAscText 升序排序时 tooltip 显示文字 string — 点击降序
SortDescText 降序排序时 tooltip 显示文字 string — 取消排序
RenderMode Table 组件布局模式设置 TableRenderMode Auto|Table|CardView Auto
EmptyText 无数据时显示文本 string — —
EmptyImage 无数据时显示图片链接地址 string — —
EmptyTemplate 无数据时显示模板 RenderFragment — —
EditDialogItemsPerRow 每行显示组件数量 int? — —
EditDialogRowType 设置组件布局方式 RowType Row|Inline Row
EditDialogLabelAlign Inline 布局模式下标签对齐方式 Alignment None|Left|Center|Right None
Methods 方法
参数 说明 参数 返回值
AddAsync 手工添加数据方法 — Task
EditAsync 手工编辑数据方法 — —
QueryAsync 手工查询数据方法 — Task
TableColumn 属性
参数 说明 类型 可选值 默认值
TextWrap 是否允许换行 boolean true|false false
AutoGenerateColumns 是否自动生成列 boolean true|false false
CssClass 自定义单元格样式 string — —
Editable 是否生成编辑组件 boolean true|false true
EditTemplate 模板 RenderFragment — —
Filterable 是否可过滤数据 boolean true|false false
IsReadonlyWhenAdd 新建时此列只读 boolean true|false false
IsReadonlyWhenEdit 编辑时此列只读 boolean true|false false
Lookup 字典数据源 IEnumerable — —
LookUpServiceKey LookupService 服务获取 Lookup 数据集合键值 string — —
Readonly 编辑时是否只读模式 boolean true|false false
SearchTemplate 模板 RenderFragment — —
ShowTips 显示单元格 Tooltips boolean true|false false
Sortable 是否排序 boolean true|false false
Text 表头显示文字 string — —
TextEllipsis 是否文本超出时省略 boolean true|false false
Template 模板 RenderFragment> — —
Visible 是否显示此列 boolean true|false true
Width 列宽度（像素px） int — —
写在最后
希望大佬们看到这篇文章，能给项目点个star支持下，感谢各位！
star流程：
1、访问点击项目链接：BootstrapBlazor
2、点击star，如下图，即可完成star，关注项目不迷路：
BootstrapBlazor-Table
文章图片


另外还有两个GVP项目，大佬们方便的话也点下star呗，非常感谢：
BootstrapAdmin 项目地址：
https://gitee.com/LongbowEnterprise/BootstrapAdmin

SliderCaptcha 项目地址：
https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群（QQ）欢迎加群讨论
BA & Blazor ①（795206915）BA & Blazor ②（675147445）
BootstrapBlazor-Table
文章图片
BootstrapBlazor-Table
文章图片




【BootstrapBlazor-Table】

    推荐阅读


    上一篇：Vulnhub|Vulnhub 之 Earth

    下一篇：js封装html事件绑定通用类