jquery - JqG​​rid - 如何显示一列可选复选框？

Question

我正在使用免费的 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 调用，将状态从“未就绪”更改为“打开”。完成后，所有勾选的复选框都会消失。

我没有看到任何完成此类操作的示例代码。

Answer 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
 }