jquery - full - jqgrid responsive

jqgrid: multiseleccionar y deshabilitar cheque(condicional)

Question

Me encanta jqGrid pero a veces las cosas parecen más complicadas de lo que deberían ser.
Lo que me gustaría lograr es tener una casilla de verificación en cada fila para que un usuario pueda elegir qué filas van a ser enviadas / procesadas.
Sin embargo, necesito bloquear algunas casillas de verificación porque el usuario no tiene autorización en esa fila en particular, tal vez.

He intentado establecer multiselect: true y luego he tratado de ocultar la casilla de verificación:

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

y funciona bien pero, aún así, .jqGrid(''getGridParam'', ''selarrrow'') me da las filas seleccionadas, incluso si no se han verificado.
¿Hay alguna otra forma de tener casillas de verificación que estén habilitadas / deshabilitadas y una manera de saber cuáles han sido marcadas?

Gracias

Answer 1

Estoy usando jqGrid 4.4.4 y tuve que ajustar LetfyX loadComplete solo un poco.

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

Answer 2

Gran respuesta de Oleg, también agregaría código para deseleccionar filas deshabilitadas, complete la función onSelectAll a continuación.

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

He encontrado una solución alternativa. Durante el evento loadComplete deshabilito la casilla de verificación SelectAll: no lo necesito. También oculto la casilla de verificación y la deshabilito.

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

Ahora, cuando quiero enviar mis datos recorro las filas seleccionadas y verifico si se han deshabilitado y coloco las que están habilitadas en una nueva matriz.

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

Lo que he logrado ahora es poder seleccionar una fila condicionalmente pudiendo verificarla o no.
Sé que el código no está optimizado (perdóname, Oleg) pero lo haré más tarde.

Answer 4

Le sugeriría que deshabilite algunas casillas de verificación de la opción seleccionable con respecto al atributo "deshabilitado". Para hacer la implementación completa necesitarás

1. establecer "deshabilitado" dentro del controlador de eventos loadComplete
2. adicionalmente evita la selección de filas deshabilitadas dentro del beforeSelectRow eventos antes de beforeSelectRow
3. para tener soporte de la casilla de verificación "seleccionar todo" en el encabezado de la columna de selección onSelectAll ejecute el onSelectAll eventos onSelectAll que corrige la selección de filas deshabilitadas.

La demo correspondiente se puede ver here . La parte más importante del código está aquí:

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

ACTUALIZADO: jqGrid gratuito admite la hasMultiselectCheckBox llamada hasMultiselectCheckBox , que se puede usar para crear casillas de selección multiselect no para todas las filas de jqGrid. Uno puede usar rowattr para deshabilitar algunas filas adicionalmente. Como resultado, se obtendrá la funcionalidad descrita anteriormente de una manera más simple. Se recomienda usar la opción multiPageSelection: true , además, para jqGrid gratis con datos locales ( datatype: "local" o loadonce: true ). La opción multiPageSelection: true mantendrá la matriz selarrrow en la paginación. Permite "preseleccionar" algunas filas rellenando los selarrrow correspondientes en selarrrow . Consulte la parte ACTUALIZADA de la respuesta y la respuesta con la demostración para obtener información adicional.

Answer 5

Para las personas (como yo) que terminan en esta respuesta después de buscar en Google, hay una solución muy fácil a este problema desde jqGrid 4.0.0.

Es suficiente para agregar la clase css ''ui-state-disabled'' a la fila que no desea que se seleccione. Ver el registro de cambios de jqGrid 4.0.0 . Y aún podría combinar eso con ocultar o deshabilitar la casilla de verificación.

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