2020-12-05 18:44:38 +08:00
|
|
|
|
@namespace AntDesign
|
2020-05-30 01:46:41 +08:00
|
|
|
|
@inherits AntDomComponentBase
|
2020-07-10 17:57:20 +08:00
|
|
|
|
@using AntDesign.TableModels
|
2020-05-30 01:46:41 +08:00
|
|
|
|
@typeparam TItem
|
|
|
|
|
|
2020-06-02 19:15:15 +08:00
|
|
|
|
<div class="ant-table-wrapper">
|
|
|
|
|
<Spin Spinning="Loading">
|
2020-06-16 14:44:21 +08:00
|
|
|
|
@if (!HidePagination && PaginationPosition.Contains("top"))
|
2020-06-02 19:15:15 +08:00
|
|
|
|
{
|
2020-07-02 20:30:01 +08:00
|
|
|
|
<Pagination Class="@_paginationClass"
|
2020-07-10 17:57:20 +08:00
|
|
|
|
Total="Total"
|
2020-06-03 00:22:10 +08:00
|
|
|
|
PageSize="PageSize"
|
2020-11-08 16:55:34 +08:00
|
|
|
|
PageIndex="PageIndex"
|
2020-06-03 00:22:10 +08:00
|
|
|
|
OnPageIndexChange="HandlePageIndexChange"
|
|
|
|
|
OnPageSizeChange="HandlePageSizeChange" />
|
2020-06-02 19:15:15 +08:00
|
|
|
|
}
|
2020-06-05 16:06:23 +08:00
|
|
|
|
<CascadingValue Value="@this" TValue="ITable">
|
2020-06-19 23:06:33 +08:00
|
|
|
|
<div class="@ClassMapper.Class">
|
2020-09-16 13:58:16 +08:00
|
|
|
|
@if (TitleTemplate != null || Title != null)
|
2020-07-10 17:57:20 +08:00
|
|
|
|
{
|
2020-06-29 15:52:28 +08:00
|
|
|
|
<div class="ant-table-title">
|
2020-09-16 13:58:16 +08:00
|
|
|
|
@if (TitleTemplate != null)@TitleTemplate else @Title
|
2020-06-29 15:52:28 +08:00
|
|
|
|
</div>
|
|
|
|
|
}
|
2020-06-05 16:06:23 +08:00
|
|
|
|
<div class="ant-table-container">
|
2020-06-19 23:06:33 +08:00
|
|
|
|
@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++)
|
2020-06-02 19:15:15 +08:00
|
|
|
|
{
|
2020-06-19 23:06:33 +08:00
|
|
|
|
<td style="padding: 0px; border: 0px; height: 0px;"></td>
|
2020-06-02 19:15:15 +08:00
|
|
|
|
}
|
2020-06-03 00:22:10 +08:00
|
|
|
|
</tr>
|
2020-11-09 22:17:27 +08:00
|
|
|
|
@body((this, _showItems, 0))
|
2020-06-19 23:06:33 +08:00
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
<div class="ant-table-content">
|
|
|
|
|
<table style="table-layout: auto;">
|
|
|
|
|
@colGroup(this)
|
|
|
|
|
@header(this)
|
|
|
|
|
<tbody class="ant-table-tbody">
|
2020-11-09 22:17:27 +08:00
|
|
|
|
@body((this, _showItems, 0))
|
2020-06-19 23:06:33 +08:00
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
2020-06-02 19:15:15 +08:00
|
|
|
|
</div>
|
2020-09-16 13:58:16 +08:00
|
|
|
|
@if (FooterTemplate != null || Footer != null)
|
2020-07-10 17:57:20 +08:00
|
|
|
|
{
|
2020-06-29 15:52:28 +08:00
|
|
|
|
<div class="ant-table-footer">
|
2020-09-16 13:58:16 +08:00
|
|
|
|
@if (FooterTemplate != null)@FooterTemplate else @Footer
|
2020-06-29 15:52:28 +08:00
|
|
|
|
</div>
|
|
|
|
|
}
|
2020-05-30 01:46:41 +08:00
|
|
|
|
</div>
|
2020-06-05 16:06:23 +08:00
|
|
|
|
</CascadingValue>
|
2020-06-16 14:44:21 +08:00
|
|
|
|
@if (!HidePagination && PaginationPosition.Contains("bottom"))
|
2020-06-02 19:15:15 +08:00
|
|
|
|
{
|
2020-07-02 20:30:01 +08:00
|
|
|
|
<Pagination Class="@_paginationClass"
|
2020-07-10 17:57:20 +08:00
|
|
|
|
Total="Total"
|
2020-06-03 00:22:10 +08:00
|
|
|
|
PageSize="PageSize"
|
2020-11-08 16:55:34 +08:00
|
|
|
|
PageIndex="PageIndex"
|
2020-06-03 00:22:10 +08:00
|
|
|
|
OnPageIndexChange="HandlePageIndexChange"
|
|
|
|
|
OnPageSizeChange="HandlePageSizeChange" />
|
2020-06-02 19:15:15 +08:00
|
|
|
|
}
|
|
|
|
|
</Spin>
|
2020-06-19 23:06:33 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@code
|
|
|
|
|
{
|
|
|
|
|
RenderFragment<Table<TItem>> header = table =>
|
|
|
|
|
@<Template>
|
|
|
|
|
<thead class="ant-table-thead">
|
|
|
|
|
<tr>
|
|
|
|
|
<CascadingValue Name="IsHeader" Value="true">
|
2020-11-08 23:29:05 +08:00
|
|
|
|
@if (table.ExpandTemplate != null)
|
|
|
|
|
{
|
|
|
|
|
<th class="ant-table-cell ant-table-row-expand-icon-cell"></th>
|
|
|
|
|
}
|
2020-06-19 23:06:33 +08:00
|
|
|
|
<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>
|
2020-11-08 23:29:05 +08:00
|
|
|
|
@if (table.ExpandTemplate != null)
|
|
|
|
|
{
|
|
|
|
|
<col class="ant-table-expand-icon-col">
|
|
|
|
|
}
|
2020-06-19 23:06:33 +08:00
|
|
|
|
@if (_fieldModel != null)
|
|
|
|
|
{
|
2020-07-10 17:57:20 +08:00
|
|
|
|
@table.ChildContent(_fieldModel)
|
2020-06-19 23:06:33 +08:00
|
|
|
|
}
|
|
|
|
|
@if (table.ScrollY != null)
|
|
|
|
|
{
|
|
|
|
|
<col style="width: @(table.ScrollBarWidth)px; min-width: @(table.ScrollBarWidth)px;" />
|
|
|
|
|
}
|
|
|
|
|
</colgroup>
|
|
|
|
|
</CascadingValue>
|
|
|
|
|
</Template>;
|
|
|
|
|
|
2020-11-09 22:17:27 +08:00
|
|
|
|
RenderFragment<(Table<TItem> table, IEnumerable<TItem> showItems, int level)> body = context =>
|
2020-06-19 23:06:33 +08:00
|
|
|
|
@<Template>
|
2020-11-09 22:17:27 +08:00
|
|
|
|
@{
|
|
|
|
|
var table = context.table;
|
|
|
|
|
var showItems = context.showItems;
|
|
|
|
|
var level = context.level;
|
|
|
|
|
}
|
2020-06-19 23:06:33 +08:00
|
|
|
|
|
2020-07-10 17:57:20 +08:00
|
|
|
|
@if (table.Total <= 0)
|
2020-06-19 23:06:33 +08:00
|
|
|
|
{
|
|
|
|
|
<tr class="ant-table-placeholder">
|
2020-08-11 15:27:15 +08:00
|
|
|
|
<td colspan="@table.ColumnContext.Columns.Count" class="ant-table-cell">
|
2020-06-19 23:06:33 +08:00
|
|
|
|
<Empty Simple />
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
}
|
2020-11-09 22:17:27 +08:00
|
|
|
|
else if (showItems != null && table.ColumnContext.Columns.Count > 0)
|
2020-06-19 23:06:33 +08:00
|
|
|
|
{
|
2020-11-09 22:17:27 +08:00
|
|
|
|
for (int i = 0; i < showItems.Count(); i++)
|
2020-06-19 23:06:33 +08:00
|
|
|
|
{
|
|
|
|
|
var rowIndex = table.PageSize * (table.PageIndex - 1) + i + 1;
|
2020-11-09 22:17:27 +08:00
|
|
|
|
var data = showItems.ElementAt(i);
|
2020-08-01 23:45:48 +08:00
|
|
|
|
var cacheKey = data.GetHashCode();
|
|
|
|
|
if (!table._dataSourceCache.ContainsKey(cacheKey))
|
2020-07-10 17:57:20 +08:00
|
|
|
|
{
|
2020-09-16 13:58:16 +08:00
|
|
|
|
table._dataSourceCache[cacheKey] = new RowData<TItem>(rowIndex, table.PageIndex, data);
|
2020-07-10 17:57:20 +08:00
|
|
|
|
}
|
2020-11-09 22:17:27 +08:00
|
|
|
|
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;
|
2020-11-18 17:10:35 +08:00
|
|
|
|
<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)) } })"
|
2020-12-05 18:44:38 +08:00
|
|
|
|
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>
|
2020-11-18 17:10:35 +08:00
|
|
|
|
}
|
|
|
|
|
</td>
|
|
|
|
|
}
|
|
|
|
|
@table.ChildContent(data)
|
|
|
|
|
</tr>
|
2020-06-19 23:06:33 +08:00
|
|
|
|
</CascadingValue>
|
2020-11-18 17:10:35 +08:00
|
|
|
|
</CascadingValue>
|
2020-11-09 22:17:27 +08:00
|
|
|
|
@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>
|
|
|
|
|
}
|
2020-06-19 23:06:33 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</Template>;
|
|
|
|
|
}
|