Skip to content

Commit 6519f31

Browse files
authored
feat(Table): update reset column width/order method (#7850)
* revert: 撤销脚本更改 * feat: 增加重新刷新读取客户端配置逻辑 * chore: bump version 10.5.1-beta06
1 parent 06f7d1e commit 6519f31

File tree

4 files changed

+84
-103
lines changed

4 files changed

+84
-103
lines changed

src/BootstrapBlazor/BootstrapBlazor.csproj

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>10.5.1-beta05</Version>
4+
<Version>10.5.1-beta06</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

src/BootstrapBlazor/Components/Table/Table.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<CascadingValue Value="this" IsFixed="true">
99
@TableColumns?.Invoke(CreateTItem())
1010
</CascadingValue>
11-
@if (FirstRender)
11+
@if (_firstRender)
1212
{
1313
if (ShowSkeleton)
1414
{

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

Lines changed: 67 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1091,11 +1091,7 @@ private void OnInitParameters()
10911091
SearchModel ??= CreateSearchModel();
10921092
}
10931093

1094-
/// <summary>
1095-
/// <para lang="zh">获得/设置 是否为第一次 Render</para>
1096-
/// <para lang="en">Gets or sets Whether it is the first Render</para>
1097-
/// </summary>
1098-
protected bool FirstRender { get; set; } = true;
1094+
private bool _firstRender = true;
10991095

11001096
/// <summary>
11011097
/// <para lang="zh">获得/设置 自动刷新 CancellationTokenSource 实例</para>
@@ -1140,7 +1136,7 @@ protected override void OnParametersSet()
11401136
IsTree = false;
11411137
}
11421138

1143-
if (!FirstRender)
1139+
if (!_firstRender)
11441140
{
11451141
// 动态列模式
11461142
ResetDynamicContext();
@@ -1153,6 +1149,21 @@ protected override void OnParametersSet()
11531149
_searchItems = null;
11541150
}
11551151

1152+
/// <summary>
1153+
/// <inheritdoc/>
1154+
/// </summary>
1155+
/// <returns></returns>
1156+
protected override async Task OnParametersSetAsync()
1157+
{
1158+
await base.OnParametersSetAsync();
1159+
1160+
if (!_firstRender)
1161+
{
1162+
// 重新读取浏览器设置
1163+
await OnTableColumnReset();
1164+
}
1165+
}
1166+
11561167
/// <summary>
11571168
/// <inheritdoc/>
11581169
/// </summary>
@@ -1237,6 +1248,54 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
12371248
}
12381249
}
12391250

1251+
private async Task OnTableColumnReset()
1252+
{
1253+
// 动态列模式
1254+
var cols = new List<ITableColumn>();
1255+
if (DynamicContext != null && typeof(TItem).IsAssignableTo(typeof(IDynamicObject)))
1256+
{
1257+
cols.AddRange(DynamicContext.GetColumns());
1258+
}
1259+
else if (AutoGenerateColumns)
1260+
{
1261+
cols.AddRange(Utility.GetTableColumns<TItem>(Columns));
1262+
}
1263+
else
1264+
{
1265+
cols.AddRange(Columns);
1266+
}
1267+
1268+
if (ColumnOrderCallback != null)
1269+
{
1270+
cols = [.. ColumnOrderCallback(cols)];
1271+
}
1272+
1273+
await ReloadColumnOrdersFromBrowserAsync(cols);
1274+
1275+
// 查看是否开启列宽序列化
1276+
await ReloadColumnWidthFromBrowserAsync(cols);
1277+
1278+
if (OnColumnCreating != null)
1279+
{
1280+
await OnColumnCreating(cols);
1281+
}
1282+
1283+
InternalResetVisibleColumns(cols);
1284+
1285+
await ReloadColumnVisibleFromBrowserAsync();
1286+
1287+
Columns.Clear();
1288+
Columns.AddRange(cols.OrderFunc());
1289+
1290+
// set default sortName
1291+
var col = Columns.Find(i => i is { Sortable: true, DefaultSort: true });
1292+
if (col != null)
1293+
{
1294+
SortName = col.GetFieldName();
1295+
SortOrder = col.DefaultSortOrder;
1296+
}
1297+
}
1298+
12401299
private async Task OnTableRenderAsync(bool firstRender)
12411300
{
12421301
if (firstRender)
@@ -1372,52 +1431,9 @@ private async Task ProcessFirstRender()
13721431
IsLoading = true;
13731432

13741433
// 设置渲染完毕
1375-
FirstRender = false;
1376-
1377-
// 动态列模式
1378-
var cols = new List<ITableColumn>();
1379-
if (DynamicContext != null && typeof(TItem).IsAssignableTo(typeof(IDynamicObject)))
1380-
{
1381-
cols.AddRange(DynamicContext.GetColumns());
1382-
}
1383-
else if (AutoGenerateColumns)
1384-
{
1385-
cols.AddRange(Utility.GetTableColumns<TItem>(Columns));
1386-
}
1387-
else
1388-
{
1389-
cols.AddRange(Columns);
1390-
}
1434+
_firstRender = false;
13911435

1392-
if (ColumnOrderCallback != null)
1393-
{
1394-
cols = [.. ColumnOrderCallback(cols)];
1395-
}
1396-
1397-
await ReloadColumnOrdersFromBrowserAsync(cols);
1398-
1399-
// 查看是否开启列宽序列化
1400-
await ReloadColumnWidthFromBrowserAsync(cols);
1401-
1402-
if (OnColumnCreating != null)
1403-
{
1404-
await OnColumnCreating(cols);
1405-
}
1406-
1407-
InternalResetVisibleColumns(cols);
1408-
1409-
await ReloadColumnVisibleFromBrowserAsync();
1410-
1411-
Columns.Clear();
1412-
Columns.AddRange(cols.OrderFunc());
1413-
1414-
// set default sortName
1415-
var col = Columns.Find(i => i is { Sortable: true, DefaultSort: true });
1416-
if (col != null)
1417-
{
1418-
SortName = col.GetFieldName();
1419-
SortOrder = col.DefaultSortOrder;
1420-
}
1436+
await OnTableColumnReset();
14211437

14221438
// 获取是否自动查询参数值
14231439
_autoQuery = IsAutoQueryFirstRender;

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

Lines changed: 15 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -536,41 +536,24 @@ const setExcelKeyboardListener = table => {
536536
}
537537

538538
const resetTableWidth = table => {
539-
const { options: { scrollWidth } } = table;
540539
table.tables.forEach(t => {
541540
const group = [...t.children].find(i => i.nodeName === 'COLGROUP')
542541
if (group) {
543-
const colgroup = getLastColgroup(t, group);
544-
if (colgroup) {
545-
colgroup.style = null;
546-
}
547-
const width = getTableWidthByColumnGroup(t, 100);
548-
if (width >= t.parentElement.offsetWidth + scrollWidth) {
549-
t.style.width = `${width}px`;
550-
}
551-
else {
552-
t.style.width = null;
553-
}
542+
let width = 0;
543+
[...group.children].forEach(col => {
544+
let colWidth = parseInt(col.style.width);
545+
if (isNaN(colWidth)) {
546+
colWidth = 100;
547+
}
548+
width += colWidth;
549+
})
550+
t.style.width = `${width}px`;
554551

555552
saveColumnWidth(table);
556553
}
557554
})
558555
}
559556

560-
const getLastColgroup = (table, group) => {
561-
const p = table.parentElement;
562-
if (p) {
563-
const length = group.children.length;
564-
if (p.classList.contains("table-fixed-header")) {
565-
return group.children[length - 2];
566-
}
567-
else {
568-
return group.children[length - 1];
569-
}
570-
}
571-
return null;
572-
}
573-
574557
const setResizeListener = table => {
575558
if (table.options.showColumnWidthTooltip) {
576559
table.handlers.setResizeHandler = e => {
@@ -1064,33 +1047,15 @@ const saveColumnWidth = table => {
10641047
}));
10651048
}
10661049

1067-
const getTableWidthByColumnGroup = (table, defaultWidth) => {
1068-
return [...table.querySelectorAll('colgroup col')]
1069-
.map((col, index) => getColumnRenderWidth(table, col, index, defaultWidth))
1070-
.reduce((accumulator, val) => accumulator + val, 0);
1071-
}
1072-
1073-
const getColumnRenderWidth = (table, col, index, defaultWidth) => {
1074-
let width = parseFloat(col.style.width);
1075-
if (!isNaN(width) && width > 0) {
1076-
return width;
1077-
}
1078-
1079-
const header = table.querySelectorAll('thead > tr:last-child > th').item(index);
1080-
width = header?.offsetWidth ?? 0;
1081-
if (width > 0) {
1082-
return width;
1083-
}
1084-
1085-
const row = [...table.querySelectorAll('tbody > tr')].find(i => !i.classList.contains('is-detail'));
1086-
width = row?.children.item(index)?.offsetWidth ?? 0;
1087-
return width > 0 ? width : defaultWidth;
1088-
}
1089-
10901050
const setTableDefaultWidth = table => {
10911051
if (table.tables.length > 0 && isVisible(table.tables[0])) {
10921052
const { scrollWidth, columnMinWidth } = table.options;
1093-
const tableWidth = getTableWidthByColumnGroup(table.tables[0], columnMinWidth);
1053+
const tableWidth = [...table.tables[0].querySelectorAll('col')]
1054+
.map(i => {
1055+
const colWidth = parseFloat(i.style.width);
1056+
return isNaN(colWidth) ? columnMinWidth : colWidth;
1057+
})
1058+
.reduce((accumulator, val) => accumulator + val, 0);
10941059

10951060
if (tableWidth > table.el.offsetWidth) {
10961061
table.tables[0].style.setProperty('width', `${tableWidth}px`);

0 commit comments

Comments
 (0)