Question

我喜欢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')给我选定的行，即使它们尚未被检查过。
是否有其他方法可以启用/禁用复选框，以及如何知道已检查哪些复选框？

感谢

Answer 1

我建议您根据“禁用”属性禁用可选择的复选框。要完全实现，您需要

在loadComplete事件句柄
另外阻止在beforeSelectRow事件句柄
支持多选列实现onSelectAll事件句柄的标题中的“全选”复选框，用于修复已禁用行的选择。

相应的演示可以看到here。代码中最重要的部分是：

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

更新： Free jqGrid支持hasMultiselectCheckBox回调，可用于创建多选复选框，而不是jqGrid的所有行。可以使用rowattr另外禁用某些行。结果，人们将以更简单的方式获得上述功能。建议另外使用multiPageSelection: true选项将免费jqGrid与本地数据（datatype: "local"或loadonce: true）一起使用。选项multiPageSelection: true将在分页上保存数组selarrrow。它允许通过填充selarrrow中的相应ID来“预选”某些行。有关其他信息，请参见the answer的更新部分和the answer的the demo。

Answer 2

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');
    }
}

Answer 3

我找到了解决办法。在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），但我会稍后再做。

Answer 4

对于那些在谷歌搜索后得到这个答案的人（比如我），自jqGrid 4.0.0以来，这个问题有一个非常简单的解决方案。

足以添加css-class ui-state-disabled＆＃39;到你不想被选中的那一行。见The changelog of 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);
            }
        });

Answer 5

我正在使用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);
                    }
                }
            }

jqgrid：多选和禁用检查（有条件）

5 个答案: