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 - 如何显示一列可选复选框？

回答

相关问题