2011-12-19 12 views
5

Ho una griglia JQgrid con molte colonne. Alcune persone hanno monitor molto ampi e alcuni hanno laptop piccoli.Come utilizzare la colonna congelata jqgrid per diverse larghezze dello schermo?

Desidero una soluzione in cui la gente che dispone di monitor di grandi dimensioni può avere la griglia allungare fino a quando la dimensione della finestra.

Per quelli con laptop, voglio che abbiano le colonne congelate in modo che quando scorrono, non perdano la prima colonna nella griglia.

Qual è il modo migliore per supportare questo layout?

+2

Perché si avvia bounty? Non accetti alcuna risposta e non premi la taglia in qualsiasi momento nelle ultime 10 domande dove inizi la taglia. Qualcuno ottiene automaticamente il 50% della taglia a causa di * altre persone * vota le risposte (vedi l'assegnazione automatica [qui] (http://meta.stackexchange.com/a/16067/147495)). Tutte le risposte erano così negative? È giusto iniziare la taglia se sembra che non abbia intenzione di premiarla? – Oleg

+0

@Oleg - Non mi sono reso conto che la risposta più alta non ottiene la piena generosità. Mi assicurerò di assegnare prima che scada andando avanti – leora

+0

Uno di questi collegamenti può aiutare: http://stackoverflow.com/questions/6756276/jqgrid-set-column-width e/o http://veechand.wordpress.com/2009/07/13/10-jqgrid-tips-learn-from-my-experience/ – leanne

risposta

4

Questo thread descrive come impostare larghezza della griglia in base alle dimensioni della finestra del browser:

javascript - Resize jqGrid when browser is resized? - Stack Overflow

Questo suggerisce utilizzando l'opzione colModel 'fisso' per impostare alcune colonne ad una dimensione costante:

jQGrid set column width - Stack Overflow

e, per concludere, questo sito fornisce qualche esempio di codice e ulteriori suggerimenti per l'utilizzo di jqGrid:

10 JQGrid Tipls learned from my experience << SANDBOX…….

+0

questo non spiega come entrano in gioco le colonne congelate – leora

1

avere sia layout fluido e colonne congelati in base alla dimensione del monitor vedere questo esempio, avendo un tavolo fluido ed una prima colonna congelati:

Step1 - Aggiungi jquery.jqGrid.min.js script dalla sito principale.

Step2 - Aggiungere lo script jquery.jqGrid.fluid.js dal sito http://code.google.com/p/codeincubator/source/browse/Samples/steveharman/jQuery/jquery.jqgrid.fluid/jquery.jqGrid.fluid.js?r=170

Fase 3 - html

<div id="grid_wrapper" class="ui-corner-all floatLeft"> 
<table id="theGrid" class="scroll"> 
</table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 
</div> 

Fase 4 - Attivare lo script

function resize_the_grid() 

     { 
     $('#theGrid').fluidGrid({base:'#grid_wrapper', offset:-20}); 
     } 

$(document).ready(function(){ 

     var myGrid = $('#theGrid');   

     myGrid.jqGrid({ 

      datatype:'clientSide', 

      altRows:true, 

      colNames:['Name', 'Side', 'Power'], 

      colModel:[ 

      { name:'name', index: 'name', frozen : true }, 

      { name:'side', index: 'side' }, 

      { name:'power', index: 'power' } ], 

      pager: jQuery('#pager'), 

      viewrecords: true, 

      imgpath: 'css/start/images', 

       caption: 'The Force: Who\'s Who?', 

       height: "100%" 

     }); 

     myGrid.addRowData("1", {name:"Luke", side:"Good", power:"6"}); 

     myGrid.addRowData("2", {name:"Vader", side:"Dark", power:"9"}); 

     myGrid.addRowData("3", {name:"Han", side:"meh?", power:"0"});   

     resize_the_grid(); 
}); 

$(window).resize(resize_the_grid); 

Spero che questo ha aiutato.

Problemi correlati