jqgrid：多选和禁用检查（有条件）
我喜欢jqGrid，但有时事情似乎比它们应该更复杂。
我想要实现的是在每一行上都有一个复选框，以便用户可以选择要提交/处理的行。
但是，我需要阻止一些复选框，因为用户可能没有授权该特定行。
我试图设置multiselect: true然后我试图隐藏复选框：
loadComplete: function (data) { if (data.rows.length > 0) { for (var i = 0; i < data.rows.length; i++) { if (data.rows[i].cell[7] == 'false') { $("#jqg_OrdersGrid_" + data.rows[i].id).css("visibility", "hidden"); } } } },
它运行良好，但仍然， .jqGrid('getGridParam', 'selarrrow')给我选定的行，即使它们尚未被检查。
有没有其他方法可以启用/禁用复选框，以及如何知道已检查哪些复选框？
谢谢
我建议你禁用一些关于“禁用”属性的可选择的复选框。 要完全实施，您需要
- 在
loadComplete事件句柄中设置“disabled” - 另外，防止在
beforeSelectRow事件句柄中选择禁用的行 - 支持多选列的标题中的“全选”复选框实现
onSelectAll事件句柄，用于修复已禁用行的选择。
您可以在此处看到相应的演示。 代码中最重要的部分是：
var grid = $("#list10"), i; grid.jqGrid({ //... loadComplete: function() { // we make all even rows "protected", so that will be not selectable var cbs = $("tr.jqgrow > td > input.cbox:even", grid[0]); cbs.attr("disabled", "disabled"); }, beforeSelectRow: function(rowid, e) { var cbsdis = $("tr#"+rowid+".jqgrow > td > input.cbox:disabled", grid[0]); if (cbsdis.length === 0) { return true; // allow select the row } else { return false; // not allow select the row } }, onSelectAll: function(aRowids,status) { if (status) { // uncheck "protected" rows var cbs = $("tr.jqgrow > td > input.cbox:disabled", grid[0]); cbs.removeAttr("checked"); //modify the selarrrow parameter grid[0].p.selarrrow = grid.find("tr.jqgrow:has(td > input.cbox:checked)") .map(function() { return this.id; }) // convert to set of ids .get(); // convert to instance of Array } } );
更新： 免费的jqGrid支持hasMultiselectCheckBox回调，可用于创建多选复选框，而不是jqGrid的所有行。 可以使用rowattr另外禁用某些行。 结果，人们将以更简单的方式获得上述function。 对于带有本地数据的自由jqGrid，建议使用multiPageSelection: true选项（ datatype: "local"或loadonce: true ）。 选项multiPageSelection: true将在分页时保持数组selarrrow 。 它允许通过在selarrrow填充相应的id来“预先选择”某些行。 有关其他信息，请参阅答案的 更新部分和演示 答案 。
Oleg的答案很棒，我还会添加代码来取消选择已禁用的行，完成下面的onSelectAll函数。
onSelectAll: function(aRowids,status) { if (status) { // uncheck "protected" rows var cbs = $("tr.jqgrow > td > input.cbox:disabled", grid[0]); cbs.removeAttr("checked"); //modify the selarrrow parameter grid[0].p.selarrrow = grid.find("tr.jqgrow:has(td > input.cbox:checked)") .map(function() { return this.id; }) // convert to set of ids .get(); // convert to instance of Array //deselect disabled rows grid.find("tr.jqgrow:has(td > input.cbox:disabled)") .attr('aria-selected', 'false') .removeClass('ui-state-highlight'); } }
我找到了解决办法。 在loadComplete事件期间，我禁用了SelectAll复选框：我不需要它。 我也隐藏了复选框并禁用它。
loadComplete: function (data) { $("#cb_OrdersGrid").css("visibility", "hidden"); if (data.rows.length > 0) { for (var i = 0; i < data.rows.length; i++) { if (data.rows[i].cell[7] == 'false') { $("#jqg_OrdersGrid_" + data.rows[i].id).css("visibility", "hidden"); $("#jqg_OrdersGrid_" + data.rows[i].id).attr("disabled", true); } } } }
现在，当我想提交我的数据时，我遍历选定的行并检查它们是否已被禁用并将那些已启用的数据放入新数组中。
var selectedRows = myGrid.jqGrid('getGridParam', 'selarrrow'); var checkedRows = []; var selectionLoop = 0; for (var x = 0; x < selectedRows.length; x++) { var isDisabled = $('#jqg_OrdersGrid_' + selectedRows[x]).is(':disabled'); if (!isDisabled) { checkedRows[selectionLoop] = selectedRows[x]; selectionLoop++; } }
我现在所取得的是能够有条件地选择一行能够检查它。
我知道代码没有优化（原谅我Oleg），但我会稍后再做。
对于那些在谷歌搜索后最终得到这个答案的人（比如我），从jqGrid 4.0.0开始就有一个非常简单的解决方案。
将css-class’ui-state-disabled’添加到您不想被选中的行就足够了。 请参阅jqGrid 4.0.0的更改日志 。 您仍然可以将其与隐藏或禁用复选框相结合。
var $jqgrid = $("#jqgridselector"); //loop through all rows $(".jqgrow", $jqgrid).each(function (index, row) { var $row = $(row); if ($row === condition) { //Find the checkbox of the row and set it disabled $row.find("input:checkbox").attr("disabled", "disabled"); //add class ui-state-disabled, because thats how jqGrid knows not to take them into account for selection $row.addClass("ui-state-disabled"); //I overwrite the opactity of the ui-state-disabled class to make the row look 'normal' $row.css("opacity", 1); } });
我正在使用jqGrid 4.4.4，我不得不稍微调整一下LetfyX loadComplete。
loadComplete: function(data) { for (var i = 0; i < data.rows.length; i++) { var rowData = data.rows[i]; if (rowData.cell[6] != null) {//update this to have your own check var checkbox = $("#jqg_list_" + rowData.i);//update this with your own grid name checkbox.css("visibility", "hidden"); checkbox.attr("disabled", true); } } }