如何使用jqgrid凍結列來顯示不同的屏幕寬度？

我有一個有很多列的JQgrid網格。有些人有很寬的顯示器，有些人有小型筆記本電腦。如何使用jqgrid凍結列來顯示不同的屏幕寬度？

我想要一個解決方案，其中具有寬監視器的人可以具有與窗口大小一樣長的網格。

對於那些筆記本電腦的人，我希望他們有凍結的列，所以當他們滾動時，他們不會丟失網格中的第一列。

什麼是支持此佈局的最佳方式？

2011-12-19 leora

爲什麼你開始賞金？你不接受任何答案，也不會在你開始賞金的最後10個問題中隨時獎勵賞金。由於其他人*自動獲得50％的賞金*將答案投給（參見關於自動授予[此處]（http://meta.stackexchange.com/a/16067/147495））。所有的答案都很糟糕嗎？如果你不打算獎勵它，開始賞金是否公平？ – Oleg 2011-12-31 12:17:48

@奧列格 - 我沒有意識到最重要的答案並沒有得到充分的獎勵。我將確保在未來期限屆滿前進行獎勵 – leora 2011-12-31 13:35:48

其中一個鏈接可能有所幫助：http://stackoverflow.com/questions/6756276/jqgrid-set-column-width和/或http://veechand.wordpress.com/2009/07/13/10-jqgrid-tips-learned-from-my-experience/ – leanne 2011-12-31 19:46:52

此線程描述如何基於瀏覽器窗口大小設置網格寬度：

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

這一個建議使用「固定」 colModel選項某些列設定爲恆定大小：

jQGrid set column width - Stack Overflow

最後，這個網站提供了使用的jqGrid一些示例代碼和其他提示：

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

來源

2011-12-31 20:01:52 leanne

這並沒有解釋凍結柱是如何進場的 – leora 2012-01-07 14:15:10

兼得流體佈局並根據顯示器尺寸冷凍colums看到具有流體表和冷凍第一列這個例子：

第一步 - 從添加jquery.jqGrid.min.js腳本主站點。

第二步 - 從網站http://code.google.com/p/codeincubator/source/browse/Samples/steveharman/jQuery/jquery.jqgrid.fluid/jquery.jqGrid.fluid.js?r=170

第三步：添加jquery.jqGrid.fluid.js腳本 - 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>

第四步 - 激活腳本

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

希望這有助於。

來源

2012-01-05 06:50:10

如何使用jqgrid凍結列來顯示不同的屏幕寬度？

回答

相關問題