jquery - 如何将 jqgrid 冻结列用于不同的屏幕宽度？

Question

我有一个包含很多列的 JQgrid 网格。有些人有很宽的显示器，有些人有小型笔记本电脑。

我想要一个解决方案，让拥有宽显示器的人可以将网格拉伸到与窗口大小一样长的位置。

对于那些有笔记本电脑的人，我希望他们有冻结的列，所以当他们滚动时，他们不会丢失网格中的第一列。

支持这种布局的最佳方式是什么？

Answer 1

该线程描述了如何根据浏览器窗口大小设置网格宽度：

javascript - 调整浏览器大小时调整 jqGrid 的大小？- 堆栈溢出

这个建议使用 'fixed' colModel 选项将某些列设置为恒定大小：

jQGrid设置列宽 - VoidCC

最后，这个站点提供了一些示例代码和使用 JQGrid 的其他提示：

从我的经验中学到的 10 个 JQGrid Tipls << SANDBOX ……。

Answer 2

要根据监视器大小同时拥有流体布局和冻结列，请参阅这个具有流体表和冻结第一列的示例：

第 1 步 - 从主站点添加 jquery.jqGrid.min.js 脚本。

第 2 步 - 从站点http://code.google.com/p/codeincubator/source/browse/Samples/steveharman/jQuery/jquery.jqgrid.fluid/jquery.jqGrid.fluid添加 jquery.jqGrid.fluid.js 脚本。 js?r=170

第三步 - 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>

Step4 - 激活脚本

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

希望这有帮助。