Blazor QuickGrid：实现行双击或添加编辑按钮的技术问询

问题一：实现QuickGrid行双击功能 #

预发布版QuickGrid确实没有内置的双击行事件，但可以通过**自定义行模板（RowTemplate）**手动绑定双击事件，实现成本很低。

核心思路是用RowTemplate替代默认行渲染，在<tr>元素上绑定@ondblclick事件，把当前行的用户对象传递给模态框打开方法。示例代码如下：

<QuickGrid Items="@users" Filterable="true">
    <RowTemplate>
        <tr @ondblclick="() => OpenEditModal(context)">
            <td>@context.Id</td>
            <td>@context.Name</td>
            <td>@context.Email</td>
            <!-- 其他列内容 -->
        </tr>
    </RowTemplate>
</QuickGrid>

<!-- 编辑模态框示例 -->
<div class="modal @(isEditModalOpen ? "show d-block" : "d-none")">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <InputText @bind-Value="@selectedUser.Name" class="form-control mb-2" />
                <InputText @bind-Value="@selectedUser.Email" class="form-control" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" @onclick="() => isEditModalOpen = false">取消</button>
                <button class="btn btn-primary" @onclick="SaveUser">保存</button>
            </div>
        </div>
    </div>
</div>

@code {
    private List<User> users = new();
    private bool isEditModalOpen;
    private User selectedUser;

    private void OpenEditModal(User user)
    {
        selectedUser = user;
        isEditModalOpen = true;
    }

    private void SaveUser()
    {
        // 实现保存逻辑
        isEditModalOpen = false;
    }

    // 示例User模型
    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }
}

如果需要保留自动生成的列（比如用PropertyColumn），可以同时搭配ColumnDefinitions和RowTemplate，RowTemplate里的<tr>负责绑定事件，列内容会自动填充。

问题二：添加Edit按钮唤起编辑模态框 #

如果双击方案不符合需求，添加编辑按钮是更直接的选择，且完全不会和已有的筛选功能冲突（筛选仅影响数据源的显示，按钮属于列模板，独立运行）。

示例代码如下，通过TemplateColumn添加编辑按钮列：

<QuickGrid Items="@users" Filterable="true">
    <PropertyColumn Property="u => u.Id" />
    <PropertyColumn Property="u => u.Name" />
    <PropertyColumn Property="u => u.Email" />
    <!-- 新增编辑按钮列 -->
    <TemplateColumn Title="操作">
        <button class="btn btn-sm btn-primary" 
                @onclick="() => OpenEditModal(context)">
            Edit
        </button>
    </TemplateColumn>
</QuickGrid>

<!-- 编辑模态框（和问题一的模态框代码一致） -->
<div class="modal @(isEditModalOpen ? "show d-block" : "d-none")">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <InputText @bind-Value="@selectedUser.Name" class="form-control mb-2" />
                <InputText @bind-Value="@selectedUser.Email" class="form-control" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" @onclick="() => isEditModalOpen = false">取消</button>
                <button class="btn btn-primary" @onclick="SaveUser">保存</button>
            </div>
        </div>
    </div>
</div>

@code {
    private List<User> users = new();
    private bool isEditModalOpen;
    private User selectedUser;

    private void OpenEditModal(User user)
    {
        selectedUser = user;
        isEditModalOpen = true;
    }

    private void SaveUser()
    {
        // 实现保存逻辑
        isEditModalOpen = false;
    }

    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }
}

筛选功能不会增加复杂度，因为QuickGrid的筛选是基于数据源的过滤，编辑按钮的点击事件只依赖当前行的context对象，过滤后的行依然能正确传递用户对象。

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