BootstrapBlazor-Table
2022-04-03 22:55
1091 查看
原文地址: https://www.cnblogs.com/ysmc/p/16097712.html
项目于码云Gitee上开源,传送门
Table 表格
用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
Table组件已经支持移动端适配,当屏幕小于
RenderModelResponsiveWidth设定值时,组件渲染成卡片式方便查看数据,其默认值为
768
Table组件有一个
RenderModel属性,其默认值为
Auto其他值定义如下
Auto
: 当屏幕小于 768px 时使用CardView
模式,否则使用Table
模式Table
: 表格渲染模式,使用table
元素进行数据渲染,适合宽屏幕下查看数据CardView
:卡片式渲染模式,使用div
元素进行数据渲染,适合窄屏幕下查看数据
Table组件有一个
UseComponentWidth属性,其默认值为
false,表示使用
window宽度来进行判断,当设置值为
true时,表示使用组件自身宽度进行判断
示例:
TableDemo.razor
<Table TItem="Demo" Items="@Items.Take(3)"> <TableColumns> <TableColumn @bind-Field="@context.DateTime" Width="180" /> <TableColumn @bind-Field="@context.Name" /> <TableColumn @bind-Field="@context.Address" /> </TableColumns> </Table>
Demo.cs
public class Demo { /// <summary> /// /// </summary> [Display(Name = "姓名")] public string? Name { get; set; } /// <summary> /// /// </summary> [Display(Name = "日期")] public DateTime? DateTime { get; set; } /// <summary> /// /// </summary> [Display(Name = "地址")] public string? Address { get; set; } }
展示效果
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<TItem> | — | — |
PageItemsSource | IsPagination=true 设置每页显示数据数量的外部数据源 | IEnumerable<int> | — | — |
EditMode | 设置编辑行数据模式 | EditMode | Popup|Inline|InCell | Popup |
MultiHeaderTemplate | 表头分组模板 | RenderFragment | — | — |
TableFooter | Table Footer 模板 | RenderFragment | — | — |
TableToolbarTemplate | 自定义按钮模板 | RenderFragment | — | — |
EditTemplate | 编辑弹窗模板 | RenderFragment<TItem?> | — | — |
SearchTemplate | 高级搜索模板 | RenderFragment<TItem> | — | — |
BeforeRowButtonTemplate | Table 行按钮模板 放置到按钮前 | RenderFragment<TItem> | — | — |
RowButtonTemplate | Table 行按钮模板 默认放置到按钮后 | RenderFragment<TItem> | — | — |
DetailRowTemplate | Table 明细行模板 | RenderFragment<TItem> | — | — |
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<QueryPageOptions, Task<QueryData<TItem>>> | — | — |
OnAddAsync | 新建按钮回调方法 | Func<Task<TItem>> | — | — |
OnColumnCreating | 列创建时回调委托方法 | Func<List<ITableColumn>,Task> | — | — |
OnDoubleClickCellCallback | 设置单元格双击事件 | Func<string, object, object?, Task> | — | — |
OnDeleteAsync | 删除按钮异步回调方法 | Func<IEnumerable<TItem>, Task<bool>> | — | — |
OnEditAsync | 编辑按钮异步回调方法 | Func<TItem, Task> | — | — |
OnSaveAsync | 保存按钮异步回调方法 | Func<TItem, Task> | — | — |
OnResetSearchAsync | 重置搜索按钮异步回调方法 | Func<TItem, Task> | — | — |
OnClickRowCallback | 点击行回调委托方法 | Func<TItem, Task> | — | — |
OnAfterSaveAsync | 保存数据后异步回调方法 | Func<TItem, Task> | — | — |
OnAfterRenderCallback | 表格渲染完毕后回调方法 | Func<Table<TItem>, Task> | — | — |
OnTreeExpand | 树形数据节点展开式回调委托方法 | Func<TItem, Task<IEnumerable<TItem>>> | — | — |
OnDoubleClickRowCallback | 双击行回调委托方法 | Func<TItem, Task> | — | — |
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<object> | — | — |
Filterable | 是否可过滤数据 | boolean | true|false | false |
IsReadonlyWhenAdd | 新建时此列只读 | boolean | true|false | false |
IsReadonlyWhenEdit | 编辑时此列只读 | boolean | true|false | false |
Lookup | 字典数据源 | IEnumerable<SelectedItem> | — | — |
LookUpServiceKey | LookupService 服务获取 Lookup 数据集合键值 | string | — | — |
Readonly | 编辑时是否只读模式 | boolean | true|false | false |
SearchTemplate | 模板 | RenderFragment<object> | — | — |
ShowTips | 显示单元格 Tooltips | boolean | true|false | false |
Sortable | 是否排序 | boolean | true|false | false |
Text | 表头显示文字 | string | — | — |
TextEllipsis | 是否文本超出时省略 | boolean | true|false | false |
Template | 模板 | RenderFragment<TableColumnContext<object, TItem>> | — | — |
Visible | 是否显示此列 | boolean | true|false | true |
Width | 列宽度(像素px) | int | — | — |
写在最后
希望大佬们看到这篇文章,能给项目点个star支持下,感谢各位!
star流程:
1、访问点击项目链接:BootstrapBlazor
2、点击star,如下图,即可完成star,关注项目不迷路:
另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:
BootstrapAdmin 项目地址:
https://gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 项目地址:
https://gitee.com/LongbowEnterprise/SliderCaptcha
交流群(QQ)欢迎加群讨论
BA & Blazor ①(795206915) BA & Blazor ②(675147445)
相关文章推荐
- Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍
- Node.js中Bootstrap-table的两种分页的使用方法
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十二节--小结,Bootstrap Table之角色管理
- bootstrap table
- bootstrap-table(二)
- bootstrap table添加合计行
- Bootstrap-table 增删改查
- 关于bootstrap中table的表格固定列
- bootstrap-table 数据导出excel格式
- bootstrap -table
- bootstrap table关于排序列添加图标的方法--查漏补缺
- bootstrap-table数据循环以及分页
- bootstrap-table 怎么配置ajaxOptions
- bootstrap-table给每一行数据添加按钮,并绑定事件
- bootstrap-table相关参数的解释
- JS组件系列——表格组件神器:bootstrap table
- Bootstrap table右键功能的实现
- bootstrap锚点跳转滑动效果以及table固定列宽
- BootstrapBlazor 组件库使用体验---Table篇
- Bootstrap嵌入jqGrid,使你的table牛逼起来