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

Я бы посоветовал вам отключить некоторые чекбоксы с возможностью выбора в отношении атрибута «disabled». Для полной реализации вам понадобится

1. установить "отключено" внутри loadComplete дескриптора события
2. дополнительно предотвращает выбор отключенных строк внутри beforeSelectRow дескриптора события
3. для поддержки флажка "выбрать все" в заголовке столбца множественного выбора реализует 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, чтобы дополнительно отключить некоторые строки. В результате вы получите описанную выше функциональность более простым способом. Рекомендуется дополнительно использовать опцию multiPageSelection: true для бесплатного jqGrid с локальными данными (datatype: "local" или loadonce: true). Опция multiPageSelection: true будет содержать массив selarrrow при подкачке. Это позволяет предварительно выбирать некоторые строки, заполняя соответствующие идентификаторы в selarrrow. См. ОБНОВЛЕНО часть ответ и ответ с демо для получения дополнительной информации.

Answer 2

Отличный ответ от Олега, я бы также добавил код для отмены выбора отключенных строк, завершите функцию 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

Для людей (таких как я), которые в результате поиска в Google получают этот ответ, существует очень простое решение этой проблемы, начиная с jqGrid 4.0.0.

Достаточно добавить класс css '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);
            }
        });

Answer 4

Я нашел обходной путь.Во время события 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++;
    }
}

То, чего я достиг сейчас, - это возможность выбрать строку, условно проверяя ее или нет.
Я знаю, что код не оптимизирован (простите, Олег), ноЯ сделаю это позже.

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