JqGrid - làm cách nào để hiển thị cột của các hộp kiểm tùy chọn?

Question

Tôi đang sử dụng jqGrid miễn phí.

Trang web của tôi là;

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

Và jquery của tôi là;

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

Bây giờ những gì tôi muốn là cột của hộp kiểm ở cuối lưới. Tiêu đề cột là "Mở" và một hộp kiểm sẽ hiển thị CHỈ nếu InspectionStatusId = 1 có nghĩa là "Không bắt đầu". Theo mặc định, hộp kiểm sẽ được bỏ chọn. Sẽ có một hộp kiểm trong tiêu đề mà nếu được người dùng đánh dấu sẽ đặt tất cả các hộp kiểm hiện hữu chỉ trên trang đó để đánh dấu, và nếu chưa được sửa thì sẽ bỏ chọn tất cả các hộp kiểm CHỈ trên trang đó. Trong chân trang sẽ có một nút cho cột này sẽ nói "Lưu". Khi được bấm, một cuộc gọi ajax sẽ được thực hiện cho máy chủ đang thay đổi trạng thái từ "Không Sẵn sàng" thành "Mở". Khi hoàn thành, tất cả các hộp kiểm được đánh dấu sẽ biến mất.

Tôi không thấy bất kỳ mã ví dụ nào về việc một cái gì đó như thế này đã được thực hiện.

Answer 1

cột:

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

formatter:

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

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

}; 

kích hoạt trên nhấp chuột:

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 
}