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

feat: Table 增加双向绑定功能

This commit is contained in:
Argo Window10 2019-11-28 21:34:12 +08:00
parent 9484a6e598
commit c824c008fc
8 changed files with 143 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,12 @@ namespace Bootstrap.Admin.Components
/// </summary>
public class SelectBase : ComponentBase
{
/// <summary>
///
/// </summary>
[Parameter]
public string Id { get; set; } = "";
/// <summary>
///
/// </summary>
@ -25,6 +31,18 @@ namespace Bootstrap.Admin.Components
/// </summary>
public SelectItemBase? SelectedItem { get; set; }
/// <summary>
///
/// </summary>
[Parameter]
public int SelectedValue { get; set; }
/// <summary>
///
/// </summary>
[Parameter]
public EventCallback<int> SelectedValueChanged { get; set; }
/// <summary>
///
/// </summary>

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

@ -1,5 +1,7 @@
using Microsoft.AspNetCore.Components;
using Bootstrap.Admin.Extensions;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System;
using System.Collections.Generic;
namespace Bootstrap.Admin.Components
@ -15,12 +17,6 @@ namespace Bootstrap.Admin.Components
[Inject]
protected IJSRuntime? JSRuntime { get; set; }
/// <summary>
///
/// </summary>
[Parameter]
public string Id { get; set; } = "";
/// <summary>
///
/// </summary>
@ -39,6 +35,12 @@ namespace Bootstrap.Admin.Components
[Parameter]
public RenderFragment? TableFooter { get; set; }
/// <summary>
///
/// </summary>
[Parameter]
public bool ShowToolBar { get; set; } = true;
/// <summary>
///
/// </summary>
@ -46,9 +48,20 @@ namespace Bootstrap.Admin.Components
public IEnumerable<TItem> Items { get; set; } = new TItem[0];
/// <summary>
/// 数据
///
/// </summary>
[Parameter]
public int ItemsCount { get; set; } = 0;
public Action AddCallback { get; set; } = new Action(() => { });
/// <summary>
///
/// </summary>
public Action EditCallback { get; set; } = new Action(() => { });
/// <summary>
///
/// </summary>
public void Delete()
{
}
}
}

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

@ -52,5 +52,12 @@ namespace Bootstrap.Admin.Extensions
/// </summary>
/// <param name="jSRuntime"></param>
public static void InitModal(this IJSRuntime? jSRuntime) => jSRuntime.InvokeVoidAsync("$.initModal");
/// <summary>
/// 弹出 Modal 组件
/// </summary>
/// <param name="jSRuntime"></param>
/// <param name="modalId"></param>
public static void ToggleModal(this IJSRuntime? jSRuntime, string modalId) => jSRuntime.InvokeVoidAsync("$.toggleModal", modalId);
}
}

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

@ -1,4 +1,6 @@
<div class="card">
@inject IJSRuntime JSRuntime
<div class="card">
<div class="card-header">查询条件</div>
<div class="card-body">
<form class="form-inline">
@ -26,41 +28,28 @@
</form>
</div>
</div>
<div id="toolbar" class="d-none">
<div class="gear btn-group">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-gear"></i></button>
<div class="dropdown-menu">
<a id="tb_add" href="#" title="新增" asp-auth="add"><i class="fa fa-plus"></i></a>
<a id="tb_delete" href="#" title="删除" asp-auth="del"><i class="fa fa-remove"></i></a>
<a id="tb_edit" href="#" title="编辑" asp-auth="edit"><i class="fa fa-pencil"></i></a>
</div>
</div>
<div class="toolbar btn-group">
<button id="btn_add" type="button" class="btn btn-success" asp-auth="add"><i class="fa fa-plus" aria-hidden="true"></i><span>新增</span></button>
<button id="btn_delete" type="button" class="btn btn-danger" asp-auth="del"><i class="fa fa-remove" aria-hidden="true"></i><span>删除</span></button>
<button id="btn_edit" type="button" class="btn btn-primary" asp-auth="edit"><i class="fa fa-pencil" aria-hidden="true"></i><span>编辑</span></button>
</div>
</div>
<div class="card">
<div class="card-header">
查询结果
</div>
<div class="card-body">
<Table Id="tb_Dict" Items="Items" TItem="Bootstrap.Security.BootstrapDict" ItemsCount="ItemsCount">
<TableHeader>
<th>字典标签</th>
<th>字典名称</th>
<th>字典代码</th>
<th>字典类型</th>
</TableHeader>
<RowTemplate>
<td>@context.Category</td>
<td>@context.Name</td>
<td>@context.Code</td>
<td>@context.Define</td>
</RowTemplate>
</Table>
<Pagination @ref="Pagination" PageCount="PageCount" PageIndex="PageIndex" ItemsCount="ItemsCount"></Pagination>
<div class="bootstrap-table">
<Table @ref="Table" Items="Items" TItem="Bootstrap.Security.BootstrapDict">
<TableHeader>
<th>字典标签</th>
<th>字典名称</th>
<th>字典代码</th>
<th>字典类型</th>
</TableHeader>
<RowTemplate>
<td>@context.Category</td>
<td>@context.Name</td>
<td>@context.Code</td>
<td>@context.Define</td>
</RowTemplate>
</Table>
<Pagination @ref="Pagination" PageCount="PageCount" PageIndex="PageIndex" ItemsCount="ItemsCount"></Pagination>
</div>
</div>
</div>
<div id="tableButtons" class="d-none">
@ -70,34 +59,29 @@
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<Modal Id="exampleModal" Title="字典编辑窗口">
<Modal Id="DialogDict" Title="字典编辑窗口">
<ModalBody>
<form class="form-inline">
<div class="row">
<input type="hidden" id="dictID" />
<div class="form-group col-sm-6">
<label class="control-label" for="dictCate">字典标签</label>
<input type="text" class="form-control" id="dictCate" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
<input type="text" class="form-control" id="dictCate" @bind="Model.Category" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-6">
<label class="control-label" for="dictDefine">字典类型</label>
<input class="form-control" data-toggle="lgbSelect" />
<select data-toggle="lgbSelect" class="d-none" data-default-val="1" id="dictDefine">
<option value="0">系统使用</option>
<option value="1">自定义</option>
</select>
<Select Id="dictDefine" @bind-SelectedValue="Model.Define">
<SelectItem Text="系统使用" Value="0" Active="true"></SelectItem>
<SelectItem Text="自定义" Value="1"></SelectItem>
</Select>
</div>
<div class="form-group col-sm-6">
<label class="control-label" for="dictName">字典名称</label>
<input type="text" class="form-control" id="dictName" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
<input type="text" class="form-control" id="dictName" @bind="Model.Name" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-6">
<label class="control-label" for="dictCode">字典代码</label>
<input type="text" class="form-control" id="dictCode" placeholder="不可为空，2000字以内" maxlength="2000" data-valid="true" />
<input type="text" class="form-control" id="dictCode" @bind="Model.Code" placeholder="不可为空，2000字以内" maxlength="2000" data-valid="true" />
</div>
</div>
</form>
@ -107,7 +91,7 @@
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-primary" id="btnSubmit">
<button type="button" class="btn btn-primary" @onclick="Save">
<i class="fa fa-save"></i>
<span>保存</span>
</button>
@ -131,6 +115,10 @@
protected Pagination? Pagination { get; set; }
protected Table<BootstrapDict>? Table { get; set; }
protected BootstrapDict Model { get; set; } = new BootstrapDict();
protected override void OnInitialized()
{
Query(1);
@ -138,21 +126,35 @@
protected override void OnAfterRender(bool firstRender)
{
if (firstRender && Pagination != null)
if (firstRender)
{
Pagination.ClickPageCallback = pageIndex =>
if (Pagination != null)
{
if (pageIndex != PageIndex)
Pagination.ClickPageCallback = pageIndex =>
{
Query(pageIndex);
if (pageIndex != PageIndex)
{
Query(pageIndex);
StateHasChanged();
}
};
Pagination.PageItemsChangeCallback = () =>
{
Query(1);
StateHasChanged();
}
};
Pagination.PageItemsChangeCallback = () =>
};
}
if (Table != null)
{
Query(1);
StateHasChanged();
};
Table.AddCallback = () =>
{
JSRuntime.ToggleModal("#DialogDict");
};
Table.EditCallback = () =>
{
};
}
}
}
@ -167,4 +169,9 @@
PageCount = (int)Math.Ceiling(data.Count() * 1.0d / pageItems);
PageIndex = pageIndex;
}
protected void Save()
{
JSRuntime.ToggleModal("#DialogDict");
}
}

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

@ -1,7 +1,7 @@
@inherits SelectBase
<div data-toggle="lgbSelect" class="form-select dropdown">
<input type="text" readonly="readonly" class="form-control form-select-input" data-toggle="dropdown" placeholder="@PlaceHolder" value="@SelectedItem?.Text">
<input type="text" readonly="readonly" class="form-control form-select-input" id="@Id" data-toggle="dropdown" placeholder="@PlaceHolder" value="@SelectedItem?.Text">
<span class="form-select-append"><i class="fa fa-angle-up"></i></span>
<div class="dropdown-menu-arrow"></div>
<div class="dropdown-menu">

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

@ -1,6 +1,22 @@
@typeparam TItem
@inherits TableBase<TItem>
<div class="@(ShowToolBar ? "bs-bars" : "bs-bars d-none")">
<div class="toolbar btn-group">
<button id="btn_add" type="button" @onclick="(e => AddCallback())" class="btn btn-success" asp-auth="add"><i class="fa fa-plus" aria-hidden="true"></i><span>新增</span></button>
<button id="btn_delete" type="button" @onclick="Delete" class="btn btn-danger" asp-auth="del"><i class="fa fa-remove" aria-hidden="true"></i><span>删除</span></button>
<button id="btn_edit" type="button" @onclick="(e => EditCallback())" class="btn btn-primary" asp-auth="edit"><i class="fa fa-pencil" aria-hidden="true"></i><span>编辑</span></button>
</div>
<div class="gear btn-group">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-gear"></i></button>
<div class="dropdown-menu">
<div id="tb_add" title="新增" @onclick="(e => AddCallback())" asp-auth="add"><i class="fa fa-plus"></i></div>
<div id="tb_delete" title="删除" @onclick="Delete" asp-auth="del"><i class="fa fa-remove"></i></div>
<div id="tb_edit" title="编辑" @onclick="(e => EditCallback())" asp-auth="edit"><i class="fa fa-pencil"></i></div>
</div>
</div>
</div>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>@TableHeader</tr>

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

@ -67,6 +67,18 @@ nav .dropdown .nav-link-close.dropdown-toggle:after {
padding: 0.5rem;
}
.card-body .bootstrap-table {
margin-top: 0rem;
}
.bs-bars {
margin-bottom: 0.625rem;
}
.bootstrap-table {
margin-bottom: 0;
}
.pagination-bar {
flex: 1 1 auto;
margin-bottom: 1rem;

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

@ -118,6 +118,9 @@
},
initModal: function () {
$('.modal').appendTo($('body'));
},
toggleModal: function (modalId) {
$(modalId).modal('toggle');
}
});