通过编辑按钮切换 MudTable 内联编辑

Question

当您单击图标时，我试图让 mudtable 进入内联模式。目前，当您单击任何行时都会发生这种情况。

<MudSwitch @bind-Checked="@ronly" Color="Color.Tertiary">Read Only</MudSwitch>

我使用以下命令来切换显示内联编辑的功能，但如果启用它，您仍然需要单击表格才能显示它。

我也采取了下面的方法

<MudButton Variant="Variant.Filled" OnClick="editTableBTN" StartIcon="@Icons.Material.Filled.Delete" Color="Color.Error">edit</MudButton>

   private void editTableBTN()
    {
        ronly = false;
        $("#myTable>tbody>tr:first").trigger('click');
}

这可以在单击时进行编辑，然后自动单击表格。在此之后，如果我们切换仅它会按预期工作，但我觉得必须有更好的方法。有人有什么建议吗？

Answer 1

一种方法是向该行添加编辑图标。

1. 从只读表开始
2. 使用 a<MudIcon>代替<MudButton>**。
3. 在图标单击事件中将表设置为 ReadOnly=false

<MudTable>
    ReadOnly="@MainGrid_ReadOnly"
    <HeaderContent>
        ....
        <MudTh>Action</MudTh>
    </HeaderContent>
    <RowTemplate>
        ...
        <MudTd DataLabel="">
            <MudIcon Icon="@Icons.Material.Filled.Edit" Size="Size.Small" @onclick="@Edit" />
        </MudTd>
    </RowTemplate>
</MudTable>

@code {
    private MudTable<AlertSetting> MainGrid { get; set; }
    private bool MainGrid_ReadOnly = true;

    private void Edit()
    {
        MainGrid_ReadOnly = false;
        //...
    }
}