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

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

问题1：已修复

用例

我希望jqgrid在“启动”时被隐藏，而不会让我的数据翻倍

解决方案

通过删除scroll:true，数据没有以前的两倍

问题2：已修复

当数据超过jqgrid的高度时，会出现一个滚动条。但滚动条与图中所示的数据重叠

我尝试了两种方法：autowidth:true、scrollOffset、定义像素宽度++，但似乎都不起作用

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

代码：

描述我的问题的JSFIDLE：

确切显示我想要什么的JSFIDLE:。但是，我希望将jqgrid高度设置为“自动”，而不是确定的高度

解决方案：

非常感谢奥列格帮助我

如果设置jqgrid的高度，并且将其定义为高度：“自动”，则垂直滚动条的行为会有所不同

这就是我最后做的：

---

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

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

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

A顶级div

其中，外部div上的CSS用

位置：绝对
定义：

.myGridDiv{位置：绝对；底部：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演示

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

.ui jqgrid.ui jqgrid bdiv{
最大高度：100px；
溢出x：隐藏；
}
您使用的代码可以解释许多可以以不同方式解释的事情。问题是，jqGrid可以以不同的方式使用，只要你不能准确地解释你的案例。例如，您写道：“我希望jqgrid在“启动”时被初始化和隐藏。”。你的意思真的不清楚。选项
hiddengrid:true
实际上不这样做。您是使用
datatype:“local”
还是希望使用
datatype:“json”
从服务器加载数据？许多其他jqGrid选项和自定义CSS样式对于重现您描述的问题也很重要。感谢您的快速回复！我用我正在使用的代码进行了更新。问题是，我想在第一次进入页面时隐藏jqgrid。如果我想显示它，我可以按右边的展开按钮。hiddengrid:true使网格在我第一次进入页面时隐藏，但数据会加倍，因此它会变大两倍。当我有更多的时间时，我很快就会做一个JSFIDLE。也许这能更好地解释问题。我还是不明白你的意思。为什么要修改标准
jqgrid
类？你想做什么？标准方法是将寻呼机元素的
和
放置在另一个外部
中。您可以为外部
设置所需的任何样式，而无需修改jqGrid中的任何样式。您发布的代码不清楚。选项
colModel:colModel[0]
和
data:data[0]
不提供任何信息。这就像发布
$（“#table”）.jqGrid（选项）或只是发布
/*我的代码*/
。您无法使用这些信息重现您描述的问题。我建议您删除
scroll:true
选项。好吧。。我把它修好了。添加了一个JSFIDLE，因此您可以看到我的问题。我删除了scroll:true属性，然后我的数据没有翻倍。我做了这里建议的事情：如果达到某个高度，就让jqgrid滚动。但是，这会使垂直滚动条与右侧的列重叠。如果我定义一个高度而不是“自动”，它会按照我想要的方式工作。但是，我更喜欢不定义高度，而是“自动”，这样jqgrid将缩放，如果需要，将显示滚动。这比直接使用jqgrid css要好。我现在唯一的问题是，如果设置了较低的最大高度，滚动将与网格体重叠。看看这个小提琴手：@AreAlmaas:我仍然不确定我是否正确理解了你。也许你需要的是。我想你现在更了解这个问题了。虽然这（几乎）解决了我的问题，但如果该值更大，则滚动会重叠这些值。正如你在这把小提琴上看到的：最好是在网格的右侧有一个垂直滚动条大小的空白，这样垂直滚动条就不会与网格体重叠。这是到目前为止最好的方法。@AreAlmaas:对不起，我在您上次的演示中没有看到任何问题。jqGrid使用指定列的宽度。如果需要显示更大的整数值，则应增加
宽度的值。你在每一列都有同样的问题。所以滚动条不是真正的问题。此外，默认情况下，
title
属性会添加到单元格中，因此工具提示会显示全部值。是的，我可以看到。但如果这些值向右对齐，问题就会出现。然后垂直滚动条将重叠这些值。用户希望值与右边对齐，尽管小提琴的值与左边对齐。
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 }
    ]
});