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 se enviarán/procesarán.
Sin embargo, necesito bloquear algunas casillas de verificación porque el usuario no tiene autorización en esa fila en particular, tal vez.
Intenté configurar multiselect: true
y luego intenté 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 forma de saber cuáles se han marcado?
Gracias
Le sugiero que deshabilite algunas casillas de verificación del atributo "deshabilitado". Para hacer una implementación completa, necesitará
loadComplete
beforeSelectRow
onSelectAll
que corrige la selección de filas deshabilitadas.La demo correspondiente se puede ver aquí . 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 devolución de llamada hasMultiselectCheckBox
, que se puede usar para crear casillas de verificación de selección múltiple, 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 forma más sencilla. Se recomienda usar la opción multiPageSelection: true
adicionalmente para jqGrid gratis con datos locales (tipo de datatype: "local"
o loadonce: true
). La opción multiPageSelection: true
mantendrá la matriz selarrrow
en la paginación. Permite "preseleccionar" algunas filas llenando las identificaciones correspondientes en selarrrow
. Consulte la parte ACTUALIZADA de la respuesta y la respuesta con la demostración para obtener información adicional.
Gran respuesta de Oleg, también agregaría código para anular la selección de 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'); } }
Para las personas (como yo) que terminan con esta respuesta después de buscar en Google, existe una solución muy fácil para este problema desde jqGrid 4.0.0.
Es suficiente agregar la clase css 'ui-state-disabled' a la fila que no desea que se seleccione. Consulte 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); } });