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);
}

现在我想要的是网格末尾的一列复选框。列标题为＆＃34; Open＆＃34;只有当InspectionStatusId = 1表示＆＃34;未启动＆＃34;时，才会显示一个复选框。默认情况下，该复选框将被取消选中。标题中将有一个复选框，如果用户勾选将仅在该页面上设置所有可见复选框以进行勾选，如果未勾选，则将仅取消该页面上的所有复选框。 在页脚中，此列的按钮将显示＆＃34; Save＆＃34;。单击时，将对服务器进行ajax调用，从而更改状态＆＃34; Not Ready＆＃34;到＆＃34;打开＆＃34;。完成后，所有勾选的复选框都将消失。

我没有看到任何像这样的事情的示例代码。

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
 }