2011-12-19 21 views
5

Çok fazla sütun içeren bir JQgrid ızgaram var. Bazı insanlar çok geniş monitörlere sahip ve bazılarında küçük dizüstü bilgisayarlar var.Farklı ekran genişlikleri için jqgrid donmuş sütun nasıl kullanılır?

Geniş monitörlere sahip olan kişilerin, pencerenin boyutu kadar ızgaraya sahip olabilecekleri bir çözüm istiyorum.

Dizüstü bilgisayarları olanlar için donmuş sütunları olmasını isterim, böylece kaydırdıklarında, kılavuzdaki ilk sütunu kaybetmezler.

Bu düzeni desteklemenin en iyi yolu nedir?

+2

Neden ödül başlıyorsunuz? Herhangi bir cevabı kabul etmiyorsunuz ve ödül kazanmadığınız her 10 soruda ödül kazanmıyorsunuz. Birisi, * diğer insanlardan dolayı otomatik olarak ödülün% 50'sini alır. * Cevapları oylayın (otomatik ödüllendirme [burada] konusuna bakın (http://meta.stackexchange.com/a/16067/147495)). Bütün cevaplar çok mu kötü? Ödemeyi planlamıyor gibi görünüyorsanız, kelle başlamak adil mi? – Oleg

+0

@Oleg - En iyi cevabın tam lütuf olmadığını fark etmemiştim. Ben ileri gitmeden önce bu ödülün verileceğinden emin olacağım – leora

+0

Bu linklerden biri size yardımcı olabilir: http://stackoverflow.com/questions/6756276/jqgrid-set-column-width ve/veya http://veechand.wordpress.com/2009/07/13/10-jqgrid-tips-learning-learning-learning-from-my-experience/ – leanne

cevap

4

Bu iplik tarayıcı penceresi boyutu göre ızgara genişliğini ayarlamak açıklamaktadır:

:

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

Bu bir sabit boyuta bazı sütunlar ayarlamak için 'sabit' colModel seçeneği kullanılarak önerir jQGrid set column width - Stack Overflow

ve son olarak, bu site jqGrid kullanmak için bazı örnek kod ve ek ipuçları verir

:

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

+0

bu donmuş sütunların nasıl oynandığını açıklamıyor – leora

1

akış düzenini ve monitör boyutuna göre dondurulmuş colums bu örnek bir sıvı tablo ve donmuş bir ilk sütunu olan bkz hem sahip olmak :

Adım1 - dan ekle jquery.jqGrid.min.js senaryoyu Ana site.

Adım2 - sitede http://code.google.com/p/codeincubator/source/browse/Samples/steveharman/jQuery/jquery.jqgrid.fluid/jquery.jqGrid.fluid.js?r=170

Step3 dan jquery.jqGrid.fluid.js komut ekleyin - 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> 

Adım4 - Komut dosyasını bu yardım

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); 

Umut etkinleştirin.

İlgili konular