ant-design-blazor/site/AntDesign.Docs/Demos/Components/Table/demo/EditRow.razor
James Yeung 0c13eb7198 docs(module: table): add editable cell/row demo (#1152)
* feat(module: table): add editable cell demo

* add editable row de
2021-02-22 11:29:56 +08:00

106 lines
2.8 KiB
C#

<Table DataSource="listOfData" TItem="ItemData" RowClassName="@(_=>"editable-row")" Bordered TableLayout="fixed">
<ChildContent Context="data">
<Column TData="string" Title="Name">
@if (!editCache[data.Id].edit)
{
@data.Name
}
else
{
<Input @bind-Value="editCache[data.Id].data.Name" />
}
</Column>
<Column TData="string" Title="Age">
@if (!editCache[data.Id].edit)
{
@data.Age
}
else
{
<Input @bind-Value="editCache[data.Id].data.Age" />
}
</Column>
<Column TData="string" Title="Address">
@if (!editCache[data.Id].edit)
{
@data.Address
}
else
{
<Input @bind-Value="editCache[data.Id].data.Address" />
}
</Column>
<ActionColumn Title="Action">
@if (!editCache[data.Id].edit)
{
<a @onclick="() => startEdit(data.Id)">Edit</a>
}
else
{
<a @onclick="() => saveEdit(data.Id)" class="save">Save</a>
<Popconfirm Title="Sure to cancel?"
OnConfirm="() => cancelEdit(data.Id)"
OkText="Yes"
CancelText="No">
<a>Cancel</a>
</Popconfirm>
}
</ActionColumn>
</ChildContent>
</Table>
<style>
.save {
margin-right: 8px;
}
</style>
@code{
class ItemData
{
public string Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public string Address { get; set; }
};
IDictionary<string, (bool edit, ItemData data)> editCache = new Dictionary<string, (bool edit, ItemData data)>();
ItemData[] listOfData = { };
int i = 0;
string editId;
void startEdit(string id)
{
var data = editCache[id];
data.edit = true;
editCache[id] = data;
}
void cancelEdit(string id)
{
var data = listOfData.FirstOrDefault(item => item.Id == id);
editCache[id] = new(false, data);
}
void saveEdit(string id)
{
var data = listOfData.FirstOrDefault(item => item.Id == id);
editCache[id] = new(false, data);
}
void updateEditCache()
{
listOfData.ForEach(item =>
{
editCache[item.Id] = new(false, item);
});
}
protected override void OnInitialized()
{
listOfData = Enumerable.Range(0, 100).Select(i => new ItemData { Id = $"{i}", Name = $"Edrward {i}", Age = 32, Address = $"London Park no. {i}" }).ToArray();
updateEditCache();
}
}