MudBlazor MudTable行内编辑DateTime字段实现方案咨询

1. 定义数据模型 #

public class EventItem
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public DateTime EventTime { get; set; } = DateTime.Now;
}

2. 完整组件实现代码 #

@page "/table-datetime-inline-edit"
@using MudBlazor

<MudTable Items="@events" 
          EditMode="EditMode.Row" 
          OnCommitEditClick="HandleCommitEdit" 
          OnCancelEditClick="HandleCancelEdit"
          @ref="table"
          Hover="true" 
          Striped="true">
    <ToolBarContent>
        <MudButton OnClick="AddNewItem" Color="Color.Primary" Variant="Variant.Filled">添加新记录</MudButton>
    </ToolBarContent>
    <ColGroup>
        <col style="width: 100px;" />
        <col style="width: 200px;" />
        <col style="width: 280px;" />
        <col style="width: 160px;" />
    </ColGroup>
    <HeaderContent>
        <MudTh>ID</MudTh>
        <MudTh>事件名称</MudTh>
        <MudTh>事件时间</MudTh>
        <MudTh>操作</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Id</MudTd>
        <MudTd>@context.Name</MudTd>
        <MudTd>@context.EventTime.ToString("yyyy-MM-dd HH:mm:ss")</MudTd>
        <MudTd>
            <MudIconButton Icon="@Icons.Material.Filled.Edit" 
                           OnClick="() => table.EditRow(context)" 
                           Disabled="context.IsEditing" />
            <MudIconButton Icon="@Icons.Material.Filled.Delete" 
                           OnClick="() => DeleteItem(context)" />
        </MudTd>
    </RowTemplate>
    <EditRowTemplate>
        <MudTd>@context.Id</MudTd>
        <MudTd><MudTextField @bind-Value="context.Name" Required /></MudTd>
        <MudTd>
            <div class="d-flex gap-2 align-items-center">
                <MudDatePicker @bind-Value="_tempDate" DateFormat="yyyy-MM-dd" />
                <MudTimePicker @bind-Value="_tempTime" TimeFormat="HH:mm:ss" />
            </div>
        </MudTd>
        <MudTd>
            <MudIconButton Icon="@Icons.Material.Filled.Save" 
                           OnClick="() => table.SaveRow(context)" />
            <MudIconButton Icon="@Icons.Material.Filled.Close" 
                           OnClick="() => table.CancelEditRow(context)" />
        </MudTd>
    </EditRowTemplate>
</MudTable>

@code {
    private MudTable<EventItem> table = default!;
    private List<EventItem> events = new();
    private DateTime? _tempDate;
    private TimeSpan? _tempTime;

    protected override void OnInitialized()
    {
        // 初始化测试数据
        events = new List<EventItem>
        {
            new EventItem { Id = 1, Name = "项目评审会", EventTime = new DateTime(2024, 6, 10, 14, 30, 0) },
            new EventItem { Id = 2, Name = "技术培训", EventTime = new DateTime(2024, 6, 11, 9, 0, 0) }
        };
    }

    private void AddNewItem()
    {
        var newItem = new EventItem { Id = events.Max(x => x.Id) + 1 };
        table.AddRow(newItem);
    }

    private void DeleteItem(EventItem item)
    {
        events.Remove(item);
        StateHasChanged();
    }

    private void HandleCommitEdit(TableCommitEditEventArgs<EventItem> args)
    {
        // 合并日期与时间，更新数据源字段
        if (_tempDate.HasValue && _tempTime.HasValue)
        {
            args.Item.EventTime = _tempDate.Value.Date.Add(_tempTime.Value);
        }
        // 此处可添加数据库保存逻辑
    }

    private void HandleCancelEdit(TableCancelEditEventArgs<EventItem> args)
    {
        // 取消编辑时重置临时变量
        _tempDate = null;
        _tempTime = null;
    }

    // 进入编辑模式时，初始化日期时间选择器的默认值
    protected override void OnAfterRender(bool firstRender)
    {
        if (table.EditingItem != null)
        {
            _tempDate = table.EditingItem.EventTime;
            _tempTime = table.EditingItem.EventTime.TimeOfDay;
            StateHasChanged();
        }
    }
}

关键逻辑说明 #

• 用_tempDate和_tempTime临时存储编辑中的日期、时间值，避免直接修改源数据直到用户确认保存
• 进入编辑模式时，通过OnAfterRender将当前行的EventTime拆分为日期和时间，初始化选择器的默认值
• 提交编辑时，将日期与时间合并为完整的DateTime对象，赋值回模型的EventTime字段
• 取消编辑时清空临时变量，避免影响下一次编辑操作

内容的提问来源于stack exchange，提问作者Dinand