mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-03 12:37:40 +08:00
feat(module: table): add OnRowClick to Table component (#785)
* Add OnRowClick to Table component This adds a new Parameter to the Table component called OnRowClick that will trigger whenever a user clicks on any of the rows in the table. * Updated Table row click to pass RowData * refactor: clean code Co-authored-by: ElderJames <shunjiey@hotmail.com>
This commit is contained in:
parent
4f4b8ea767
commit
456c0819ba
@ -157,23 +157,24 @@ RenderFragment<(Table<TItem> table, IEnumerable<TItem> showItems, int level)> bo
|
||||
currentRowData.CacheKey = cacheKey;
|
||||
currentRowData.Level = level;
|
||||
currentRowData.HasChildren = hasChildren;
|
||||
<CascadingValue Value="table.ColumnContext">
|
||||
<CascadingValue Value="currentRowData" Name="RowData">
|
||||
<tr 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,()=>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=""></button>
|
||||
}
|
||||
</td>
|
||||
}
|
||||
@table.ChildContent(data)
|
||||
</tr>
|
||||
</CascadingValue>
|
||||
<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=""></button>
|
||||
}
|
||||
</td>
|
||||
}
|
||||
@table.ChildContent(data)
|
||||
</tr>
|
||||
</CascadingValue>
|
||||
</CascadingValue>
|
||||
@if (hasChildren && currentRowData.Expanded)
|
||||
{
|
||||
@table.body((table, table.TreeChildren(data), level + 1));
|
||||
|
@ -49,6 +49,9 @@ namespace AntDesign
|
||||
[Parameter]
|
||||
public EventCallback<QueryModel<TItem>> OnChange { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public EventCallback<RowData<TItem>> OnRowClick { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public bool Loading { get; set; }
|
||||
|
||||
@ -229,7 +232,6 @@ namespace AntDesign
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
base.OnParametersSet();
|
||||
@ -248,9 +250,17 @@ namespace AntDesign
|
||||
|
||||
protected override bool ShouldRender() => this._shouldRender;
|
||||
|
||||
private void ToggleExpandRow(RowData<TItem> rowData)
|
||||
private static void ToggleExpandRow(RowData<TItem> rowData)
|
||||
{
|
||||
rowData.Expanded = !rowData.Expanded;
|
||||
}
|
||||
|
||||
private void RowClick(RowData<TItem> item)
|
||||
{
|
||||
if (OnRowClick.HasDelegate)
|
||||
{
|
||||
OnRowClick.InvokeAsync(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,7 @@
|
||||
@using System.ComponentModel
|
||||
@using AntDesign.TableModels
|
||||
|
||||
<Table DataSource="@data">
|
||||
<Table TItem="Data" DataSource="@data" OnRowClick="OnRowClick">
|
||||
<Column @bind-Field="@context.Name">
|
||||
<a>@context.Name</a>
|
||||
</Column>
|
||||
@ -30,9 +31,9 @@
|
||||
</Table>
|
||||
|
||||
@code{
|
||||
Data[] data =
|
||||
Data[] data = new Data[]
|
||||
{
|
||||
new Data()
|
||||
new()
|
||||
{
|
||||
Key = "1",
|
||||
Name = "John Brown",
|
||||
@ -40,7 +41,7 @@
|
||||
Address = "New York No. 1 Lake Park",
|
||||
Tags = new[] {"nice", "developer"}
|
||||
},
|
||||
new Data()
|
||||
new()
|
||||
{
|
||||
Key = "2",
|
||||
Name = "Jim Green",
|
||||
@ -48,7 +49,7 @@
|
||||
Address = "London No. 1 Lake Park",
|
||||
Tags = new[] { "loser"}
|
||||
},
|
||||
new Data()
|
||||
new()
|
||||
{
|
||||
Key = "3",
|
||||
Name = "Joe Black",
|
||||
@ -75,4 +76,9 @@
|
||||
[DisplayName("Tags")]
|
||||
public string[] Tags { get; set; }
|
||||
}
|
||||
|
||||
void OnRowClick(RowData<Data> row)
|
||||
{
|
||||
Console.WriteLine($"row {row.Data.Key} was clicked");
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user