Skip to content

Commit 8768786

Browse files
ArgoZhangArgoZhang
authored
feat(Table): add RenderContentRow improve readability (dotnetcore#6917)
* refactor: 增加 TableContentColumn * refactor: 使用 TableContentCell 组件渲染 * feat: 增加 CellClass 逻辑 * refactor: 移除 TableContentCell 组件 * doc: 移除过期注释 * doc: 更正单词拼写错误 * doc: 更正单词拼写错误 * refactor: 重构代码提高可读性 * refactor: 重构代码
1 parent 605aca1 commit 8768786

File tree

3 files changed

+145
-89
lines changed

3 files changed

+145
-89
lines changed

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

Lines changed: 46 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -725,11 +725,6 @@
725725
<div class="@LineCellClassString">@GetLineNo(item)</div>
726726
</td>
727727
}
728-
@{
729-
var index = 0;
730-
var colIndex = 0;
731-
var isInCell = InCellMode && SelectedRows.FirstOrDefault() == item;
732-
}
733728
@if (ShowExtendButtons && IsExtendButtonsInRowHeader)
734729
{
735730
@RenderRowExtendButtons(item)
@@ -741,94 +736,59 @@
741736
}
742737
else
743738
{
744-
@foreach (var col in GetVisibleColumns())
745-
{
746-
if (colIndex > 1)
747-
{
748-
colIndex--;
749-
continue;
750-
}
751-
var cellClass = "";
752-
var colSpan = 0;
753-
string? value = null;
754-
RenderFragment? valueTemplate = null;
755-
if (col.OnCellRender != null)
756-
{
757-
var cell = new TableCellArgs { Row = item, ColumnName = col.GetFieldName() };
758-
col.OnCellRender(cell);
759-
cellClass = cell.Class;
760-
colSpan = cell.Colspan;
761-
valueTemplate = cell.ValueTemplate;
762-
value = cell.Value;
763-
colIndex = colSpan;
764-
}
765-
<td colspan="@GetColSpan(colSpan)" class="@GetFixedCellClassString(col, cellClass)" style="@GetFixedCellStyleString(col)">
766-
@{
767-
var isFirstColOfTree = IsTree && index++ == 0;
768-
var degree = 0;
769-
var isExpend = false;
770-
var hasChildren = false;
771-
if (isFirstColOfTree)
772-
{
773-
var treeItem = TreeNodeCache.Find(TreeRows, item, out degree);
774-
if(treeItem != null)
775-
{
776-
isExpend = treeItem.IsExpand;
777-
hasChildren = treeItem.HasChildren;
778-
}
779-
}
780-
var hesTreeChildren = isFirstColOfTree && hasChildren;
781-
}
782-
<DynamicElement TagName="div" TriggerClick="@hesTreeChildren"
783-
OnClick="@ToggleTreeRow(item)" StopPropagation="hesTreeChildren"
784-
class="@GetCellClassString(col, hesTreeChildren, isInCell)" style="@GetCellStyleString(col)">
785-
@if (isFirstColOfTree)
786-
{
787-
<div class="is-node" style="@GetTreeStyleString(degree)">
788-
@if (hesTreeChildren)
789-
{
790-
<i class="@GetTreeClassString(isExpend)"></i>
791-
}
792-
</div>
793-
}
794-
@if (IsExcel)
795-
{
796-
@RenderExcelCell(col, item, ItemChangedType.Update)
797-
}
798-
else if(isInCell)
799-
{
800-
@RenderCell(col, EditModel, AddInCell ? ItemChangedType.Add : ItemChangedType.Update)
801-
}
802-
else
803-
{
804-
var triggerDoubleClick = OnDoubleClickCellCallback != null;
805-
<DynamicElement TagName="div" TriggerDoubleClick="triggerDoubleClick" GenerateElement="false"
806-
OnDoubleClick="TriggerDoubleClickCell(col, item)" StopPropagation="true"
807-
class="@GetDoubleClickCellClassString(triggerDoubleClick)">
808-
@if (valueTemplate != null)
809-
{
810-
@valueTemplate
811-
}
812-
else if (value != null)
813-
{
814-
@value
815-
}
816-
else
817-
{
818-
@GetValue(col, item)
819-
}
820-
</DynamicElement>
821-
}
822-
</DynamicElement>
823-
</td>
824-
}
739+
@RenderContentRow(item);
825740
}
826741
@if (ShowExtendButtons && !IsExtendButtonsInRowHeader)
827742
{
828743
@RenderRowExtendButtons(item)
829744
}
830745
</DynamicElement>;
831746

747+
RenderFragment<TableContentCellContext<TItem>> RenderContentCell => context =>
748+
@<td colspan="@GetColSpan(context.Colspan)" class="@GetFixedCellClassString(context.Col, context.CellClass)" style="@GetFixedCellStyleString(context.Col)">
749+
<DynamicElement TagName="div" TriggerClick="@context.HasTreeChildren"
750+
OnClick="@ToggleTreeRow(context.Item)" StopPropagation="context.HasTreeChildren"
751+
class="@GetCellClassString(context.Col, context.HasTreeChildren, context.IsInCell)" style="@GetCellStyleString(context.Col)">
752+
@if (context.IsFirstColOfTree)
753+
{
754+
<div class="is-node" style="@GetTreeStyleString(context.Degree)">
755+
@if (context.HasTreeChildren)
756+
{
757+
<i class="@GetTreeClassString(context.IsExpand)"></i>
758+
}
759+
</div>
760+
}
761+
@if (IsExcel)
762+
{
763+
@RenderExcelCell(context.Col, context.Item, ItemChangedType.Update)
764+
}
765+
else if(context.IsInCell)
766+
{
767+
@RenderCell(context.Col, EditModel, AddInCell ? ItemChangedType.Add : ItemChangedType.Update)
768+
}
769+
else
770+
{
771+
var triggerDoubleClick = OnDoubleClickCellCallback != null;
772+
<DynamicElement TagName="div" TriggerDoubleClick="triggerDoubleClick" GenerateElement="false"
773+
OnDoubleClick="TriggerDoubleClickCell(context.Col, context.Item)" StopPropagation="true"
774+
class="@GetDoubleClickCellClassString(triggerDoubleClick)">
775+
@if (context.ValueTemplate != null)
776+
{
777+
@context.ValueTemplate
778+
}
779+
else if (context.Value != null)
780+
{
781+
@context.Value
782+
}
783+
else
784+
{
785+
@GetValue(context.Col, context.Item)
786+
}
787+
</DynamicElement>
788+
}
789+
</DynamicElement>
790+
</td>;
791+
832792
RenderFragment<PlaceholderContext> RenderPlaceholderRow => context =>
833793
@<tr>
834794
@if (IsMultipleSelect)

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

Lines changed: 68 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1305,10 +1305,7 @@ protected async Task LoopQueryAsync()
13051305
try
13061306
{
13071307
AutoRefreshCancelTokenSource ??= new();
1308-
// 自动刷新功能
13091308
await Task.Delay(AutoRefreshInterval, AutoRefreshCancelTokenSource.Token);
1310-
1311-
// 不调用 QueryAsync 防止出现 Loading 动画 保持屏幕静止
13121309
await QueryAsync();
13131310
StateHasChanged();
13141311
}
@@ -1367,6 +1364,74 @@ protected RenderFragment GetValue(ITableColumn col, TItem item) => builder =>
13671364
};
13681365
#endregion
13691366

1367+
private RenderFragment RenderContentRow(TItem item) => builder =>
1368+
{
1369+
var index = 0;
1370+
var colIndex = 0;
1371+
var isInCell = InCellMode && SelectedRows.FirstOrDefault() == item;
1372+
1373+
foreach (var col in GetVisibleColumns())
1374+
{
1375+
if (colIndex > 1)
1376+
{
1377+
// 合并单元格情况
1378+
colIndex--;
1379+
continue;
1380+
}
1381+
1382+
// 获得单元格参数
1383+
var cellArgs = GetCellArgs(item, col, ref colIndex);
1384+
1385+
// 获得树节点信息
1386+
var (isTreeCol, degree, isExpand, hasChildren) = GetTreeInfo(item, index++);
1387+
var hasTreeChildren = isTreeCol && hasChildren;
1388+
1389+
var context = new TableContentCellContext<TItem>()
1390+
{
1391+
Item = item,
1392+
Col = col,
1393+
Colspan = cellArgs.Colspan,
1394+
CellClass = cellArgs.Class,
1395+
Value = cellArgs.Value,
1396+
ValueTemplate = cellArgs.ValueTemplate,
1397+
HasTreeChildren = hasTreeChildren,
1398+
IsInCell = isInCell,
1399+
Degree = degree,
1400+
IsExpand = isExpand,
1401+
IsFirstColOfTree = isTreeCol
1402+
};
1403+
1404+
builder.AddContent(0, RenderContentCell(context));
1405+
}
1406+
};
1407+
1408+
private static TableCellArgs GetCellArgs(TItem item, ITableColumn col, ref int colIndex)
1409+
{
1410+
var cell = new TableCellArgs { Row = item, ColumnName = col.GetFieldName() };
1411+
col.OnCellRender?.Invoke(cell);
1412+
colIndex = cell.Colspan;
1413+
return cell;
1414+
}
1415+
1416+
private (bool isFirstColOfTree, int degree, bool isExpand, bool hasChildren) GetTreeInfo(TItem item, int index)
1417+
{
1418+
var isFirstColOfTree = IsTree && index == 0;
1419+
if (!isFirstColOfTree)
1420+
{
1421+
return (false, 0, false, false);
1422+
}
1423+
1424+
var treeItem = TreeNodeCache.Find(TreeRows, item, out var degree);
1425+
var isExpand = false;
1426+
var hasChildren = false;
1427+
if (treeItem != null)
1428+
{
1429+
isExpand = treeItem.IsExpand;
1430+
hasChildren = treeItem.HasChildren;
1431+
}
1432+
return (isFirstColOfTree, degree, isExpand, hasChildren);
1433+
}
1434+
13701435
/// <summary>
13711436
/// 渲染单元格方法
13721437
/// </summary>

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Components;
7+
8+
readonly record struct TableContentCellContext<TItem>
9+
{
10+
public TItem Item { get; init; }
11+
12+
public int Colspan { get; init; }
13+
14+
public ITableColumn Col { get; init; }
15+
16+
public string? CellClass { get; init; }
17+
18+
public bool HasTreeChildren { get; init; }
19+
20+
public bool IsInCell { get; init; }
21+
22+
public int Degree { get; init; }
23+
24+
public bool IsExpand { get; init; }
25+
26+
public bool IsFirstColOfTree { get; init; }
27+
28+
public RenderFragment? ValueTemplate { get; init; }
29+
30+
public string? Value { get; init; }
31+
}

0 commit comments

Comments
 (0)