mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-06 05:57:39 +08:00
0c13eb7198
* feat(module: table): add editable cell demo * add editable row de
91 lines
2.4 KiB
C#
91 lines
2.4 KiB
C#
<div>
|
|
<Button OnClick="addRow" Type="primary" Style="margin-bottom:16px">
|
|
Add a row
|
|
</Button>
|
|
<Table DataSource="listOfData" RowClassName="@(_=>"editable-row")" Bordered>
|
|
<Column Width="30%" DataIndex="@nameof(context.Name)" TData="string">
|
|
@if (editId == context.Id)
|
|
{
|
|
<Input Type="text" @bind-Value="context.Name" OnBlur="stopEdit" AutoFocus />
|
|
}
|
|
else
|
|
{
|
|
<div class="editable-cell-value-wrap" style="padding-right:24px" @onclick="()=>startEdit(context.Id)">
|
|
@context.Name
|
|
</div>
|
|
}
|
|
</Column>
|
|
<Column DataIndex="@nameof(context.Age)" TData="string"></Column>
|
|
<Column DataIndex="@nameof(context.Address)" TData="string"></Column>
|
|
<ActionColumn Title="Action">
|
|
<Popconfirm Title="Sure to delete?"
|
|
OnConfirm="()=> deleteRow(context.Id)"
|
|
OkText="Yes"
|
|
CancelText="No">
|
|
<a>Delete</a>
|
|
</Popconfirm>
|
|
</ActionColumn>
|
|
</Table>
|
|
</div>
|
|
|
|
<style>
|
|
.editable-cell {
|
|
position: relative;
|
|
}
|
|
|
|
.editable-cell-value-wrap {
|
|
padding: 5px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.editable-row:hover .editable-cell-value-wrap {
|
|
padding: 4px 11px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
[data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
|
|
border: 1px solid #434343;
|
|
}
|
|
</style>
|
|
|
|
@using System.Text.Json;
|
|
@code{
|
|
int i = 0;
|
|
string editId;
|
|
record ItemData(string Id, string Age, string Address)
|
|
{
|
|
public string Name { get; set; }
|
|
};
|
|
|
|
ItemData[] listOfData = { };
|
|
|
|
void addRow()
|
|
{
|
|
listOfData = listOfData.Append(new($"{i}", "32", $"London, Park Lane no. {i}") { Name = $"Edward King {i}" });
|
|
i++;
|
|
}
|
|
|
|
void deleteRow(string id)
|
|
{
|
|
listOfData = listOfData.Where(d => d.Id != id).ToArray();
|
|
}
|
|
|
|
void startEdit(string id)
|
|
{
|
|
editId = id;
|
|
}
|
|
|
|
void stopEdit()
|
|
{
|
|
var editedData = listOfData.FirstOrDefault(x => x.Id == editId);
|
|
Console.WriteLine(JsonSerializer.Serialize(editedData));
|
|
editId = null;
|
|
}
|
|
|
|
protected override void OnInitialized()
|
|
{
|
|
addRow();
|
|
addRow();
|
|
}
|
|
} |