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

jqgrid: multiselect and disable check (conditional)

提问by LeftyX

I love jqGrid but sometimes things seem more complicated than they should be.
What I would like to achieve is to have a checkbox on each row so that a user can choose which rows are going to be submitted/processed.
I need, though, to block some checkboxes cause the user has no authorization on that particular row, maybe.

我喜欢 jqGrid，但有时事情似乎比应有的更复杂。
我想要实现的是在每一行上都有一个复选框，以便用户可以选择要提交/处理哪些行。
不过，我需要阻止某些复选框，因为用户可能对该特定行没有授权。

I've tried to set multiselect: trueand then I've tried to hide the checkbox:

我尝试设置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");
            }
        }
    }
},

and it works well but, still, .jqGrid('getGridParam', 'selarrrow')give me the selected rows, even if they haven't been checked.
Is there any other way to have checkboxes which are enabled/disabled and a way to know which ones have been checked?

它运行良好，但仍然.jqGrid('getGridParam', 'selarrrow')给我选定的行，即使它们没有被检查。
有没有其他方法可以启用/禁用复选框以及知道哪些复选框已被选中？

thanks

谢谢

回答by Oleg

I would suggest you to disable some checkboxed from the be selectable with respect of "disabled" attribute. To make full implementation you will need

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

1. set "disabled" inside of loadCompleteevent handle
2. additionally prevent selection of disabled rows inside beforeSelectRowevent handle
3. to have support of "select all" checkbox in the header of the multiselect column implement onSelectAllevent handle which fix selection of disabled rows.

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

The corresponding demo can you see here. The most important part of the code is 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
        }
    }
);

UPDATED:Free jqGridsupports hasMultiselectCheckBoxcallback, which can be used to create multiselect checkboxes not for all rows of jqGrid. One can use rowattrto disable some rows additionally. As the result one will get the described above functionality in more simple way. It's recommended to use multiPageSelection: trueoption additionally for free jqGrid with local data (datatype: "local"or loadonce: true). The option multiPageSelection: truewill hold the array selarrrowon paging. It allows "pre-select" some rows by filling the corresponding ids inselarrrow. See UPDATEDpart of the answerand the answerwith the demofor additional information.

更新：免费的 jqGrid支持hasMultiselectCheckBox回调，可用于为 jqGrid 的所有行创建多选复选框。可以使用rowattr另外禁用某些行。结果，人们将以更简单的方式获得上述功能。建议multiPageSelection: true额外使用带有本地数据（datatype: "local"或loadonce: true）的免费 jqGrid 选项。该选项multiPageSelection: true将selarrrow在分页时保存数组。它允许通过在selarrrow. 见已更新的部分答案和答案与演示的其他信息。

回答by Sergio Espallargas

Great answer from Oleg, I would also add code to deselect disabled rows, complete onSelectAll function below.

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

回答by cverb

For people (like me) that end up on this answer after searching on Google, there is a very easy solution to this problem since jqGrid 4.0.0.

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

It's enough to add the css-class 'ui-state-disabled' to the row that you don't want to be selected. See The changelog of jqGrid 4.0.0. And you could still combine that with hiding or disabling the checkbox.

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

回答by LeftyX

I've found a work-around. During the loadComplete event I disable the SelectAll checkbox: I don't need it. I also hide the checkbox and disable it.

我找到了解决方法。在 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);
            }
        }
    }
}

Now, when I want to submit my data I loop through the selected rows and check if they've been disabled and put those which are enabled in a new array.

现在，当我想提交我的数据时，我会遍历选定的行并检查它们是否已被禁用并将那些启用的行放入新数组中。

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

What I've achieved now is to be able to select a row conditionally being able to check it or not.
I know the code is not optimized (forgive me Oleg) but I'll do it later.

我现在所取得的是能够有条件地选择一行是否能够检查它。
我知道代码没有优化（原谅我奥列格），但我会稍后再做。

回答by jhilden

I'm using jqGrid 4.4.4 and I had to tweak LetfyX loadComplete just a little.

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