JqGrid - 如何显示一列可选复选框？答案

【问题标题】：JqGrid - how do I display a column of optional checkboxes?JqGrid - 如何显示一列可选复选框？
【发布时间】：2017-11-15 11:24:25
【问题描述】：

我正在使用免费的 jqGrid。

我的网页是；

<div id="hiddenFields"
     data-sir-get-properties-list="@Url.Action("GetAllProperties", "DataContract")"></div>
<section id="SelectContract" class="contractSelectedPage" style="clear: both;">
    <fieldset>
        <legend>@ViewBag.Title</legend>
        <div id="divLoading" class="has-error">Loading ...</div>
        <table id="grid"></table>
        <div id="pager"></div>
    </fieldset>
</section>

我的 jquery 是；

$(function () {
    getGrid();
});

var populateGrid = function (data) {
    var grid = $("#grid");
    grid.jqGrid({
        data: data,
        colNames: ["", "", "Address", "", "", "Inspection Visits", "Category", "Status"],
        colModel: [
            { name: 'InspectionId', index: 'InspectionId', width: 65, align: 'center', hidden: true },
            { name: 'InspectionStatusId', index: 'InspectionStatusId', width: 65, align: 'center', hidden: true },
            { name: "AddressLine1", label: "AddressLine1", width: 250, align: "left" },
            { name: "AddressLine2", label: "AddressLine", width: 250, align: "left" },
            { name: "Postcode", label: "Postcode", width: 80, align: "left" },
            { name: "NumberOfVisits", label: "NumberOfVisits", width: 70, align: "center" },
            { name: "Category", label: "Category", width: 100, align: "left" },
            { name: "Status", label: "Status", width: 100, align: "left" }
        ],
        cmTemplate: { autoResizable: true },
        rowNum: 20,
        pager: "#pager",
        shrinkToFit: true,
        rownumbers: true,
        sortname: "AddressLine",
        viewrecords: true
    });

    grid.jqGrid("filterToolbar", {
        beforeSearch: function () {
            return false; // allow filtering
        }
    }).jqGrid("gridResize");
    $("#divLoading").hide();
}

var getGrid = function () {
    var url = GetHiddenField("sir-get-properties-list");
    var callback = populateGrid;
    dataService.getList(url, callback);
}

现在我想要的是网格末尾的一列复选框。列标题为“打开”，仅当 InspectionStatusId = 1 表示“未开始”时才会显示复选框。默认情况下，该复选框将被取消选中。标题中将有一个复选框，如果用户选中该复选框，则会将仅在该页面上的所有可见复选框设置为选中，如果未选中，则仅取消选中该页面上的所有复选框。在页脚中将有一个此列的按钮，上面写着“保存”。单击时，将对服务器进行 ajax 调用，将状态从“未就绪”更改为“打开”。完成后，所有勾选的复选框都会消失。

我没有看到任何示例代码说明这样的事情已经完成。

【问题讨论】：

参考JsFiddle
谢谢你的 Zakhefron。它在某种程度上达到了我想要的效果。我想要的是，如果访问一个国家，复选框不再出现。我还注意到，当我翻页和转发时，复选框不再勾选。

标签： jquery jqgrid

【解决方案1】：

列：

{ name: 'Open', index: 'Open', width: 55, align: "center", formatter: ActiveActionFormatter },

格式化程序：

ActiveActionFormatter = function(value, options, row) {
    var type = value ? "check" : "uncheck";

    return '<span class="action-button action-active action-{0}"></span>'.format(type);

};

点击触发：

 grid.delegate('.action-active', 
               'click',  
               function () { 
                  activeItem($(this).data("id"), grid); 
               });

 function activeItem(id, grid) {
    //anything you need to do to change that value, maybe an AJAX call
 }

【讨论】：