0

我正在使用jqgrid 4.4.4，我似乎遇到了问题。

问题 1：固定

用例

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

解决方案

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

问题 2：固定

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

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 以恢复网格的先前宽度。

4

1 回答 1

1

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

1）将HTML代码更改为以下

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

其中外部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 }
    ]
});

在此处查看修改后的提琴手演示

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

.ui-jqgrid .ui-jqgrid-bdiv {
    max-height: 100px;
    overflow-x: hidden;
}
于 2013-02-25T11:25:25.410 回答