Hacer jqGrid llenar su contenedor

Estoy usando el complemento de diseño jQuery y el complemento jqGrid en uno de mis proyectos y funcionan muy bien, excepto por un pequeño problema …

Quiero que jqGrid llene completamente el panel (panel de diseño de jQuery) que lo contiene. Cambiar el tamaño del panel debe cambiar el tamaño del jqGrid, cerrar el panel debe ocultar el jqGrid, etc.

Tanto jqGrid como jQuery Layout proporcionan devoluciones de llamada, pero cuando las uso, el diseño de página se rompe horriblemente.

¿Alguien tiene experiencia en mezclar jqGrid con jQuery Layout?

  1. http://www.secondpersonplural.ca/jqgriddocs/index.htm
  2. http://layout.jquery-dev.net/

Te recomiendo leer a través de resize-jqgrid-when-browser-is-resize , que analiza varias técnicas para redimensionar tu cuadrícula.

Esta es mi solución actual:

Primero cree una función de cambio de tamaño que se llame por el evento onresize:

function resizeGrid(pane, $Pane, paneState) { if(grid = $('.ui-jqgrid-btable:visible')) { grid.each(function(index) { var gridId = $(this).attr('id'); $('#' + gridId).setGridWidth(paneState.innerWidth - 2); }); } } 

Luego, en su diseño, configuramos el evento de cambio de tamaño para llamar a este método:

 $('#mylayout_id').layout({ center: { closable: false, resizable: false, slidable: false, onresize: resizeGrid, triggerEventsOnLoad: true // resize the grin on load also }, west: { fxName: "slide", size: 250, maxSize: 300 }, east: { fxName: "slide", size: 250, maxSize: 300 } }); 

Con esto, puede colocar jqGrid dentro de cualquier panel de su diseño y serán redimensionados para que se ajusten al panel en el que se encuentra cuando se cambia el tamaño del panel central.

  1. http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/4a7c6b09206045f2
  2. http://www.secondpersonplural.ca/jqgriddocs/index.htm
  3. http://layout.jquery-dev.net/documentation.cfm

Estoy usando jqgrid 4.0 (a través del complemento jquery struts 2) y el complemento de diseño jQuery. La respuesta anterior no funciona para mí. resizeGrid embargo, solo la función resizeGrid fue un problema. Simplemente reemplace la función resizeGrid arriba con esto. Esto solo cambiará el tamaño de una cuadrícula, aquella cuyo ID es gridtable .

 function resizeGrid(pane, $Pane, paneState) { jQuery("#gridtable").jqGrid('setGridWidth',paneState.innerWidth - 2, 'true'); }; 

#gridtable es el id del elemento de tabla que creas para jqgrid

 

Además, si está utilizando el complemento jquery struts2, la cuadrícula se genera automáticamente utilizando los bloques < script > dentro del < body > (no en los bloques del script dentro de < head > ). Por lo tanto, si llamó a layout() y configuró triggerEventsOnLoad: true en < head > , obtendrá un error de javascript. Para evitar esto, puede agregar este bloque de secuencia de comandos en algún lugar después de que se hayan declarado las cuadrículas.

  

Si tiene más de una cuadrícula, puede acceder a ellas utilizando una clase que haya definido en el elemento de la tabla (vea el fragmento de resizeGrid html más arriba) y luego ejecute el método resizeGrid en cada una de ellas.