jqgrid hiddengrid加倍数据和垂直滚动重叠数据

Question

我用的是jqgrid 4.4.4，好像遇到了问题。

问题 1：已修复

用例

我希望 jqgrid 在“启动”时隐藏而不会使我的数据加倍。

解决方案

通过移除 scroll:true，数据不会像以前那样翻倍。

问题 2：已修复

当数据超过jqgrid的高度时，会出现滚动条。但是滚动条与图片上的数据重叠。

我已经尝试过 autowidth:true、scrollOffset、定义像素宽度 ++，但似乎没有任何效果。

我正在从事一个相当大的项目，我喜欢使用 jqgrid。但我认为有必要让这些问题过时。

代码：

    var grid = $("#table").jqGrid(
                {       
                    datatype: "local",
                    height: "auto",
                    width: 1000,
                    scroll: true,
                    colNames:['','1992','1997','2002','2007',
                              '2012','2017','2022','2027','2032','2037'],
                    colModel: [{name:'Name',index:'Name', align: 'left'},
                               {name:'Col0',index:'Col0'},{name:'Col1',index:'Col1'}
                               {name:'Col2',index:'Col2'},{name:'Col3',index:'Col3'},
                               {name:'Col4',index:'Col4'},{name:'Col5',index:'Col5'},
                               {name:'Col6',index:'Col6'},{name:'Col7',index:'Col7'},
                               {name:'Col8',index:'Col8'},{name:'Col9',index:'Col9'}],
                    multiselect: true,
                    caption: "Table",
                    shrinkToFit: true,
                    data: [{ Name: 'County1', Col0: '11 273', Col1: '11 431', 
                             Col2: '12 515', Col3: '13 414', Col4: '15 143',
                             Col5: '16  852', Col6: '18 362', Col7: '19 698', 
                             Col8: '20 821', Col9: '21 734' },
                           { Name: 'County2', Col0: '22 530', Col1: '24 457', 
                             Col2: '25 763', Col3: '27 247', Col4: '28 970', 
                             Col5: '31 135', Col6: '32 977', Col7: '34 649', 
                             Col8: '36 020', Col9: '37 158' },
                           { Name: 'County3', Col0: '11 909', Col1: '12 734', 
                             Col2: '14 037', Col3: '14 873', Col4: '17 284', 
                             Col5: '20 083', Col6: '22 877', Col7: '25 603', 
                             Col8: '28 064', Col9: '30 210' },
                           { Name: 'County4', Col0: '10 465', Col1: '12 165', 
                             Col2: '12 962', Col3: '13 890', Col4: '15 154', 
                             Col5: '16 293', Col6: '17 284', Col7: '18 174', 
                             Col8: '18 897', Col9: '19 446' },
                           { Name: 'County5', Col0: '13 300', Col1: '14 350', 
                             Col2: '15 777', Col3: '16 791', Col4: '17 809', 
                             Col5: '18 971', Col6: '19 931', Col7: '20 785', 
                             Col8: '21 452', Col9: '21 930' }]
                  //hiddengrid: true
                }
            );
    CSS:
     .ui-jqgrid-bdiv {
       max-height:300px;
    }

描述我的问题的JSFiddle： http://jsfiddle.net/aalmaas/3z7s7/2/

JSFiddle 正是我想要的：http://jsfiddle.net/aalmaas/LBfCV/。但是，我希望将 jqgrid 高度设置为“自动”，而不是确定的高度。

解决方案：

非常感谢 Oleg 帮助我。

如果你设置jqgrid的高度，垂直滚动条的行为是不同的，当你定义它为height时：“auto”。

这就是我最终做的：

如果有滚动条可见，我首先调用 setGridWidth 来减小网格的宽度，并将收缩参数设置为 true。宽度考虑到垂直滚动条需要有空间。然后我再次调用 setGridWidth 并将收缩参数设置为 false 以恢复网格的先前宽度。

Answer 1

如果我正确理解您想要做什么，您应该执行以下操作

1) 将 HTML 代码更改为以下内容

<div id="foo">A top div</div>
<div class="myGridDiv">
    <table id="grid"></table>
</div>

outer div 上的 CSS 使用 position: absolute 定义：

.myGridDiv { position: absolute; bottom: 10px;}

2) 将 JavaScript 代码更改为

var numberTemplate = {width: 60, formatter: "integer",
        formatoptions: {thousandsSeparator: " "}, sorttype: "integer"};

$("#grid").jqGrid({
    datatype: "local",
    height: "auto",
    hiddengrid: true,
    gridview: true, // to improve performance
    rowNum: 10000,  // to have no local paging
    colNames: ['', '1992', '1997', '2002', '2007', '2012', '2017', '2022', '2027',
        '2032', '2037'],
    colModel: [
        {name:'Name', width: 80, key: true},
        {name:'Col0', template: numberTemplate},
        {name:'Col1', template: numberTemplate},
        {name:'Col2', template: numberTemplate},
        {name:'Col3', template: numberTemplate},
        {name:'Col4', template: numberTemplate},
        {name:'Col5', template: numberTemplate},
        {name:'Col6', template: numberTemplate},
        {name:'Col7', template: numberTemplate},
        {name:'Col8', template: numberTemplate},
        {name:'Col9', template: numberTemplate}
    ],
    caption: "Stack Overflow Example",
    data: [
        { Name: 'County1', Col0: 11273, Col1: 11431, Col2: 12515, Col3: 13414,
            Col4: 15143, Col5: 16852, Col6: 18362, Col7: 19698, Col8: 20821,
            Col9: 21734 },
        { Name: 'County2', Col0: 22530, Col1: 24457, Col2: 25763, Col3: 27247,
            Col4: 28970, Col5: 31135, Col6: 32977, Col7: 34649, Col8: 36020,
            Col9: 37158 },
        { Name: 'County3', Col0: 11909, Col1: 12734, Col2: 14037, Col3: 14873,
            Col4: 17284, Col5: 20083, Col6: 22877, Col7: 25603, Col8: 28064,
            Col9: 30210 },
        { Name: 'County4', Col0: 10465, Col1: 12165, Col2: 12962, Col3: 13890,
            Col4: 15154, Col5: 16293, Col6: 17284, Col7: 18174, Col8: 18897,
            Col9: 19446 },
        { Name: 'County5', Col0: 13300, Col1: 14350, Col2: 15777, Col3: 16791,
            Col4: 17809, Col5: 18971, Col6: 19931, Col7: 20785, Col8: 21452,
            Col9: 21930 }
    ]
});

查看修改后的 fiddler 演示 here

已更新：我不确定我是否正确理解了滚动问题。希望the demo解决问题。我在演示中使用了以下 CSS：

.ui-jqgrid .ui-jqgrid-bdiv {
    max-height: 100px;
    overflow-x: hidden;
}