如何使用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冻结列来显示不同的屏幕宽度？

回答

相关问题