Question

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

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

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

支持此布局的最佳方法是什么？

Answer 1

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

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

这个建议使用'fixed'colModel选项将某些列设置为常量：

jQGrid set column width - Stack Overflow

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

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

Answer 2

要根据显示器尺寸同时具有流体布局和冷冻柱，请参阅此示例，其中包含流体表和冻结的第一列：

Step1 - 从主站点添加jquery.jqGrid.min.js脚本。

Step2 - 从网站http://code.google.com/p/codeincubator/source/browse/Samples/steveharman/jQuery/jquery.jqgrid.fluid/jquery.jqGrid.fluid.js?r=170

添加jquery.jqGrid.fluid.js脚本

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

希望这会有所帮助。

如何使用jqgrid冻结列来获得不同的屏幕宽度？

2 个答案: