JqGrid - Wie zeige ich eine Spalte mit optionalen Checkboxen an?

Question

Ich benutze das freie jqGrid.

Meine Webseite ist;

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

Und meine jquery ist;

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

Nun was ich will ist eine Spalte mit Kontrollkästchen am Ende des Rasters. Der Spaltentitel ist "Open" und eine Checkbox wird NUR angezeigt, wenn InspectionStatusId = 1, was "Nicht gestartet" bedeutet. Standardmäßig ist das Kontrollkästchen deaktiviert. Es wird eine Checkbox in der Kopfzeile geben, die alle markierten Checkboxen nur auf dieser Seite ankreuzen wird, wenn sie angekreuzt ist, und wenn sie deaktiviert wird, werden alle Checkboxen NUR auf dieser Seite deaktiviert. In der Fußzeile wird es eine Schaltfläche für diese Spalte geben, die "Speichern" sagen wird. Wenn Sie darauf klicken, wird ein Ajax-Anruf an den Server gesendet, der den Status von "Nicht bereit" zu "Offen" ändert. Wenn dies abgeschlossen ist, werden alle markierten Kontrollkästchen ausgeblendet.

Ich sehe keinen Beispielcode von wo so etwas getan worden ist.

Answer 1

Säule:

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

Formatierer:

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

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

}; 

Trigger auf Klick:

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 
}