如何在ShieldUI ASP.NET MVC的Grid中添加复选框及全选功能

1. 配置Grid复选框列 #

在Grid的列定义中新增自定义复选框列，表头放置全选框，每行放置行选中框：

@(Html.ShieldGrid()
    .Name("customGrid")
    .Columns(columns =>
    {
        // 复选框专属列
        columns.Add()
            .Width("50px")
            .HeaderTemplate("<input type='checkbox' id='selectAllCb' />")
            .Template("<input type='checkbox' class='row-cb' value='<#= 主键字段名 #>' />");
        // 原有业务列
        columns.Add().Field("Field1").Title("列1");
        columns.Add().Field("Field2").Title("列2");
    })
    // 保留你原有其他Grid配置（数据源、分页、排序等）
    .Events(ev => ev.DataBound("gridDataBoundHandler"))
)

2. 编写交互逻辑JS代码 #

实现全选、反选、行选中联动全选框状态的逻辑：

// 全选框点击事件
$(document).on('change', '#selectAllCb', function() {
    const checkedStatus = $(this).prop('checked');
    $('.row-cb').prop('checked', checkedStatus);
    // 可在此处添加选中后的业务逻辑，比如收集选中ID
    collectSelectedIds();
});

// 行复选框点击事件，联动更新全选框状态
$(document).on('change', '.row-cb', function() {
    const totalRow = $('.row-cb').length;
    const checkedRow = $('.row-cb:checked').length;
    $('#selectAllCb').prop('checked', totalRow === checkedRow);
    collectSelectedIds();
});

// Grid数据加载完成后重置选中状态
function gridDataBoundHandler() {
    $('#selectAllCb').prop('checked', false);
}

// 工具方法：收集所有选中行的主键ID
function collectSelectedIds() {
    const ids = [];
    $('.row-cb:checked').each(function() {
        ids.push($(this).val());
    });
    // 此处可处理选中的ID，比如提交给后端
    return ids;
}

3. 可选扩展：点击整行联动选中复选框 #

如果需要点击行任意位置都能触发选中，可补充如下逻辑：

$(document).on('click', '.sui-grid tr:not(.sui-grid-header-row)', function(e) {
    // 避免点击复选框本身时重复触发
    if (!$(e.target).hasClass('row-cb')) {
        $(this).find('.row-cb').prop('checked', !$(this).find('.row-cb').prop('checked')).trigger('change');
    }
});

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