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調用，將狀態從「未就緒」更改爲「打開」。完成後，所有打勾的複選框將消失。

我沒有看到任何這樣的事情已經完成的示例代碼。

來源

2017-06-13 arame3333

請參閱[的jsfiddle（https://jsfiddle.net/8912dnzy） – zakhefron

謝謝：

ActiveActionFormatter = function(value, options, row) { var type = value ? "check" : "uncheck"; return '<span class="action-button action-active action-{0}"></span>'.format(type); };

上點擊觸發那個扎克菲龍。它走向我想要的東西。我想如果一個國家被訪問，複選框不會再出現。另外我注意到，當我回頁面時，複選框不再勾選。 – arame3333

柱：

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

格式：

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 
}

來源

2017-06-29 17:46:41

JqGrid - 如何顯示一列可選複選框？

回答

相關問題