jqGrid llenar su contenedor

estoy usando el plugin de diseño de jQuery y el plugin jqGrid en uno de mis proyectos y funcionan genial, excepto por un pequeño problema ...jqGrid llenar su contenedor

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

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

¿Alguien ha tenido alguna experiencia al mezclar jqGrid con jQuery Layout?

Fuente

2010-05-27 Horacio

le recomiendo que lea a través resize-jqgrid-when-browser-is-resized, que discute varias técnicas para cambiar el tamaño de la cuadrícula.

Fuente

2010-05-27 14:12:21

Gracias, esto me llevó a la respuesta que necesitaba. – Horacio

De nada, me complace ayudar –

@JustinEthier, ¿cómo hacemos esto como una red fluida como la tabla de arranque de Twitter? ejemplo aquí http://192.69.216.111/themes/preview/ace/tables.html –

Ésta es mi solución actual:

En primer lugar crear una función de cambio de tamaño que es llamado 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 hemos creado 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 se puede poner de jqGrid dentro de cualquier panel de la disposición y el tamaño de estas cambiará para encajar el panel es cuando se cambia el tamaño del panel central.

Fuente

2010-05-28 02:17:06 Horacio

estoy usando jqGrid 4.0 (a través de jQuery puntales 2 plug-in) y jQuery plugin de diseño. La respuesta anterior no funciona para mí. Solo la función resizeGrid fue un problema. Simplemente reemplace la función resizeGrid anterior 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 el id del elemento de la tabla se crea para jqGrid

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

Además, si está utilizando el struts2 plugin de jQuery, la red se genera automáticamente utilizando <script> bloques dentro de la <body> (no en bloques de script dentro de <head>). Por lo tanto, si llamó al layout() y estableció 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 usted tiene más de una cuadrícula, puede acceder a ellos usando una clase definida en el elemento de la tabla (ver código HTML anterior), y luego ejecutar el método resizeGrid en cada uno de ellos.

Fuente

2011-05-18 13:25:35 Rosh

jqGrid llenar su contenedor

Respuesta

Cuestiones relacionadas