Fai jqGrid riempire il suo contenitore

Sto usando il plugin layout di jQuery e il plugin jqGrid in uno dei miei progetti e funzionano ottimo, tranne per un piccolo problema ...Fai jqGrid riempire il suo contenitore

Voglio che il jqGrid per riempire completamente il riquadro (riquadro layout jQuery) che lo contiene. Ridimensionamento del riquadro dovrebbe ridimensionare la jqGrid, chiudendo il riquadro dovrebbe nascondere il jqGrid, ecc, ecc

Sia jqGrid e jQuery layout fornire callback ma quando uso loro le interruzioni di layout pagina orribilmente.

Qualcuno ha esperienza nel mixare jqGrid con jQuery Layout?

fonte

2010-05-27 Horacio

vi consiglio di leggere attraverso resize-jqgrid-when-browser-is-resized, che discute diverse tecniche per il ridimensionamento griglia.

fonte

2010-05-27 14:12:21

Grazie, questo mi ha portato alla risposta di cui avevo bisogno. – Horacio

Prego, saremo lieti di aiutare –

@JustinEthier come facciamo a renderlo una griglia fluida come la tabella di bootstrap di Twitter. esempio qui http://192.69.216.111/themes/preview/ace/tables.html –

Questa è la mia soluzione attuale:

Innanzitutto creare una funzione di ridimensionamento che viene chiamato dall'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); 
    }); 
    } 
}

Poi nel layout abbiamo istituito l'evento resize chiamare questo metodo:

$('#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 questo è possibile inserire jqGrid all'interno di qualsiasi riquadro del proprio layout e verranno ridimensionati per adattarsi al riquadro in cui si trova quando viene ridimensionato il riquadro centrale.

fonte

2010-05-28 02:17:06 Horacio

che sto usando jqGrid 4.0 (tramite jQuery si pavoneggia 2 plug-in) e il layout plugin per jQuery. La risposta precedente non funziona per me. Solo la funzione resizeGrid era un problema. Basta sostituire la funzione resizeGrid in alto con questo. Questo ridimensiona solo una griglia, quella il cui id è gridtable.

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

#gridtable è l'id dell'elemento tabella creata per jqGrid

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

Inoltre, se si utilizza lo Struts2 plugin per jQuery, la griglia viene generato automaticamente utilizzando <script> blocchi all'interno del <body> (non nei blocchi di script all'interno di <head>). Quindi, se hai chiamato e imposta triggerEventsOnLoad: true in <head>, ottieni un errore javascript. Per evitare ciò, è possibile aggiungere questo blocco di script da qualche parte dopo che la griglia è stata dichiarata.

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

Se è presente più di una griglia, è possibile accedervi utilizzando una classe definita sull'elemento tavolo (vedi Frammento HTML sopra), e quindi eseguire il metodo resizeGrid su ciascuno di essi.

fonte

2011-05-18 13:25:35 Rosh

Fai jqGrid riempire il suo contenitore

risposta

Problemi correlati