weiai/BootstrapBlazor
1
0
Fork 0
mirror of https://github.com/dotnetcore/BootstrapBlazor.git synced 2025-12-20 10:26:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(Table): missing scroll after toggle CardView mode (#4600)

Browse Source 
* refactor: 卡片模式增加滚动条样式

* fix: 修复卡片模式切换后固定表头模式下滚动条丢失问题

* doc: 代码格式化

* doc: 更新示例

* refactor: 使用 ?? 操作符

* refactor: 增加判断

* refactor: 增加释放资源逻辑

* fix(Table): add toggleView function
This commit is contained in:
Argo Zhang
2024-11-02 12:01:44 +08:00
committed by GitHub
parent dd5b65b3c9
commit bcd80c5cb6
4 changed files with 55 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedHeader.razor
View File

@@ -16,7 +16,9 @@
<p>@Localizer["FixedHeaderP"]</p>
<p>@Localizer["FixedHeaderP1"]</p>
</section>
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" Height="200" IsBordered="true" IsFixedHeader="true">
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" Height="200"
IsBordered="true" IsFixedHeader="true"
ShowToolbar="true" ShowDefaultButtons="false" ShowCardView="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
@@ -27,7 +29,9 @@
<DemoBlock Title="@Localizer["FixedWidthTitle"]" Introduction="@Localizer["FixedWidthIntro"]" Name="FixedHeaderWidth">
<section ignore>@Localizer["FixedWidthP"]</section>
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" IsBordered="true" IsMultipleSelect="true" Height="200" IsFixedHeader="true">
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" Height="200"
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true"
ShowToolbar="true" ShowDefaultButtons="false" ShowCardView="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
@@ -38,9 +42,9 @@
<DemoBlock Title="@Localizer["AllowResizingTitle"]" Introduction="@Localizer["AllowResizingIntro"]" Name="AllowResizing">
<section ignore>@((MarkupString)Localizer["AllowResizingP"].Value)</section>
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table"
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true"
Height="200" AllowResizing="true">
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" Height="200"
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true" AllowResizing="true"
ShowToolbar="true" ShowDefaultButtons="false" ShowCardView="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
@@ -59,8 +63,9 @@
<Slider @bind-Value="Height" Min="300" Max="600"></Slider>
</section>
<div style="height: @($"{Height}px;")">
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false"
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true" AllowResizing="true">
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table"
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true" AllowResizing="true"
ShowToolbar="true" ShowDefaultButtons="false" ShowColumnList="true" ShowRefresh="false" ShowCardView="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
@@ -94,12 +99,11 @@
@code {
RenderFragment RenderTable() =>
@<Table TItem="Foo" Items="@Items" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false"
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true" AllowResizing="true" RenderMode="TableRenderMode.Table">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" Width="900" />
</TableColumns>
</Table>;
@<Table TItem="Foo" Items="@Items" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false" IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true" AllowResizing="true" RenderMode="TableRenderMode.Table">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" Width="900" />
</TableColumns>
</Table>;
}

3
src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs
View File

@@ -367,7 +367,7 @@ public partial class Table<TItem>
protected Task OnClickRefreshAsync() => QueryAsync();
/// <summary>
///
/// 点击 CardView 按钮回调方法
/// </summary>
/// <returns></returns>
protected void OnClickCardView()
@@ -382,6 +382,7 @@ public partial class Table<TItem>
TableRenderMode.Table => TableRenderMode.CardView,
_ => TableRenderMode.Table
};
_viewChanged = true;
StateHasChanged();
}

10
src/BootstrapBlazor/Components/Table/Table.razor.cs
View File

@@ -65,7 +65,7 @@ public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where
/// </summary>
protected string? WrapperClassName => CssBuilder.Default()
.AddClass("table-shim", ActiveRenderMode == TableRenderMode.Table)
.AddClass("table-card", ActiveRenderMode == TableRenderMode.CardView)
.AddClass("table-card scroll", ActiveRenderMode == TableRenderMode.CardView)
.AddClass("table-wrapper", IsBordered)
.AddClass("is-clickable", ClickToSelect || DoubleClickToEdit || OnClickRowCallback != null || OnDoubleClickRowCallback != null)
.AddClass("table-scroll scroll", !IsFixedHeader || FixedColumn)
@@ -381,6 +381,8 @@ public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where
private bool _breakPointChanged;
private bool _viewChanged;
private List<ColumnWidth> _clientColumnWidths = [];
private async Task OnBreakPointChanged(BreakPoint size)
@@ -928,6 +930,12 @@ public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where
await ProcessFirstRender();
}
if(_viewChanged)
{
_viewChanged = false;
await InvokeVoidAsync("toggleView", Id);
}
if (_breakPointChanged)
{
_breakPointChanged = false;

36
src/BootstrapBlazor/Components/Table/Table.razor.js
View File

@@ -28,7 +28,7 @@ export function reloadColumnWidth(tableName) {
export function reloadColumnOrder(tableName) {
const key = `bb-table-column-order-${tableName}`
return JSON.parse(localStorage.getItem(key)) || [];
return JSON.parse(localStorage.getItem(key)) ?? [];
}
export function saveColumnOrder(options) {
@@ -128,6 +128,7 @@ export function reset(id) {
if (table.pages) {
observer.observe(table.pages);
}
table.observer = observer;
}
export function resetColumn(id) {
@@ -197,10 +198,21 @@ export function scrollTo(id, x = 0, y = 0, options = { behavior: 'smooth' }) {
}
}
export function toggleView(id) {
const table = Data.get(id);
destroyTable(table);
reset(id);
}
export function dispose(id) {
const table = Data.get(id)
Data.remove(id)
Data.remove(id);
destroyTable(table);
}
const destroyTable = table => {
if (table) {
if (table.loopCheckHeightHandler) {
cancelAnimationFrame(table.loopCheckHeightHandler);
@@ -215,7 +227,10 @@ export function dispose(id) {
disposeColumnDrag(table.columns)
disposeDragColumns(table.dragColumns)
EventHandler.off(table.element, 'click', '.col-copy');
if (table.element) {
EventHandler.off(table.element, 'click', '.col-copy');
}
if (table.handlers.setResizeHandler) {
EventHandler.off(document, 'click', table.handlers.setResizeHandler);
@@ -224,7 +239,8 @@ export function dispose(id) {
EventHandler.off(document, 'click', table.handlers.setColumnToolboxHandler);
}
if (table.observer) {
table.observer.disconnect()
table.observer.disconnect();
table.observer = null;
}
if (table.popovers) {
@@ -303,7 +319,7 @@ const setBodyHeight = table => {
card.style.height = `calc(100% - ${bodyHeight}px)`
}
else {
const body = table.body || table.tables[0];
const body = table.body ?? table.tables[0];
if (bodyHeight > 0 && body && body.parentNode) {
body.parentNode.style.height = `calc(100% - ${bodyHeight}px)`
}
@@ -551,10 +567,10 @@ const setResizeListener = table => {
colWidth = getWidth(col.closest('th'))
}
tableWidth = getWidth(col.closest('table'))
originalX = e.clientX || e.touches[0].clientX
originalX = e.clientX ?? e.touches[0].clientX
},
e => {
const eventX = e.clientX || e.changedTouches[0].clientX
const eventX = e.clientX ?? e.changedTouches[0].clientX
const marginX = eventX - originalX
table.tables.forEach(t => {
const group = [...t.children].find(i => i.nodeName === 'COLGROUP')
@@ -763,8 +779,7 @@ const setCopyColumn = table => {
}
const disposeColumnDrag = columns => {
columns = columns || []
columns.forEach(col => {
(columns ?? []).forEach(col => {
EventHandler.off(col, 'click');
EventHandler.off(col, 'dblclick');
EventHandler.off(col, 'mousedown');
@@ -831,8 +846,7 @@ const setDraggable = table => {
}
const disposeDragColumns = columns => {
columns = columns || []
columns.forEach(col => {
(columns ?? []).forEach(col => {
EventHandler.off(col, 'dragstart')
EventHandler.off(col, 'dragend')
EventHandler.off(col, 'drop')