.NET Core项目中jqGrid复选框列不显示问题求助

我之前在jqGrid 5.x版本里也碰到过类似的复选框不渲染的问题，结合你的场景（Edge浏览器、jqGrid v5.4.0、jQuery UI v1.12.1），给你几个针对性的排查和解决方案：

1. 确认jqGrid的核心配置是否正确 #

jqGrid实现首列复选框有两种方式，你可以根据需求选择，先检查配置是否到位：

方式一：自动生成全局多选列（推荐） #

如果需要表头和每行都显示复选框，最直接的是开启jqGrid的multiselect属性，不需要手动在colModel里定义列：

$("#yourGridId").jqGrid({
    url: "/YourController/GetGridData",
    datatype: "json",
    colModel: [
        // 这里只定义业务列，复选框列会自动生成在首列
        { name: "Name", index: "Name", width: 200 },
        { name: "Description", index: "Description", width: 300 }
        // 其他业务列...
    ],
    multiselect: true, // 关键：开启自动多选列
    multiboxonly: false, // 可选：是否需要点击复选框才选中行，默认false
    // 其他配置：pager、rowNum等...
});

方式二：自定义复选框列 #

如果需要更灵活的控制（比如绑定自定义字段），可以手动在colModel首列定义复选框格式：

colModel: [
    { 
        name: "IsSelected", 
        index: "IsSelected", 
        width: 60, 
        formatter: "checkbox", // 指定复选框格式器
        align: "center",
        editable: true,
        edittype: "checkbox",
        editoptions: { value: "True:False" }, // 对应数据的取值映射
        sortable: false
    },
    // 其他业务列...
]

注意：这种方式要确保后端返回的JSON数据里IsSelected字段是true/false或者"True"/"False"格式，否则无法正确渲染。

2. 检查资源加载顺序是否正确 #

jqGrid依赖jQuery和jQuery UI，加载顺序错误会导致渲染异常，必须严格按照以下顺序引入：

<!-- 先引入jQuery -->
<script src="~/lib/jquery/jquery.min.js"></script>
<!-- 再引入jQuery UI -->
<script src="~/lib/jquery-ui/jquery-ui.min.js"></script>
<link href="~/lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<!-- 最后引入jqGrid的CSS和JS -->
<link href="~/lib/jqgrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/lib/jqgrid/jquery.jqGrid.min.js"></script>

3. 修复input类型被篡改的问题 #

你提到手动修改input类型为checkbox后能显示，说明渲染时可能有脚本干扰或者jqGrid的小bug，可在loadComplete事件里强制修正：

$("#yourGridId").jqGrid({
    // 其他配置...
    loadComplete: function() {
        // 遍历首列的按钮元素，修正为复选框
        $(this).find(".jqgrid-multiselect input[type='button']")
               .attr("type", "checkbox");
    }
});

4. 排查样式隐藏问题 #

用Edge开发者工具检查复选框元素：

• 查看是否有display: none、visibility: hidden等样式隐藏了元素
• 检查.ui-jqgrid .ui-jqgrid-htable .jqgrid-multiselect类的样式，确保没有被自定义样式覆盖

示例完整代码参考（test.ts） #

$(function() {
    $("#testGrid").jqGrid({
        url: "/Home/GetTestData",
        datatype: "json",
        mtype: "GET",
        colModel: [
            { name: "Id", index: "Id", hidden: true },
            { name: "Name", index: "Name", width: 200 },
            { name: "Status", index: "Status", width: 150 }
        ],
        multiselect: true, // 开启自动复选框列
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: "#testPager",
        sortname: "Name",
        viewrecords: true,
        sortorder: "asc",
        caption: "测试表格",
        loadComplete: function() {
            // 可选：修复类型问题
            $(this).find(".jqgrid-multiselect input[type='button']").attr("type", "checkbox");
        }
    });
});

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