ant-design-blazor/components/table/Table.razor

195 lines
8.2 KiB
C#
Raw Normal View History

@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">
<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;">
<table style="table-layout: fixed;">
@colGroup(this)
@header(this)
</table>
</div>
<div class="ant-table-body" style="overflow-y: scroll; max-height: @ScrollY;">
<table style="table-layout: fixed;">
@colGroup(this)
<tbody class="ant-table-tbody">
<tr aria-hidden="true" class="ant-table-measure-row" style="height: 0px;">
@for (var i = 0; i < ColumnContext.Columns.Count; i++)
{
<td style="padding: 0px; border: 0px; height: 0px;"></td>
}
</tr>
@body((this, _showItems, 0))
</tbody>
</table>
</div>
}
else
{
<div class="ant-table-content">
<table style="table-layout: auto;">
@colGroup(this)
@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 ant-table-cell-scrollbar"></th>
}
</tr>
</thead>
</Template>;
RenderFragment<Table<TItem>> colGroup = table =>
@<Template>
<CascadingValue Name="IsColGroup" Value="true">
<colgroup>
@if (table.ExpandTemplate != null)
{
<col class="ant-table-expand-icon-col">
}
@if (_fieldModel != null)
{
@table.ChildContent(_fieldModel)
}
@if (table.ScrollY != null)
{
<col style="width: @(table.ScrollBarWidth)px; min-width: @(table.ScrollBarWidth)px;" />
}
</colgroup>
</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-id="@rowIndex" 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>;
}