如何使用内联编辑将Commit和Cancel按钮移动到MudTable的左侧

Question

MudTable的内联编辑功能具有提交和取消按钮。默认情况下，在编辑模式下，它们被放置在行的右侧。由于有大量的列，我想将这些按钮放在行的左侧，以便在没有水平滚动的情况下更容易查看。我已经在MudBlazor文档和其他网站上搜索了移动这些文件的方法，但都是空的。我还在浏览器中查看了F12开发人员工具，看看是否有一种方法可以操作类属性。但是，MudBlazor会渲染一个额外的列。似乎任何解决方案都必须在渲染之前采取行动。

是否可以将提交和取消按钮移动到行的开头？如果是，它是如何完成或配置的？

Answer 1

似乎没有将内联编辑按钮移动到左侧的内置方法。然而，您可以通过用一组自定义的替换它们来实现您想要的结果。

示例

代码

https://try.mudblazor.com/snippet/GOcGaMvHhDrZAoTo

@inject ISnackbar Snackbar
<MudTable @ref=@table
T="Element"
Items="@elements"
Hover="true"
SortLabel="Sort By"
OnCommitEditClick="@(() => Snackbar.Add("Commit Edit Handler Invoked"))"
RowEditPreview="BackupItem"
RowEditCancel="ResetItemToOriginalValues"
CommitEditIcon=""
SelectedItemChanged="OnSelectedItemChanged">
<ColGroup>
<col />
<col style="width:20%;" />
<col style="width:50%;" />
<col style="width:30%" />
</ColGroup>
<HeaderContent>
<MudTh></MudTh>
<MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Number)">Nr</MudTableSortLabel></MudTh>
<MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Name)">Name</MudTableSortLabel></MudTh>
<MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<Element, object>(x=>x.Age)">Age</MudTableSortLabel></MudTh>
</HeaderContent>
<RowTemplate>
<MudTd></MudTd>
<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Age">@context.Age</MudTd>
</RowTemplate>
<RowEditingTemplate>
<MudTd>
<div style="display: flex; gap: 10px;">
<MudTooltip Text="Commit Edit">
<MudIconButton Size="Size.Small" Icon="@Icons.Material.Filled.Check" OnClick="OnCommitEditButtonClicked"></MudIconButton>
</MudTooltip>
<MudTooltip Text="Cancel Edit">
<MudIconButton Size="Size.Small" Icon="@Icons.Material.Filled.Cancel" OnClick="OnCancelEditButtonClicked"></MudIconButton>
</MudTooltip>
</div>
</MudTd>
<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Name">
<MudTextField @bind-Value="@context.Name" Required />
</MudTd>
<MudTd DataLabel="Age">
<MudNumericField @bind-Value="@context.Age" Required />
</MudTd>
</RowEditingTemplate>
<PagerContent>
<MudTablePager />
</PagerContent>
</MudTable>
@code {
private MudTable<Element> table;
private Element elementBeforeEdit;
private IEnumerable<Element> elements = new List<Element>();
protected override void OnInitialized()
{
elements = GetData();
}
private void OnCommitEditButtonClicked(MouseEventArgs e)
{
table.RowEditCommit?.Invoke(table.SelectedItem);
table.OnCommitEditClick.InvokeAsync(e);
table.SetSelectedItem(null);
}
private void OnCancelEditButtonClicked(MouseEventArgs e)
{
table.RowEditCancel?.Invoke(table.SelectedItem);
table.OnCancelEditClick.InvokeAsync(e);
table.SetSelectedItem(null);
}
private void OnSelectedItemChanged(object element)
{
table.SetEditingItem(element);
}
private void BackupItem(object element)
{
elementBeforeEdit = new()
{
Name = ((Element)element).Name,
Age = ((Element)element).Age,
};
}
private void ResetItemToOriginalValues(object element)
{
((Element)element).Name = elementBeforeEdit.Name;
((Element)element).Age = elementBeforeEdit.Age;
}
private IEnumerable<Element> GetData()
{
return new List<Element>()
{
new() { Number = 1, Name = "Peter Parker", Age = 16 },
new() { Number = 2, Name = "Bruce Wayne", Age = 31 },
new() { Number = 3, Name = "Clark Kent", Age = 31 },
new() { Number = 4, Name = "Barry Allen", Age = 29 },
new() { Number = 5, Name = "Tony Stark", Age = 52 },
};
}

class Element
{
public int Number { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
}

解释

要隐藏现有按钮，请确保取消按钮已禁用，并将CommitEditIcon值设置为""。

要添加自定义提交/编辑按钮，请添加一个新的表列，并在RowEditingTemplate中添加所需的按钮。之后，添加按钮的提交/取消逻辑(参考上面的代码示例(，就这样了

Answer 2

这可以通过<MudTable>中的ApplyButtonPosition标志来实现。默认行为为<MudTable ApplyButtonPosition="TableApplyButtonPosition.End">，其中编辑应用按钮位于右侧。把它放在左边(这就是问题所要求的(，把它改为TableApplyButtonPosition.Start。取消编辑按钮也将位于应用编辑按钮所在的位置。查看MudBlazor文档，了解更多信息和选项！