Skip to content

Commit bcd80c5

Browse files
ArgoZhangArgoZhang
authored
fix(Table): missing scroll after toggle CardView mode (#4600)
* refactor: 卡片模式增加滚动条样式 * fix: 修复卡片模式切换后固定表头模式下滚动条丢失问题 * doc: 代码格式化 * doc: 更新示例 * refactor: 使用 ?? 操作符 * refactor: 增加判断 * refactor: 增加释放资源逻辑 * fix(Table): add toggleView function
1 parent dd5b65b commit bcd80c5

File tree

4 files changed

+55
-28
lines changed

4 files changed

+55
-28
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedHeader.razor‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
<p>@Localizer["FixedHeaderP"]</p>
1717
<p>@Localizer["FixedHeaderP1"]</p>
1818
</section>
19-
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" Height="200" IsBordered="true" IsFixedHeader="true">
19+
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" Height="200"
20+
IsBordered="true" IsFixedHeader="true"
21+
ShowToolbar="true" ShowDefaultButtons="false" ShowCardView="true">
2022
<TableColumns>
2123
<TableColumn @bind-Field="@context.DateTime" Width="180" />
2224
<TableColumn @bind-Field="@context.Name" Width="100" />
@@ -27,7 +29,9 @@
2729

2830
<DemoBlock Title="@Localizer["FixedWidthTitle"]" Introduction="@Localizer["FixedWidthIntro"]" Name="FixedHeaderWidth">
2931
<section ignore>@Localizer["FixedWidthP"]</section>
30-
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" IsBordered="true" IsMultipleSelect="true" Height="200" IsFixedHeader="true">
32+
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" Height="200"
33+
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true"
34+
ShowToolbar="true" ShowDefaultButtons="false" ShowCardView="true">
3135
<TableColumns>
3236
<TableColumn @bind-Field="@context.DateTime" Width="180" />
3337
<TableColumn @bind-Field="@context.Name" Width="100" />
@@ -38,9 +42,9 @@
3842

3943
<DemoBlock Title="@Localizer["AllowResizingTitle"]" Introduction="@Localizer["AllowResizingIntro"]" Name="AllowResizing">
4044
<section ignore>@((MarkupString)Localizer["AllowResizingP"].Value)</section>
41-
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table"
42-
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true"
43-
Height="200" AllowResizing="true">
45+
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" Height="200"
46+
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true" AllowResizing="true"
47+
ShowToolbar="true" ShowDefaultButtons="false" ShowCardView="true">
4448
<TableColumns>
4549
<TableColumn @bind-Field="@context.DateTime" Width="180" />
4650
<TableColumn @bind-Field="@context.Name" Width="100" />
@@ -59,8 +63,9 @@
5963
<Slider @bind-Value="Height" Min="300" Max="600"></Slider>
6064
</section>
6165
<div style="height: @($"{Height}px;")">
62-
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false"
63-
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true" AllowResizing="true">
66+
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table"
67+
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true" AllowResizing="true"
68+
ShowToolbar="true" ShowDefaultButtons="false" ShowColumnList="true" ShowRefresh="false" ShowCardView="true">
6469
<TableColumns>
6570
<TableColumn @bind-Field="@context.DateTime" Width="180" />
6671
<TableColumn @bind-Field="@context.Name" Width="100" />
@@ -94,12 +99,11 @@
9499

95100
@code {
96101
RenderFragment RenderTable() =>
97-
@<Table TItem="Foo" Items="@Items" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false"
98-
IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true" AllowResizing="true" RenderMode="TableRenderMode.Table">
99-
<TableColumns>
100-
<TableColumn @bind-Field="@context.DateTime" Width="180" />
101-
<TableColumn @bind-Field="@context.Name" Width="100" />
102-
<TableColumn @bind-Field="@context.Address" Width="900" />
103-
</TableColumns>
104-
</Table>;
102+
@<Table TItem="Foo" Items="@Items" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false" IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true" AllowResizing="true" RenderMode="TableRenderMode.Table">
103+
<TableColumns>
104+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
105+
<TableColumn @bind-Field="@context.Name" Width="100" />
106+
<TableColumn @bind-Field="@context.Address" Width="900" />
107+
</TableColumns>
108+
</Table>;
105109
}

‎src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,7 @@ private async Task OnSelectedRowsChanged()
367367
protected Task OnClickRefreshAsync() => QueryAsync();
368368

369369
/// <summary>
370-
///
370+
/// 点击 CardView 按钮回调方法
371371
/// </summary>
372372
/// <returns></returns>
373373
protected void OnClickCardView()
@@ -382,6 +382,7 @@ protected void OnClickCardView()
382382
TableRenderMode.Table => TableRenderMode.CardView,
383383
_ => TableRenderMode.Table
384384
};
385+
_viewChanged = true;
385386
StateHasChanged();
386387
}
387388

‎src/BootstrapBlazor/Components/Table/Table.razor.cs‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where
6565
/// </summary>
6666
protected string? WrapperClassName => CssBuilder.Default()
6767
.AddClass("table-shim", ActiveRenderMode == TableRenderMode.Table)
68-
.AddClass("table-card", ActiveRenderMode == TableRenderMode.CardView)
68+
.AddClass("table-card scroll", ActiveRenderMode == TableRenderMode.CardView)
6969
.AddClass("table-wrapper", IsBordered)
7070
.AddClass("is-clickable", ClickToSelect || DoubleClickToEdit || OnClickRowCallback != null || OnDoubleClickRowCallback != null)
7171
.AddClass("table-scroll scroll", !IsFixedHeader || FixedColumn)
@@ -381,6 +381,8 @@ private string GetSortTooltip(ITableColumn col) => SortName != col.GetFieldName(
381381

382382
private bool _breakPointChanged;
383383

384+
private bool _viewChanged;
385+
384386
private List<ColumnWidth> _clientColumnWidths = [];
385387

386388
private async Task OnBreakPointChanged(BreakPoint size)
@@ -928,6 +930,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
928930
await ProcessFirstRender();
929931
}
930932

933+
if(_viewChanged)
934+
{
935+
_viewChanged = false;
936+
await InvokeVoidAsync("toggleView", Id);
937+
}
938+
931939
if (_breakPointChanged)
932940
{
933941
_breakPointChanged = false;

‎src/BootstrapBlazor/Components/Table/Table.razor.js‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function reloadColumnWidth(tableName) {
2828

2929
export function reloadColumnOrder(tableName) {
3030
const key = `bb-table-column-order-${tableName}`
31-
return JSON.parse(localStorage.getItem(key)) || [];
31+
return JSON.parse(localStorage.getItem(key)) ?? [];
3232
}
3333

3434
export function saveColumnOrder(options) {
@@ -128,6 +128,7 @@ export function reset(id) {
128128
if (table.pages) {
129129
observer.observe(table.pages);
130130
}
131+
table.observer = observer;
131132
}
132133

133134
export function resetColumn(id) {
@@ -197,10 +198,21 @@ export function scrollTo(id, x = 0, y = 0, options = { behavior: 'smooth' }) {
197198
}
198199
}
199200

201+
export function toggleView(id) {
202+
const table = Data.get(id);
203+
destroyTable(table);
204+
205+
reset(id);
206+
}
207+
200208
export function dispose(id) {
201209
const table = Data.get(id)
202-
Data.remove(id)
210+
Data.remove(id);
211+
212+
destroyTable(table);
213+
}
203214

215+
const destroyTable = table => {
204216
if (table) {
205217
if (table.loopCheckHeightHandler) {
206218
cancelAnimationFrame(table.loopCheckHeightHandler);
@@ -215,7 +227,10 @@ export function dispose(id) {
215227

216228
disposeColumnDrag(table.columns)
217229
disposeDragColumns(table.dragColumns)
218-
EventHandler.off(table.element, 'click', '.col-copy');
230+
231+
if (table.element) {
232+
EventHandler.off(table.element, 'click', '.col-copy');
233+
}
219234

220235
if (table.handlers.setResizeHandler) {
221236
EventHandler.off(document, 'click', table.handlers.setResizeHandler);
@@ -224,7 +239,8 @@ export function dispose(id) {
224239
EventHandler.off(document, 'click', table.handlers.setColumnToolboxHandler);
225240
}
226241
if (table.observer) {
227-
table.observer.disconnect()
242+
table.observer.disconnect();
243+
table.observer = null;
228244
}
229245

230246
if (table.popovers) {
@@ -303,7 +319,7 @@ const setBodyHeight = table => {
303319
card.style.height = `calc(100% - ${bodyHeight}px)`
304320
}
305321
else {
306-
const body = table.body || table.tables[0];
322+
const body = table.body ?? table.tables[0];
307323
if (bodyHeight > 0 && body && body.parentNode) {
308324
body.parentNode.style.height = `calc(100% - ${bodyHeight}px)`
309325
}
@@ -551,10 +567,10 @@ const setResizeListener = table => {
551567
colWidth = getWidth(col.closest('th'))
552568
}
553569
tableWidth = getWidth(col.closest('table'))
554-
originalX = e.clientX || e.touches[0].clientX
570+
originalX = e.clientX ?? e.touches[0].clientX
555571
},
556572
e => {
557-
const eventX = e.clientX || e.changedTouches[0].clientX
573+
const eventX = e.clientX ?? e.changedTouches[0].clientX
558574
const marginX = eventX - originalX
559575
table.tables.forEach(t => {
560576
const group = [...t.children].find(i => i.nodeName === 'COLGROUP')
@@ -763,8 +779,7 @@ const setCopyColumn = table => {
763779
}
764780

765781
const disposeColumnDrag = columns => {
766-
columns = columns || []
767-
columns.forEach(col => {
782+
(columns ?? []).forEach(col => {
768783
EventHandler.off(col, 'click');
769784
EventHandler.off(col, 'dblclick');
770785
EventHandler.off(col, 'mousedown');
@@ -831,8 +846,7 @@ const setDraggable = table => {
831846
}
832847

833848
const disposeDragColumns = columns => {
834-
columns = columns || []
835-
columns.forEach(col => {
849+
(columns ?? []).forEach(col => {
836850
EventHandler.off(col, 'dragstart')
837851
EventHandler.off(col, 'dragend')
838852
EventHandler.off(col, 'drop')

0 commit comments

Comments
 (0)