BootstrapBlazor-Table

原文地址： https://www.cnblogs.com/ysmc/p/16097712.html

官網地址：https://www.blazor.zone

項目於碼雲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> 8     [Display(Name = "姓名")]
    public string? Name { get; set; }

    /// <summary>
    ///
    /// </summary>15     [Display(Name = "日期")]
    public DateTime? DateTime { get; set; }

    /// <summary>
    ///
    /// </summary>
    [Display(Name = "地址")]24     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）