innov
/
BootstrapAdmin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

!63 增加功能：Blazor 模式下增加搜索功能 

Merge pull request !63 from Argo/dev-blazor-toolbar
This commit is contained in:
Argo 2020-01-23 17:22:09 +08:00 committed by Gitee
parent 533498797a dca64218c1
commit 425d4ce180
19 changed files with 311 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,7 +34,7 @@ namespace Bootstrap.Admin.Components
/// 查询按钮回调方法
/// </summary>
[Parameter]
public Func<int, int, QueryData<TItem>>? OnQuery { get; set; }
public Func<int, int, string, QueryData<TItem>>? OnQuery { get; set; }
/// <summary>
/// 获得/设置 TableHeader 实例
@ -78,12 +78,24 @@ namespace Bootstrap.Admin.Components
[Parameter]
public RenderFragment<TItem>? EditTemplate { get; set; }
/// <summary>
/// 获得/设置 SearchTemplate 实例
/// </summary>
[Parameter]
public RenderFragment<TItem>? SearchTemplate { get; set; }
/// <summary>
/// 获得/设置 是否固定表头 默认为 false 不固定表头
/// </summary>
[Parameter]
public bool FixedHeader { get; set; }
/// <summary>
/// 获得/设置 是否显示搜索框 默认为 false 不显示搜索框
/// </summary>
[Parameter]
public bool ShowSearch { get; set; }
/// <summary>
/// 获得/设置 Table 实例
/// </summary>
@ -107,6 +119,12 @@ namespace Bootstrap.Admin.Components
[Parameter]
public Func<TItem, bool> OnSave { get; set; } = item => false;
/// <summary>
/// 重置搜索条件回调方法
/// </summary>
[Parameter]
public Action OnResetSearch { get; set; } = () => { };
/// <summary>
/// 删除按钮回调方法
/// </summary>
@ -148,24 +166,13 @@ namespace Bootstrap.Admin.Components
}
}
/// <summary>
/// 查询方法
/// </summary>
protected void Query()
{
// 查询控件按钮触发此事件
if (OnQuery != null && Table != null)
{
Table.Query(OnQuery.Invoke(1, Table.PageItems));
}
}
/// <summary>
/// 分页查询方法
/// </summary>
/// <param name="pageIndex"></param>
/// <param name="pageItems"></param>
/// <param name="searchText"></param>
/// <returns></returns>
protected QueryData<TItem> QueryData(int pageIndex, int pageItems) => OnQuery?.Invoke(pageIndex, pageItems) ?? new QueryData<TItem>();
protected QueryData<TItem> QueryData(int pageIndex, int pageItems, string searchText) => OnQuery?.Invoke(pageIndex, pageItems, searchText) ?? new QueryData<TItem>();
}
}

11
src/admin/Bootstrap.Admin/Components/ModalBase.cs
View File

@ -1,6 +1,7 @@
using Bootstrap.Admin.Extensions;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System;
namespace Bootstrap.Admin.Components
{
@ -71,10 +72,18 @@ namespace Bootstrap.Admin.Components
{
if (firstRender)
{
JSRuntime.InitModal();
JSRuntime.InitModal(Id);
}
}
/// <summary>
/// OnParametersSet 方法
/// </summary>
protected override void OnParametersSet()
{
if (string.IsNullOrEmpty(Id)) throw new InvalidOperationException("Modal Component Id property must be set");
}
/// <summary>
/// 输出窗口大小样式
/// </summary>

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

@ -49,6 +49,12 @@ namespace Bootstrap.Admin.Components
[Parameter]
public RenderFragment<TItem>? EditTemplate { get; set; }
/// <summary>
/// 获得/设置 SearchTemplate 实例
/// </summary>
[Parameter]
public RenderFragment<TItem>? SearchTemplate { get; set; }
/// <summary>
/// 获得/设置 表格 Toolbar 按钮模板
/// </summary>
@ -129,7 +135,7 @@ namespace Bootstrap.Admin.Components
/// 点击翻页回调方法
/// </summary>
[Parameter]
public Func<int, int, QueryData<TItem>>? OnQuery { get; set; }
public Func<int, int, string, QueryData<TItem>>? OnQuery { get; set; }
/// <summary>
/// 新建按钮回调方法
@ -143,6 +149,15 @@ namespace Bootstrap.Admin.Components
[Parameter]
public Action<TItem>? OnEdit { get; set; }
/// <summary>
/// 高级查询按钮点击时调用此方法
/// </summary>
protected void AdvancedSearchClick()
{
// 弹出高级查询弹窗
SearchModal?.Toggle();
}
/// <summary>
/// 保存按钮回调方法
/// </summary>
@ -178,11 +193,22 @@ namespace Bootstrap.Admin.Components
/// </summary>
protected Modal? ConfirmModal { get; set; }
/// <summary>
/// 高级查询弹窗
/// </summary>
protected Modal? SearchModal { get; set; }
#nullable disable
/// <summary>
/// 获得/设置 EditModel 实例
/// </summary>
protected TItem EditModel { get; set; }
/// <summary>
/// 获得/设置 QueryModel 实例
/// </summary>
[Parameter]
public TItem QueryModel { get; set; }
#nullable restore
/// <summary>
@ -204,7 +230,7 @@ namespace Bootstrap.Admin.Components
if (OnAdd != null) EditModel = OnAdd.Invoke();
if (OnQuery != null)
{
var queryData = OnQuery.Invoke(1, DefaultPageItems);
var queryData = OnQuery.Invoke(1, DefaultPageItems, SearchText);
Items = queryData.Items;
TotalCount = queryData.TotalCount;
}
@ -215,11 +241,8 @@ namespace Bootstrap.Admin.Components
/// </summary>
protected override async System.Threading.Tasks.Task OnAfterRenderAsync(bool firstRender)
{
if (FixedHeader)
{
// 调用客户端脚本 resetWith
await JSRuntime.InitTableAsync(RetrieveId(), firstRender);
}
// 调用客户端脚本
await JSRuntime.InitTableAsync(RetrieveId(), firstRender);
}
/// <summary>
@ -336,9 +359,12 @@ namespace Bootstrap.Admin.Components
StateHasChanged();
}
private void Query()
/// <summary>
/// 查询按钮调用此方法
/// </summary>
protected void Query()
{
if (OnQuery != null) Query(OnQuery.Invoke(PageIndex, PageItems));
if (OnQuery != null) Query(OnQuery.Invoke(PageIndex, PageItems, SearchText));
}
/// <summary>
@ -389,5 +415,51 @@ namespace Bootstrap.Admin.Components
/// 获取 Id 字符串
/// </summary>
public string RetrieveId() => $"{Id}_table";
/// <summary>
/// 重置搜索按钮回调方法
/// </summary>
[Parameter]
public Action? OnResetSearch { get; set; }
/// <summary>
/// 重置查询方法
/// </summary>
protected void ResetSearchClick()
{
OnResetSearch?.Invoke();
SearchClick();
}
/// <summary>
/// 查询方法
/// </summary>
protected void SearchClick()
{
// 查询控件按钮触发此事件
PageIndex = 1;
Query();
}
/// <summary>
/// 获得/设置 搜索关键字
/// </summary>
[Parameter]
public string SearchText { get; set; } = "";
/// <summary>
/// 获得/设置 搜索关键字改变事件
/// </summary>
[Parameter]
public EventCallback<string> SearchTextChanged { get; set; }
/// <summary>
/// 重置搜索按钮调用此方法
/// </summary>
protected void ClearSearchClick()
{
SearchText = "";
Query();
}
}
}

3
src/admin/Bootstrap.Admin/Extensions/JSRuntimeExtensions.cs
View File

@ -51,7 +51,8 @@ namespace Bootstrap.Admin.Extensions
/// 修复 Modal 组件
/// </summary>
/// <param name="jSRuntime"></param>
public static void InitModal(this IJSRuntime? jSRuntime) => jSRuntime.InvokeVoidAsync("$.initModal");
/// <param name="id"></param>
public static void InitModal(this IJSRuntime? jSRuntime, string id) => jSRuntime.InvokeVoidAsync("$.initModal", id);
/// <summary>
/// 修复 Modal 组件

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

@ -1,10 +1,10 @@
@inherits DictsBase
<EditPage Id="dict" FixedHeader="@FixedHeader" TItem="Bootstrap.Security.BootstrapDict" SubmitModalTitle="字典编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
<EditPage Id="dict" FixedHeader="@FixedHeader" ShowSearch="true" TItem="Bootstrap.Security.BootstrapDict" SubmitModalTitle="字典编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save" OnResetSearch="ResetSearch">
<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" />
<LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.Name" maxlength="50" />
<LgbInputText ColumnClass="col-12" @bind-Value="@context.Category" maxlength="50" />
<Select ColumnClass="col-12" Items="QueryDefine" TItem="int" @bind-Value="@context.Define" />
<LgbInputText ColumnClass="col-12" @bind-Value="@context.Name" maxlength="50" />
</QueryBody>
<TableInfoTemplate>
<ConditionComponent>

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

@ -1,6 +1,6 @@
@inherits GroupsBase
<EditPage Id="group" FixedHeader="@FixedHeader" TItem="Bootstrap.DataAccess.Group" SubmitModalTitle="部门编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
<EditPage Id="group" FixedHeader="@FixedHeader" ShowSearch="true" TItem="Bootstrap.DataAccess.Group" SubmitModalTitle="部门编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save" OnResetSearch="ResetSearch">
<QueryBody>
<LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.GroupName" maxlength="50" />
<LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.Description" maxlength="50" />

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

@ -1,6 +1,6 @@
@inherits MenusBase
<EditPage Id="role" FixedHeader="@FixedHeader" TItem="Bootstrap.Security.BootstrapMenu" SubmitModalTitle="菜单编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
<EditPage Id="menu" FixedHeader="@FixedHeader" ShowSearch="true" TItem="Bootstrap.Security.BootstrapMenu" SubmitModalTitle="菜单编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save" OnResetSearch="ResetSearch">
<QueryBody>
<LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.Name" maxlength="50" />
<LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.ParentName" maxlength="50" />

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

@ -1,6 +1,6 @@
@inherits RolesBase
<EditPage Id="role" FixedHeader="@FixedHeader" TItem="Bootstrap.DataAccess.Role" SubmitModalTitle="角色编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
<EditPage Id="role" FixedHeader="@FixedHeader" ShowSearch="true" TItem="Bootstrap.DataAccess.Role" SubmitModalTitle="角色编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save" OnResetSearch="ResetSearch">
<QueryBody>
<LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.RoleName" maxlength="50" />
<LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.Description" maxlength="50" />

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

@ -1,6 +1,6 @@
@inherits UsersBase
<EditPage Id="user" FixedHeader="@FixedHeader" TItem="Bootstrap.DataAccess.User" SubmitModalTitle="用户编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
<EditPage Id="user" FixedHeader="@FixedHeader" ShowSearch="true" TItem="Bootstrap.DataAccess.User" SubmitModalTitle="用户编辑窗口" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save" OnResetSearch="ResetSearch">
<QueryBody>
<LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.UserName" maxlength="50" />
<LgbInputText ColumnClass="col-sm-auto" @bind-Value="@context.DisplayName" maxlength="50" />

14
src/admin/Bootstrap.Admin/Pages/Components/DictsBase.cs
View File

@ -34,12 +34,14 @@ namespace Bootstrap.Pages.Admin.Components
/// </summary>
/// <param name="pageIndex">页码</param>
/// <param name="pageItems">每页显示数据条目数量</param>
protected override QueryData<BootstrapDict> Query(int pageIndex, int pageItems)
/// <param name="searchText"></param>
protected override QueryData<BootstrapDict> Query(int pageIndex, int pageItems, string searchText)
{
var data = DataAccess.DictHelper.RetrieveDicts();
if (QueryModel.Define != -1) data = data.Where(d => d.Define == QueryModel.Define);
if (!string.IsNullOrEmpty(QueryModel.Name)) data = data.Where(d => d.Name.Contains(QueryModel.Name, StringComparison.OrdinalIgnoreCase));
if (!string.IsNullOrEmpty(QueryModel.Category)) data = data.Where(d => d.Category.Contains(QueryModel.Category, StringComparison.OrdinalIgnoreCase));
if (!string.IsNullOrEmpty(searchText)) data = data.Where(d => d.Category.Contains(searchText, StringComparison.OrdinalIgnoreCase) || d.Name.Contains(searchText, StringComparison.OrdinalIgnoreCase) || d.Code.Contains(searchText, StringComparison.OrdinalIgnoreCase));
var totalCount = data.Count();
var items = data.Skip((pageIndex - 1) * pageItems).Take(pageItems);
return new QueryData<BootstrapDict>() { Items = items, TotalCount = totalCount, PageIndex = pageIndex, PageItems = pageItems };
@ -54,5 +56,15 @@ namespace Bootstrap.Pages.Admin.Components
/// 删除方法
/// </summary>
protected override bool Delete(IEnumerable<BootstrapDict> items) => DataAccess.DictHelper.Delete(items.Select(item => item.Id ?? ""));
/// <summary>
/// 重置搜索方法
/// </summary>
protected void ResetSearch()
{
QueryModel.Define = -1;
QueryModel.Category = "";
QueryModel.Name = "";
}
}
}

13
src/admin/Bootstrap.Admin/Pages/Components/GroupsBase.cs
View File

@ -16,11 +16,13 @@ namespace Bootstrap.Pages.Admin.Components
/// </summary>
/// <param name="pageIndex">页码</param>
/// <param name="pageItems">每页显示数据条目数量</param>
protected override QueryData<Group> Query(int pageIndex, int pageItems)
/// <param name="searchText"></param>
protected override QueryData<Group> Query(int pageIndex, int pageItems, string searchText)
{
var data = GroupHelper.Retrieves();
if (!string.IsNullOrEmpty(QueryModel.GroupName)) data = data.Where(d => d.GroupName.Contains(QueryModel.GroupName, StringComparison.OrdinalIgnoreCase));
if (!string.IsNullOrEmpty(QueryModel.Description)) data = data.Where(d => d.Description != null && d.Description.Contains(QueryModel.Description, StringComparison.OrdinalIgnoreCase));
if (!string.IsNullOrEmpty(searchText)) data = data.Where(d => d.GroupName.Contains(searchText, StringComparison.OrdinalIgnoreCase) || (d.Description ?? "").Contains(searchText, StringComparison.OrdinalIgnoreCase));
var totalCount = data.Count();
var items = data.Skip((pageIndex - 1) * pageItems).Take(pageItems);
return new QueryData<Group>() { Items = items, TotalCount = totalCount, PageIndex = pageIndex, PageItems = pageItems };
@ -36,6 +38,15 @@ namespace Bootstrap.Pages.Admin.Components
/// </summary>
protected override bool Delete(IEnumerable<Group> groups) => GroupHelper.Delete(groups.Select(item => item.Id ?? ""));
/// <summary>
/// 重置搜索方法
/// </summary>
protected void ResetSearch()
{
QueryModel.GroupName = "";
QueryModel.Description = "";
}
/// <summary>
/// 分配用户方法
/// </summary>

16
src/admin/Bootstrap.Admin/Pages/Components/MenusBase.cs
View File

@ -115,7 +115,8 @@ namespace Bootstrap.Pages.Admin.Components
/// </summary>
/// <param name="pageIndex">页码</param>
/// <param name="pageItems">每页显示数据条目数量</param>
protected override QueryData<BootstrapMenu> Query(int pageIndex, int pageItems)
/// <param name="searchText"></param>
protected override QueryData<BootstrapMenu> Query(int pageIndex, int pageItems, string searchText)
{
var data = MenuHelper.RetrieveMenusByUserName(UserName);
if (!string.IsNullOrEmpty(QueryModel.Name)) data = data.Where(d => d.Name.Contains(QueryModel.Name, StringComparison.OrdinalIgnoreCase));
@ -123,6 +124,7 @@ namespace Bootstrap.Pages.Admin.Components
if (!string.IsNullOrEmpty(QueryModel.Category)) data = data.Where(d => d.Category == QueryModel.Category);
if (QueryModel.IsResource != -1) data = data.Where(d => d.IsResource == QueryModel.IsResource);
if (!string.IsNullOrEmpty(QueryModel.Application)) data = data.Where(d => d.Application.Equals(QueryModel.Application, StringComparison.OrdinalIgnoreCase));
if (!string.IsNullOrEmpty(searchText)) data = data.Where(d => d.Name.Contains(searchText, StringComparison.OrdinalIgnoreCase) || d.ParentName.Contains(searchText, StringComparison.OrdinalIgnoreCase) || d.Category.Contains(searchText, StringComparison.OrdinalIgnoreCase) || d.Application.Contains(searchText, StringComparison.OrdinalIgnoreCase));
var totalCount = data.Count();
var items = data.Skip((pageIndex - 1) * pageItems).Take(pageItems);
return new QueryData<BootstrapMenu>() { Items = items, TotalCount = totalCount, PageIndex = pageIndex, PageItems = pageItems };
@ -153,6 +155,18 @@ namespace Bootstrap.Pages.Admin.Components
/// 删除方法
/// </summary>
protected override bool Delete(IEnumerable<BootstrapMenu> items) => MenuHelper.Delete(items.Select(item => item.Id ?? ""));
/// <summary>
/// 重置搜索方法
/// </summary>
protected void ResetSearch()
{
QueryModel.Name = "";
QueryModel.ParentName = "";
QueryModel.Category = "";
QueryModel.IsResource = -1;
QueryModel.Application = "";
}
/// <summary>
/// 分配角色方法

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

@ -26,7 +26,8 @@ namespace Bootstrap.Pages.Admin.Components
/// </summary>
/// <param name="pageIndex">页码</param>
/// <param name="pageItems">每页显示数据条目数量</param>
protected abstract QueryData<TItem> Query(int pageIndex, int pageItems);
/// <param name="searchText"></param>
protected abstract QueryData<TItem> Query(int pageIndex, int pageItems, string searchText);
/// <summary>
/// OnParametersSet 方法

13
src/admin/Bootstrap.Admin/Pages/Components/RolesBase.cs
View File

@ -16,11 +16,13 @@ namespace Bootstrap.Pages.Admin.Components
/// </summary>
/// <param name="pageIndex">页码</param>
/// <param name="pageItems">每页显示数据条目数量</param>
protected override QueryData<Role> Query(int pageIndex, int pageItems)
/// <param name="searchText"></param>
protected override QueryData<Role> Query(int pageIndex, int pageItems, string searchText)
{
var data = RoleHelper.Retrieves();
if (!string.IsNullOrEmpty(QueryModel.RoleName)) data = data.Where(d => d.RoleName.Contains(QueryModel.RoleName, StringComparison.OrdinalIgnoreCase));
if (!string.IsNullOrEmpty(QueryModel.Description)) data = data.Where(d => d.Description != null && d.Description.Contains(QueryModel.Description, StringComparison.OrdinalIgnoreCase));
if (!string.IsNullOrEmpty(searchText)) data = data.Where(d => d.RoleName.Contains(searchText, StringComparison.OrdinalIgnoreCase) || d.Description.Contains(searchText, StringComparison.OrdinalIgnoreCase));
var totalCount = data.Count();
var items = data.Skip((pageIndex - 1) * pageItems).Take(pageItems);
return new QueryData<Role>() { Items = items, TotalCount = totalCount, PageIndex = pageIndex, PageItems = pageItems };
@ -35,6 +37,15 @@ namespace Bootstrap.Pages.Admin.Components
/// 删除方法
/// </summary>
protected override bool Delete(IEnumerable<Role> items) => RoleHelper.Delete(items.Select(item => item.Id ?? ""));
/// <summary>
/// 重置搜索方法
/// </summary>
protected void ResetSearch()
{
QueryModel.RoleName = "";
QueryModel.Description = "";
}
/// <summary>
/// 分配用户方法

13
src/admin/Bootstrap.Admin/Pages/Components/UsersBase.cs
View File

@ -16,11 +16,13 @@ namespace Bootstrap.Pages.Admin.Components
/// </summary>
/// <param name="pageIndex">页码</param>
/// <param name="pageItems">每页显示数据条目数量</param>
protected override QueryData<User> Query(int pageIndex, int pageItems)
/// <param name="searchText"></param>
protected override QueryData<User> Query(int pageIndex, int pageItems, string searchText)
{
var data = UserHelper.Retrieves();
if (!string.IsNullOrEmpty(QueryModel.UserName)) data = data.Where(d => d.UserName.Contains(QueryModel.UserName, StringComparison.OrdinalIgnoreCase));
if (!string.IsNullOrEmpty(QueryModel.DisplayName)) data = data.Where(d => d.DisplayName.Contains(QueryModel.DisplayName, StringComparison.OrdinalIgnoreCase));
if (!string.IsNullOrEmpty(searchText)) data = data.Where(d => d.UserName.Contains(searchText, StringComparison.OrdinalIgnoreCase) || d.DisplayName.Contains(searchText, StringComparison.OrdinalIgnoreCase));
var totalCount = data.Count();
var items = data.Skip((pageIndex - 1) * pageItems).Take(pageItems);
return new QueryData<User>() { Items = items, TotalCount = totalCount, PageIndex = pageIndex, PageItems = pageItems };
@ -35,6 +37,15 @@ namespace Bootstrap.Pages.Admin.Components
/// 删除方法
/// </summary>
protected override bool Delete(IEnumerable<User> users) => UserHelper.Delete(users.Select(item => item.Id ?? ""));
/// <summary>
/// 重置搜索方法
/// </summary>
protected void ResetSearch()
{
QueryModel.UserName = "";
QueryModel.DisplayName = "";
}
/// <summary>
/// 分配部门方法

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

@ -1,15 +1,12 @@
@typeparam TItem
@inherits EditPageBase<TItem>
<Query Id="@($"{Id}_query")" OnQuery="Query" TItem="TItem" QueryModel="QueryModel">
@QueryBody?.Invoke(context)
</Query>
<div class="card">
<div class="card-header">
查询结果
</div>
<div class="card-body">
<Table @ref="Table" Id="@Id" FixedHeader="@FixedHeader" TItem="TItem" SubmitModalTitle="@SubmitModalTitle" OnQuery="QueryData" OnAdd="OnAdd" OnDelete="OnDelete" OnSave="OnSave">
<Table @ref="Table" Id="@Id" FixedHeader="@FixedHeader" ShowSearch="@ShowSearch" QueryModel="QueryModel" TItem="TItem" SubmitModalTitle="@SubmitModalTitle" OnQuery="QueryData" OnAdd="OnAdd" OnDelete="OnDelete" OnSave="OnSave" OnResetSearch="OnResetSearch">
<TableToolbarTemplate>
@TableToolbarTemplate
</TableToolbarTemplate>
@ -29,6 +26,9 @@
<EditTemplate>
@EditTemplate?.Invoke(context)
</EditTemplate>
<SearchTemplate>
@QueryBody?.Invoke(context)
</SearchTemplate>
</Table>
</div>
</div>

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

@ -2,14 +2,37 @@
@inherits TableBase<TItem>
<div class="bootstrap-table">
<div class="@(ShowToolBar ? "bs-bars" : "bs-bars d-none")">
<TableToolbar>
<TableToolbarContent />
<TableToolbarButton class="btn btn-success" Icon="fa fa-plus" Title="新增" OnClick="Add" />
<TableToolbarButton class="btn btn-danger" Icon="fa fa-remove" Title="删除" OnClick="Delete" />
<TableToolbarButton class="btn btn-primary" Icon="fa fa-pencil" Title="编辑" OnClick="Edit" />
@TableToolbarTemplate
</TableToolbar>
<div class="fixed-table-toolbar">
<div class="float-left @(ShowToolBar ? "bs-bars" : "bs-bars d-none")">
<TableToolbar>
<TableToolbarContent />
<TableToolbarButton class="btn btn-success" Icon="fa fa-plus" Title="新增" OnClick="Add" />
<TableToolbarButton class="btn btn-danger" Icon="fa fa-remove" Title="删除" OnClick="Delete" />
<TableToolbarButton class="btn btn-primary" Icon="fa fa-pencil" Title="编辑" OnClick="Edit" />
@TableToolbarTemplate
</TableToolbar>
</div>
<div class="float-right columns columns-right">
<button class="btn btn-secondary" type="button" title="刷新" @onclick="Query">
<i class="fa fa-refresh"></i><span>刷新</span>
</button>
</div>
<div class="float-right @(ShowSearch ? "search btn-group" : "search btn-group d-none")">
<div class="input-group">
<input class="form-control search-input" type="text" placeholder="搜索" @bind="SearchText" />
<div class="input-group-append">
<button class="btn btn-secondary" type="button" title="搜索" @onclick="SearchClick">
<i class="fa fa-search"></i><span>搜索</span>
</button>
<button class="btn btn-secondary" type="button" title="清空过滤" @onclick="ClearSearchClick">
<i class="fa fa-trash"></i> <span>清空过滤</span>
</button>
<button class="btn btn-secondary" type="button" title="高级搜索" @onclick="AdvancedSearchClick">
<i class="fa fa-search-plus"></i><span>高级搜索</span>
</button>
</div>
</div>
</div>
</div>
<div class="@(FixedHeader ? "table-wrapper table-fixed-header" : "table-wrapper")">
@ -152,4 +175,24 @@
</ModalBody>
</SubmitModal>
<Modal @ref="SearchModal" Id="@($"{Id}_search")" Title="查询条件">
<ModalBody>
<LgbEditForm class="form-inline" Id="@Id" Model="QueryModel">
<div class="row">
@SearchTemplate?.Invoke(QueryModel)
</div>
</LgbEditForm>
</ModalBody>
<ModalFooter>
<button type="button" class="btn btn-info" data-dismiss="modal" @onclick="ResetSearchClick">
<i class="fa fa-trash-o"></i>
<span>重置</span>
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" @onclick="SearchClick">
<i class="fa fa-search"></i>
<span>查询</span>
</button>
</ModalFooter>
</Modal>
<Toast @ref="Toast" Id="@($"{Id}_toast")"></Toast>

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

@ -105,10 +105,6 @@ nav .dropdown .nav-link-close.dropdown-toggle:after {
vertical-align: text-bottom;
}
.card-body .bootstrap-table {
margin-top: 0rem;
}
.bs-bars {
margin-bottom: 0.625rem;
}
@ -130,6 +126,22 @@ nav .dropdown .nav-link-close.dropdown-toggle:after {
margin-bottom: 0;
}
.bootstrap-table .fixed-table-toolbar:after {
display: block;
content: "";
clear: both;
}
.bootstrap-table .fixed-table-toolbar .bs-bars,
.bootstrap-table .fixed-table-toolbar .search,
.bootstrap-table .fixed-table-toolbar .columns {
margin-top: 10px;
}
.bootstrap-table .fixed-table-toolbar .columns-right {
margin-left: 5px;
}
.bootstrap-table .fixed-table-header {
overflow: hidden;
}

74
src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js
View File

@ -108,8 +108,8 @@
$('[data-toggle="tooltip"]').tooltip();
$('.sidebar').addNiceScroll().autoScrollSidebar();
},
initModal: function () {
$('.modal').appendTo($('body'));
initModal: function (id) {
$('#' + id).appendTo($('body'));
},
initToast: function (id) {
$('#' + id).appendTo($('body'));
@ -168,31 +168,61 @@
var $table = $('#' + id);
var $fixedBody = $table.parents('.fixed-table-body');
if (firstRender) {
// calc height
$.resetTableHeight($fixedBody);
// 固定表头设置
if ($fixedBody.length === 1) {
if (firstRender) {
// calc height
$.resetTableHeight($fixedBody);
// modify scroll
$table.parent().overlayScrollbars({
className: 'os-theme-dark',
scrollbars: {
autoHide: 'leave',
autoHideDelay: 100
}
});
// modify scroll
$table.parent().overlayScrollbars({
className: 'os-theme-dark',
scrollbars: {
autoHide: 'leave',
autoHideDelay: 100
}
});
}
var $tableContainer = $table.parents('.table-wrapper');
var $tableHeader = $tableContainer.find('.fixed-table-header table');
$.resetTableWidth($table, $tableHeader);
if (firstRender) {
$tableContainer.find('.fixed-table-body').removeClass('invisible');
$(window).on('resize', function () {
$.resetTableWidth($table, $tableHeader);
$.resetTableHeight($fixedBody);
});
}
}
var $tableContainer = $table.parents('.table-wrapper');
var $tableHeader = $tableContainer.find('.fixed-table-header table');
$.resetTableWidth($table, $tableHeader);
// set search toolbar
if (firstRender) {
$tableContainer.find('.fixed-table-body').removeClass('invisible');
var $search = $table.parents('.bootstrap-table').find('.fixed-table-toolbar').find('.search');
if ($search.length === 1) {
$searchInput = $search.find('.search-input').tooltip({
sanitize: false,
title: '<div class="search-input-tooltip">输入任意字符串全局搜索 </br> <kbd>Enter</kbd> 搜索 <kbd>ESC</kbd> 清除搜索</div>',
html: true
});
$(window).on('resize', function () {
$.resetTableWidth($table, $tableHeader);
$.resetTableHeight($fixedBody);
});
// 支持键盘回车搜索
$searchInput.on('keyup', function (event) {
if (event.keyCode === 13 || event.keyCode === 27) {
// ENTER
var $buttons = $(this).next();
var $search = $buttons.find(':first');
if ($search.length === 1) {
if (event.keyCode === 13) {
$search.trigger('click');
}
else $search.next().trigger('click');
}
}
});
}
}
}
});