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

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

我建议您禁用一些关于“禁用”属性的可选复选框。要全面实施，您需要

1. 在loadComplete 事件句柄内设置“禁用”
2. 另外防止在 beforeSelectRow 事件句柄中选择禁用的行
3. 在多选列的标题中支持“全选”复选框，实现onSelectAll 事件句柄，修复禁用行的选择。

对应的demo可以看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

对于在 Google 上搜索后最终得到此答案的人（如我），自 jqGrid 4.0.0 以来有一个非常简单的解决方案。

将css-class 'ui-state-disabled' 添加到您不想被选中的行就足够了。见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);
                    }
                }
            }