mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-16 01:41:14 +08:00
43664736f7
* feat(module: table): support fixed header & columns * fix layout of the fixed columns & header * fix scrollbar hidding * header and body sync scroll * fix column width calc * fix demo pagesize * fix docs
221 lines
9.8 KiB
C#
221 lines
9.8 KiB
C#
@namespace AntDesign
|
|
@inherits AntDomComponentBase
|
|
@using AntDesign.TableModels
|
|
@typeparam TItem
|
|
|
|
<div class="ant-table-wrapper">
|
|
<Spin Spinning="Loading">
|
|
@if (!HidePagination && PaginationPosition.Contains("top"))
|
|
{
|
|
<Pagination Class="@_paginationClass"
|
|
Total="Total"
|
|
PageSize="PageSize"
|
|
PageIndex="PageIndex"
|
|
OnPageIndexChange="HandlePageIndexChange"
|
|
OnPageSizeChange="HandlePageSizeChange" />
|
|
}
|
|
<CascadingValue Value="@this" TValue="ITable">
|
|
<CascadingValue Name="IsInitialize" Value="true">
|
|
<CascadingValue Value="@ColumnContext">
|
|
@ChildContent(_fieldModel)
|
|
</CascadingValue>
|
|
</CascadingValue>
|
|
<div class="@ClassMapper.Class">
|
|
@if (TitleTemplate != null || Title != null)
|
|
{
|
|
<div class="ant-table-title">
|
|
@if (TitleTemplate != null)@TitleTemplate else @Title
|
|
</div>
|
|
}
|
|
<div class="ant-table-container">
|
|
@if (ScrollY != null)
|
|
{
|
|
<div class="ant-table-header" style="overflow: hidden;" @ref="_tableHeaderRef">
|
|
<table style="table-layout: fixed;">
|
|
@colGroup((this, true))
|
|
@header(this)
|
|
</table>
|
|
</div>
|
|
<div class="ant-table-body" @ref="_tableBodyRef" style="@(ScrollX!=null?" overflow: auto scroll;":"overflow-y: scroll;") max-height: @((CssSizeLength)ScrollY)">
|
|
<table style="@(ScrollX!=null?$" width: {(CssSizeLength)ScrollX}; min-width: 100%;":"") table-layout: fixed;">
|
|
@colGroup((this, false))
|
|
<tbody class="ant-table-tbody">
|
|
<tr aria-hidden="true" class="ant-table-measure-row" style="height: 0px; font-size: 0px;">
|
|
<CascadingValue Name="IsMeasure" Value="true">
|
|
@ChildContent(_fieldModel)
|
|
</CascadingValue>
|
|
</tr>
|
|
@body((this, _showItems, 0))
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
else if (ScrollX != null)
|
|
{
|
|
<div class="ant-table-content" @ref="_tableBodyRef" style="overflow: auto hidden;">
|
|
<table style="width: @((CssSizeLength)ScrollX); min-width: 100%; table-layout: fixed;">
|
|
@colGroup((this, true))
|
|
@header(this)
|
|
<tbody class="ant-table-tbody">
|
|
<tr aria-hidden="true" class="ant-table-measure-row" style="height: 0px; font-size: 0px;">
|
|
<CascadingValue Name="IsMeasure" Value="true">
|
|
@ChildContent(_fieldModel)
|
|
</CascadingValue>
|
|
</tr>
|
|
@body((this, _showItems, 0))
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="ant-table-content">
|
|
<table style="table-layout: auto;">
|
|
@colGroup((this, true))
|
|
@header(this)
|
|
<tbody class="ant-table-tbody">
|
|
@body((this, _showItems, 0))
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
</div>
|
|
@if (FooterTemplate != null || Footer != null)
|
|
{
|
|
<div class="ant-table-footer">
|
|
@if (FooterTemplate != null)@FooterTemplate else @Footer
|
|
</div>
|
|
}
|
|
</div>
|
|
</CascadingValue>
|
|
@if (!HidePagination && PaginationPosition.Contains("bottom"))
|
|
{
|
|
<Pagination Class="@_paginationClass"
|
|
Total="Total"
|
|
PageSize="PageSize"
|
|
PageIndex="PageIndex"
|
|
OnPageIndexChange="HandlePageIndexChange"
|
|
OnPageSizeChange="HandlePageSizeChange" />
|
|
}
|
|
</Spin>
|
|
</div>
|
|
|
|
@code
|
|
{
|
|
RenderFragment<Table<TItem>> header = table =>
|
|
@<Template>
|
|
<thead class="ant-table-thead">
|
|
<tr>
|
|
<CascadingValue Name="IsHeader" Value="true">
|
|
@if (table.ExpandTemplate != null)
|
|
{
|
|
<th class="ant-table-cell ant-table-row-expand-icon-cell"></th>
|
|
}
|
|
<CascadingValue Value="@table.ColumnContext">
|
|
@if (_fieldModel != null)
|
|
{
|
|
@table.ChildContent(_fieldModel)
|
|
}
|
|
</CascadingValue>
|
|
</CascadingValue>
|
|
@if (table.ScrollY != null)
|
|
{
|
|
<th class="ant-table-cell @(table._hasFixRight?"ant-table-cell-fix-right":"") ant-table-cell-scrollbar" style="@(table._hasFixRight?"position: sticky; right: 0px;":"")"></th>
|
|
}
|
|
</tr>
|
|
</thead>
|
|
</Template>;
|
|
|
|
RenderFragment<(Table<TItem> table, bool header)> colGroup = ctx =>
|
|
@<Template>
|
|
@{
|
|
var table = ctx.table;
|
|
var header = ctx.header;
|
|
}
|
|
<CascadingValue Name="IsColGroup" Value="true">
|
|
<CascadingValue Value="@table.ColumnContext">
|
|
<colgroup>
|
|
@if (table.ExpandTemplate != null)
|
|
{
|
|
<col class="ant-table-expand-icon-col">
|
|
}
|
|
@if (_fieldModel != null)
|
|
{
|
|
@table.ChildContent(_fieldModel)
|
|
}
|
|
@if (table.ScrollY != null && header)
|
|
{
|
|
<col style="width: @((CssSizeLength)table.ScrollBarWidth); min-width: @((CssSizeLength)table.ScrollBarWidth);" />
|
|
}
|
|
</colgroup>
|
|
</CascadingValue>
|
|
</CascadingValue>
|
|
</Template>;
|
|
|
|
RenderFragment<(Table<TItem> table, IEnumerable<TItem> showItems, int level)> body = context =>
|
|
@<Template>
|
|
@{
|
|
var table = context.table;
|
|
var showItems = context.showItems;
|
|
var level = context.level;
|
|
}
|
|
|
|
@if (table.Total <= 0)
|
|
{
|
|
<tr class="ant-table-placeholder">
|
|
<td colspan="@table.ColumnContext.Columns.Count" class="ant-table-cell">
|
|
<Empty Simple />
|
|
</td>
|
|
</tr>
|
|
}
|
|
else if (showItems != null && table.ColumnContext.Columns.Count > 0)
|
|
{
|
|
for (int i = 0; i < showItems.Count(); i++)
|
|
{
|
|
var rowIndex = table.PageSize * (table.PageIndex - 1) + i + 1;
|
|
var data = showItems.ElementAt(i);
|
|
var cacheKey = data.GetHashCode();
|
|
if (!table._dataSourceCache.ContainsKey(cacheKey))
|
|
{
|
|
table._dataSourceCache[cacheKey] = new RowData<TItem>(rowIndex, table.PageIndex, data);
|
|
}
|
|
var currentRowData = table._dataSourceCache[cacheKey] ?? new RowData<TItem>(rowIndex, table.PageIndex, data);
|
|
var hasChildren = table.TreeChildren(data)?.Any() == true;
|
|
currentRowData.CacheKey = cacheKey;
|
|
currentRowData.Level = level;
|
|
currentRowData.HasChildren = hasChildren;
|
|
<CascadingValue Value="table.ColumnContext">
|
|
<CascadingValue Value="currentRowData" Name="RowData">
|
|
<tr @attributes="@(new Dictionary<string,object> { {"onclick", _callbackFactory.Create(table, () => table.RowClick(currentRowData)) } })"
|
|
data-row-key="@(rowIndex-1)" class="ant-table-row ant-table-row-level-@level @(currentRowData.Selected ? "ant-table-row-selected" : "")">
|
|
@if (table.ExpandTemplate != null)
|
|
{
|
|
<td class="ant-table-cell ant-table-row-expand-icon-cell">
|
|
@if (table.RowExpandable(currentRowData))
|
|
{
|
|
<button type="button" @attributes="@(new Dictionary<string,object>() { {"onclick",_callbackFactory.Create(table,() => ToggleExpandRow(currentRowData)) } })"
|
|
class="ant-table-row-expand-icon @(currentRowData.Expanded?"ant-table-row-expand-icon-expanded":"ant-table-row-expand-icon-collapsed")"
|
|
aria-label="@(currentRowData.Expanded?table.Locale.Collapse:table.Locale.Expand)"></button>
|
|
}
|
|
</td>
|
|
}
|
|
@table.ChildContent(data)
|
|
</tr>
|
|
</CascadingValue>
|
|
</CascadingValue>
|
|
@if (hasChildren && currentRowData.Expanded)
|
|
{
|
|
@table.body((table, table.TreeChildren(data), level + 1));
|
|
}
|
|
@if (table.ExpandTemplate != null && table.RowExpandable(currentRowData))
|
|
{
|
|
<tr class="ant-table-expanded-row ant-table-expanded-row-level-1" style="@(currentRowData.Expanded?"":"display: none;")">
|
|
<td colspan="@(table.ColumnContext.Columns.Count+1)" class="ant-table-cell">
|
|
@table.ExpandTemplate(currentRowData)
|
|
</td>
|
|
</tr>
|
|
}
|
|
}
|
|
}
|
|
</Template>;
|
|
} |