Cargué una grilla con una solicitud de base de datos (en PHP con CodeIgniter y jqgrid helper). No tengo ningún problema para mostrar una buena cuadrícula con mis datos.
Quiero mostrar un nuevo colomn con casillas de verificación para elegir una o varias filas.
Es imposible agregar una nueva columna después de la carga. Así que trato de hacer esto: – Se agrega el colomn al crear la cuadrícula, – Al crear, agrego una opción ‘loadComplete’ con una función, – En la presentación, la función se ejecuta. Aquí está :
function ajoutCheckBox() { var grille = $("#users_grid"); // Construire les checkbox dans la colonne D grille.setColProp('Dest', {editable: true}); grille.setColProp('Dest', {edittype: 'checkbox'}); grille.setColProp('Dest', {editoptions: { value: "True:False" }}); grille.setColProp('Dest', {formatter: "checkbox"}); grille.setColProp('Dest', {formatoptions: { disabled: true}}); // Insérer la valeur false dans toutes les lignes de la colonne D var index = grille.jqGrid('getGridParam', '_index'); for(i in index) { grille.jqGrid('setCell', i, 'Dest', 'False', {}); } } Como puede ver, el gris se llama “#users_grid” y la columna “Dest”.
Mi problema: nada se agrega …
Gracias por tu ayuda !
XB
EDIT: encontré la siguiente solución:
"loadComplete" . El código es muy simple pero difícil de encontrar …
La creación de la grilla:
loadComplete: function() { ajoutCheckBox() }, colModel:[.... {"name":"Env","index":"Env","width":30,"hidden":false,"align":"left","edittype":"checkbox","formatter":"checkbox","formatoptions":"{ disabled: false}","editable":true,"editoptions":{"editoptions":"{ value: \"True:False\", defaultValue: \"False\" }}","size":10}}, ....]
La función de callback:
function ajoutCheckBox() { var grille = $("#users_grid"); var index = grille.jqGrid('getGridParam', '_index'); for(i in index) { // Pour toutes les lignes du tableau grille.jqGrid('setCell', i, 'Env', 'False'); $('#'+i).find("input:checkbox").removeAttr('disabled'); } }
¡No parece estar optimizado, pero funciona!
No es imposible agregar una nueva columna después de la carga, pero es posible hacer una columna oculta visible. Solo necesita definir la checkbox column formatoptions: { disabled: false} (puede usar formatoptions: { disabled: false} si es necesario) y puede usar showCol dentro de la callback loadComplete para hacer que la columna sea visible si es necesario o forzarla a ocultarse usando el método hideCol .
ACTUALIZADO : Si entiendo correctamente lo que desea (después de la discusión en los comentarios), entonces la demostración debe demostrar la solución:
data parámetros internos y _index . Se mostrará la primera página con los datos. beforeSelectRow para manejar hacer clic / marcar / desmarcar las casillas de verificación. Debido a que datatype: "local" se usa en jqGrid utilicé getLocalRow para acceder al objeto interno que repretó los datos de la fila. Al marcar / desmarcar las casillas de verificación, modifiqué el campo correspondiente de los datos. Como resultado, uno puede cambiar el estado de algunas casillas de verificación, cambiar la página y volver a la primera página. Uno verá que se guardó el estado modificado de las casillas de verificación. A continuación se muestra la parte más importante del código:
var mydata = [ ... { id: "4", ..., closed: true, ... }, .... ]; $("#list").jqGrid({ datatype: "local", data: mydata, colModel: [ ... {name: "closed", width: 70, align: "center", formatter: "checkbox", formatoptions: { disabled: false}, edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}, stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } }, ... ], beforeSelectRow: function (rowid, e) { var $self = $(this), iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]), cm = $self.jqGrid("getGridParam", "colModel"), localData = $self.jqGrid("getLocalRow", rowid); if (cm[iCol].name === "closed") { localData.closed = $(e.target).is(":checked"); } return true; // allow selection }, ... });