jquery - bootstrap - Hacer que jqGrid llene su contenedor

masonry plugin jquery

Question

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

Quiero que jqGrid complete por completo el panel (panel de diseño de jQuery) que lo contiene. El cambio de tamaño del panel debe redimensionar el jqGrid, cerrar el panel debe ocultar el jqGrid, etc., etc.

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

¿Alguien ha tenido alguna experiencia mezclando jqGrid con jQuery Layout?

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

Answer 1

Esta es mi solución actual:

Primero crea una función de cambio de tamaño llamada 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 puedes poner jqGrid''s dentro de cualquier panel de tu diseño y se cambiarán de tamaño para ajustarse al panel en el que se encuentra cuando se redimensiona el 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

Answer 2

Estoy usando jqgrid 4.0 (a través del plugin jquery struts 2) y el plugin 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 cuya ID es gridtable .

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

#gridtable es la identificación del elemento de tabla que creas para jqgrid

<div id="grid_container">
  <table id="gridtable" class="mygrid"></table>
  <div id="grid_pgr"></div>
</div>

Además, si está utilizando el complemento jquery struts2, la cuadrícula se genera automáticamente usando bloques < script > dentro de < body > (no en bloques de script dentro de < head > ). Entonces, si llama a layout() y establece triggerEventsOnLoad: true en < head > , obtiene un error de javascript. Para evitar esto, puede agregar este bloque de script en algún lugar después de declarar su (s) cuadrícula (s).

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#gridtable").jqGrid(''setGridWidth'',$myLayout.state.center.innerWidth - 2, ''true'');
});
</script>

Si tiene más de una grilla, puede acceder a ellos usando una clase que haya definido en el elemento de la tabla (vea el fragmento de html anterior), y luego ejecute el método resizeGrid en cada uno de ellos.

Answer 3

Le recomiendo que lea a través de resize-jqgrid-when-browser-is-resized , que analiza varias técnicas para cambiar el tamaño de su grilla.