orga0063
/
BootstrapAdmin
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Blazor 模式下增加固定表头属性

This commit is contained in:
Argo Zhang 2020-01-20 21:12:07 +08:00
parent e2cb79b4ec
commit acdf57a0f8
No known key found for this signature in database
GPG Key ID: 152E398953DDF19F
7 changed files with 155 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/admin/Bootstrap.Admin/Components/EditPageBase.cs
View File

@ -78,6 +78,12 @@ namespace Bootstrap.Admin.Components
[Parameter]
public RenderFragment<TItem>? EditTemplate { get; set; }
/// <summary>
/// 获得/设置 是否固定表头 默认为 false 不固定表头
/// </summary>
[Parameter]
public bool FixedHeader { get; set; }
/// <summary>
/// 获得/设置 Table 实例
/// </summary>

18
src/admin/Bootstrap.Admin/Components/TableBase.cs
View File

@ -60,6 +60,24 @@ namespace Bootstrap.Admin.Components
[Parameter]
public RenderFragment? TableFooter { get; set; }
/// <summary>
/// 获得/设置 是否固定表头 默认为 false 不固定表头
/// </summary>
[Parameter]
public bool FixedHeader { get; set; }
/// <summary>
/// 获得/设置 是否自适应高度 默认为 false 不自适应高度
/// </summary>
[Parameter]
public bool AutoHeight { get; set; }
/// <summary>
/// 获得/设置 是否显示搜索框 默认为 false 不显示搜索框
/// </summary>
[Parameter]
public bool ShowSearch { get; set; }
/// <summary>
/// 获得/设置 数据集合
/// </summary>

2
src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor
View File

@ -1,6 +1,6 @@
@inherits DictsBase
<EditPage Id="dict" TItem="Bootstrap.Security.BootstrapDict" SubmitModalTitle="字典编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
<EditPage Id="dict" FixedHeader="@FixedHeader" TItem="Bootstrap.Security.BootstrapDict" SubmitModalTitle="字典编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
<QueryBody>
<LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.Category" maxlength="50" />
<Select ColumnClass="col-sm-auto" Items="QueryDefine" TItem="int" @bind-Value="@context.Define" />

18
src/admin/Bootstrap.Admin/Pages/Components/QueryPageBase.cs
View File

@ -1,5 +1,7 @@
using System.Collections.Generic;
using Bootstrap.Admin.Components;
using Bootstrap.DataAccess;
using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
namespace Bootstrap.Pages.Admin.Components
{
@ -8,6 +10,12 @@ namespace Bootstrap.Pages.Admin.Components
/// </summary>
public abstract class QueryPageBase<TItem> : PageBase where TItem : class, new()
{
/// <summary>
/// 获得/设置 是否固定表头 默认为 false 不固定表头
/// </summary>
[Parameter]
public bool FixedHeader { get; set; }
/// <summary>
/// 获得/设置 TItem 实例
/// </summary>
@ -20,6 +28,14 @@ namespace Bootstrap.Pages.Admin.Components
/// <param name="pageItems">每页显示数据条目数量</param>
protected abstract QueryData<TItem> Query(int pageIndex, int pageItems);
/// <summary>
/// OnParametersSet 方法
/// </summary>
protected override void OnParametersSet()
{
FixedHeader = DictHelper.RetrieveFixedTableHeader();
}
/// <summary>
/// 新建方法
/// </summary>

2
src/admin/Bootstrap.Admin/Shared/EditPage.razor
View File

@ -9,7 +9,7 @@
查询结果
</div>
<div class="card-body">
<Table @ref="Table" Id="@Id" TItem="TItem" SubmitModalTitle="@SubmitModalTitle" OnQuery="QueryData" OnAdd="OnAdd" OnDelete="OnDelete" OnSave="OnSave">
<Table @ref="Table" Id="@Id" FixedHeader="@FixedHeader" TItem="TItem" SubmitModalTitle="@SubmitModalTitle" OnQuery="QueryData" OnAdd="OnAdd" OnDelete="OnDelete" OnSave="OnSave">
<TableToolbarTemplate>
@TableToolbarTemplate
</TableToolbarTemplate>

133
src/admin/Bootstrap.Admin/Shared/Table.razor
View File

@ -13,48 +13,119 @@
</div>
<div class="table-wrapper">
<table class="table table-striped table-bordered table-hover table-selected" id="@($"{Id}_table")">
<thead>
<tr>
@if (ShowCheckbox)
{
<th class="table-col-checkbox"><Checkbox TItem="TItem" SetCheckCallback="CheckState" ToggleCallback="ToggleCheck"></Checkbox></th>
}
@if (ShowLineNo)
{
<th class="table-col-lineno">行号</th>
}
@TableHeader?.Invoke(EditModel)
@if (ShowButtons)
{
<th>@ButtonTemplateHeaderText</th>
}
</tr>
</thead>
<tbody>
@for (int index = 0; index < Items.Count(); index++)
{
@if(FixedHeader)
{
<div class="fixed-table-header">
<table class="table table-bordered table-hover table-selected">
<thead>
<tr>
@if (ShowCheckbox)
{
<th class="table-col-checkbox"><Checkbox TItem="TItem" SetCheckCallback="CheckState" ToggleCallback="ToggleCheck"></Checkbox></th>
}
@if (ShowLineNo)
{
<th class="table-col-lineno">行号</th>
}
@TableHeader?.Invoke(EditModel)
@if (ShowButtons)
{
<th>@ButtonTemplateHeaderText</th>
}
</tr>
</thead>
</table>
</div>
<div class="fixed-table-body">
<table class="table table-bordered table-hover table-selected" style="margin-top: -38px;">
<thead>
<tr>
@if (ShowCheckbox)
{
<th class="table-col-checkbox"><Checkbox TItem="TItem" SetCheckCallback="CheckState" ToggleCallback="ToggleCheck"></Checkbox></th>
}
@if (ShowLineNo)
{
<th class="table-col-lineno">行号</th>
}
@TableHeader?.Invoke(EditModel)
@if (ShowButtons)
{
<th>@ButtonTemplateHeaderText</th>
}
</tr>
</thead>
<tbody>
@for (int index = 0; index < Items.Count(); index++)
{
<tr>
@if (ShowCheckbox)
{
<td class="table-col-checkbox"><Checkbox TItem="TItem" Item="Items.ElementAt(index)" SetCheckCallback="item => SelectedItems.Contains(item) ? CheckBoxState.Checked : CheckBoxState.UnChecked" ToggleCallback="ToggleCheck"></Checkbox></td>
}
@if (ShowLineNo)
{
<td class="table-col-lineno">@(index + 1 + (PageIndex - 1) * PageItems)</td>
}
@RowTemplate?.Invoke(Items.ElementAt(index))
@if (ShowButtons)
{
<td>@ButtonTemplate?.Invoke(Items.ElementAt(index))</td>
}
</tr>
}
</tbody>
<tfoot>
<tr>@TableFooter</tr>
</tfoot>
</table>
</div>
}
else
{
<table class="table table-striped table-bordered table-hover table-selected" id="@($"{Id}_table")">
<thead>
<tr>
@if (ShowCheckbox)
{
<td class="table-col-checkbox"><Checkbox TItem="TItem" Item="Items.ElementAt(index)" SetCheckCallback="item => SelectedItems.Contains(item) ? CheckBoxState.Checked : CheckBoxState.UnChecked" ToggleCallback="ToggleCheck"></Checkbox></td>
<th class="table-col-checkbox"><Checkbox TItem="TItem" SetCheckCallback="CheckState" ToggleCallback="ToggleCheck"></Checkbox></th>
}
@if (ShowLineNo)
{
<td class="table-col-lineno">@(index + 1 + (PageIndex - 1) * PageItems)</td>
<th class="table-col-lineno">行号</th>
}
@RowTemplate?.Invoke(Items.ElementAt(index))
@TableHeader?.Invoke(EditModel)
@if (ShowButtons)
{
<td>@ButtonTemplate?.Invoke(Items.ElementAt(index))</td>
<th>@ButtonTemplateHeaderText</th>
}
</tr>
}
</tbody>
<tfoot>
<tr>@TableFooter</tr>
</tfoot>
</table>
</thead>
<tbody>
@for (int index = 0; index < Items.Count(); index++)
{
<tr>
@if (ShowCheckbox)
{
<td class="table-col-checkbox"><Checkbox TItem="TItem" Item="Items.ElementAt(index)" SetCheckCallback="item => SelectedItems.Contains(item) ? CheckBoxState.Checked : CheckBoxState.UnChecked" ToggleCallback="ToggleCheck"></Checkbox></td>
}
@if (ShowLineNo)
{
<td class="table-col-lineno">@(index + 1 + (PageIndex - 1) * PageItems)</td>
}
@RowTemplate?.Invoke(Items.ElementAt(index))
@if (ShowButtons)
{
<td>@ButtonTemplate?.Invoke(Items.ElementAt(index))</td>
}
</tr>
}
</tbody>
<tfoot>
<tr>@TableFooter</tr>
</tfoot>
</table>
}
</div>
<Pagination PageItems="PageItems" TotalCount="TotalCount" PageIndex="PageIndex" OnPageClick="PageClick" OnPageItemsChange="PageItemsChange"></Pagination>
</div>

10
src/admin/Bootstrap.Admin/wwwroot/css/blazor.css
View File

@ -130,6 +130,16 @@ nav .dropdown .nav-link-close.dropdown-toggle:after {
margin-bottom: 0;
}
.bootstrap-table .fixed-table-body {
overflow: auto;
border-radius: 4px;
height: 300px;
}
.bootstrap-table .fixed-table-body thead th, .bootstrap-table .fixed-table-header thead th {
border-bottom: 1px solid #dee2e6;
}
.table-wrapper {
border-radius: 4px;
overflow: auto;