2011-03-10 70 views
18


Me encantan las jqGrid pero a veces las cosas parecen ser 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 el usuario pueda elegir qué filas se enviarán/procesarán.
Necesito, sin embargo, bloquear algunas casillas de verificación porque el usuario no tiene autorización en esa fila en particular, tal vez.jqgrid: selección múltiple y deshabilitar comprobación (condicional)

He tratado de establecer multiselect: true y luego he tratado de ocultar la casilla:

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') dame las filas seleccionadas, incluso si no tienen sido revisado
¿Hay alguna otra manera de tener casillas habilitadas/deshabilitadas y una forma de saber cuáles se han verificado?

gracias

Respuesta

29

yo sugeriría que para desactivar algunos checkboxed del ser seleccionables con respecto a atributo "desactivado". Para hacer plena aplicación necesitará

  1. conjunto "desactivado" dentro de loadComplete evento manejar
  2. evitar, además, la selección de filas con discapacidad dentro beforeSelectRow evento manejar
  3. contar con el apoyo de "seleccionar todo" casilla de verificación en la cabecera de la columna multiselect implementar el identificador de evento onSelectAll que corrige la selección de filas deshabilitadas.

La demostración correspondiente 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:Free jqGrid apoya hasMultiselectCheckBox de devolución de llamada, que puede ser usado para crear casillas de selección múltiple no para todas las filas de jqGrid. Se puede usar rowattr para deshabilitar algunas filas adicionalmente. Como resultado, obtendrá la funcionalidad descrita anteriormente de una manera más simple. Se recomienda utilizar la opción multiPageSelection: true adicionalmente para jqGrid gratis con datos locales (datatype: "local" o loadonce: true). La opción multiPageSelection: true contendrá la matriz selarrrow en la paginación. Permite "preseleccionar" algunas filas al completar los ID correspondientes en selarrrow. Consulte ACTUALIZADO parte de the answer y the answer con the demo para obtener información adicional.

+3

Gracias Oleg. Siempre profesional en sus respuestas ;-) Me encanta el hecho de que su código se completa con ejemplos personalizados. En realidad, todavía me gustaría poder seleccionar la causa de la fila, ya que el hecho de que la fila esté marcada no tiene nada que ver con la selección. He encontrado una solución alternativa. Te mostraré un código. – LeftyX

+0

He respondido a mi pregunta pero no la aceptaré. No es justo. Intenta ver lo que piensas y ellos aceptarán los tuyos. – LeftyX

+0

@LeftyX: Tu código se ve bien. Cualquier clase de optimizaciones podría no ser necesaria si en sus cuadrículas habrá algunas filas. – Oleg

2

He encontrado una solución temporal. Durante el evento loadComplete, desactivo la casilla de selección SelectAll: no la 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 mi lazo de datos que a través de las filas seleccionadas y comprobar si han estado desactivado y poner los que están habilitados 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 ser capaz de seleccionar una fila condicionalmente poder comprobar o no.
Sé que el código no está optimizado (perdóneme Oleg) pero lo haré más tarde.

2

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

gran respuesta por parte de Oleg, También me gustaría añadir código para anular la selección de filas con discapacidad, la función onSelectAll completa 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'); 
    } 
} 
3

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

Basta con agregar css-class 'ui-state-disabled' a la fila que no desea que se seleccione. Ver The changelog of 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); 
      } 
     }); 
Cuestiones relacionadas