Jqgrid垂直滚动条显示在网格中最后一列的内部，而不是在scrollbarOffset列中

Question

我有一个带有子网格的网格。在网格初始化期间，我的高度设置为'auto'但我也在初始化后设置其最大高度，所以如果高度超过'500px'，我可以有垂直滚动条。我不需要水平滚动条，我已经为它定义了css规则：

overflow-x: hidden; 
overflow-y: auto;

scrollOffset默认为18px。但是，当我的网格展开以显示子网格时，scollbar在最后一列中可见，而不是在scrollbarOffset列中显示。

在下图中，看到滚动条位于最后一列：

但是在它的下方是为了纪念scrollOffset及其在最后一栏之外：

如果已达到最大高度，我希望我的滚动条位于scrollbarOffset列中。

请按照某人测试中创建的test来重新创建我的问题。

我的实际网格设置为'shrinkToFit'并且overflow-x被隐藏（其他用途需要）。除此之外，小提琴描述了我的情景。

欢迎任何建议或意见。感谢

$("#grid").jqGrid({
datatype: "local",
height: 'auto',
colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
colModel: [{
    name: 'id',
    index: 'id',
    width: 60,
    sorttype: "int"},
{
    name: 'thingy',
    index: 'thingy',
    width: 90,
    sorttype: "date"},
{
    name: 'blank',
    index: 'blank',
    width: 30},
{
    name: 'number',
    index: 'number',
    width: 80,
    sorttype: "float"},
{
    name: 'status',
    index: 'status',
    width: 80,
    sorttype: "float"}
],
pager: 'pagerId',
caption: "Stack Overflow Subgrid Example",
subGrid: true,
subGridOptions: { "plusicon" : "ui-icon-triangle-1-e",
                  "minusicon" :"ui-icon-triangle-1-s",
                  "openicon" : "ui-icon-arrowreturn-1-e",
                  "reloadOnExpand" : false,
                  "selectOnExpand" : true },
subGridRowExpanded: function(subgrid_id, row_id) {
    var subgrid_table_id, pager_id; subgrid_table_id = subgrid_id+"_t";
    pager_id = "p_"+subgrid_table_id;
    $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
    $("#"+subgrid_table_id).jqGrid({
        datatype: "local",
        colNames: ['No','Item','Qty'],
        colModel: [ {name:"num",index:"num",width:80,key:true},
                    {name:"item",index:"item",width:130},
                    {name:"qty",index:"qty",width:70,align:"right"}], 
        rowNum:20,
        pager: pager_id,
        sortname: 'num',
        sortorder: "asc", height: '100%' });
     $("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});

     var subNames = ["num", "item", "qty"];
     var mysubdata = [];
     for (var i = 0; i < subgridData.length; i++) {
        mysubdata[i] = {};
        for (var j = 0; j < subgridData[i].length; j++) {
            mysubdata[i][subNames[j]] = subgridData[i][j];
         }
     }
     for (var i = 0; i <= mysubdata.length; i++) {
       $("#"+subgrid_table_id).jqGrid('addRowData', i + 1, mysubdata[i]);
     }
}
});

Answer 1

很抱歉，但我想知道你在哪里得到如此糟糕的代码示例！我在许多变化中多次看到这个例子。这真的很糟糕。

jsfiddle演示中的主要问题：使用不需要的CSS规则，这是滚动条问题的根源。

我将演示修改为以下http://jsfiddle.net/OlegKi/MZ9ue/2529/。它使用以下格式的输入数据：

var mydata = [
    {
        id: 48803, thingy: "DSK1", number: "02200220", status: "OPEN",
        subgridData: [
            {num: 1, item: "Item 1", qty: 3},
            {num: 2, item: "Item 2", qty: 5}
        ]
    },
    {
        id: 48769, thingy: "APPR", number: "77733337", status: "ENTERED",
        subgridData: [
            {num: 3, item: "Item 3", qty: 5},
            {num: 2, item: "Item 2", qty: 10}
        ]
    }
];

因此，每一行主数据都包含有关子网格数据的信息。显示主网格和子网格的代码如下所示。

$("#grid").jqGrid({
    datatype: "local",
    data: mydata,
    height: 'auto',
    colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
    colModel: [
        { name: 'id', width: 60, sorttype: "int", key: true},
        { name: 'thingy', width: 90},
        { name: 'number', width: 80, formatter: "integer" },
        { name: 'status', width: 80}
    ],
    gridview: true,
    autoencode: true,
    pager: '#pagerId',
    caption: "Stack Overflow Subgrid Example",
    subGrid: true,
    subGridOptions: {
        plusicon: "ui-icon-triangle-1-e",
        minusicon: "ui-icon-triangle-1-s",
        openicon : "ui-icon-arrowreturn-1-e"
    },
    subGridRowExpanded: function(subgrid_id, row_id) {
        var subgrid_table_id = subgrid_id+"_t",
            pager_id = "p_"+subgrid_table_id,
            localRowData = $(this).jqGrid("getLocalRow", row_id);
        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"'></table><div id='"+pager_id+"'></div>");
        $("#"+subgrid_table_id).jqGrid({
            datatype: "local",
            data: localRowData.subgridData,
            colNames: ['No', 'Item', 'Qty'],
            colModel: [
                { name: "num", width: 80, key: true },
                { name: "item", width: 130 },
                { name: "qty", width: 70, align: "right" }
            ],
            rowNum: 20,
            idPrefix: "s_" + row_id + "_",
            pager: "#" + pager_id,
            autowidth: true,
            gridview: true,
            autoencode: true,
            sortname: "num",
            sortorder: "asc",
            height: "auto"
        }).jqGrid('navGrid', "#" + pager_id, {edit: false, add: false, del: false});
    }
});

它正确显示数据并显示jqGrid使用的正确示例。

更新：如果我能正确理解您的问题，您可以在演示http://jsfiddle.net/OlegKi/MZ9ue/2530/上执行以下操作：

我添加了jqGrid选项

shrinkToFit: false,
width: 377,

这样网格的总宽度将是所有列的宽度之和加上一个具有滚动条的位置。可以使用setGridWidth动态设置值，shrink选项设置为false。然后我添加了行

$('#grid').closest('div.ui-jqgrid-bdiv').css("max-height", "220px");

在网格的body div上设置max-height，最后我添加了CSS规则

.ui-jqgrid .ui-jqgrid-bdiv {
    overflow-y: scroll
}

结果将得到结果

最初和以下

打开子网格后。

更新2 ：用户可以不使用shrinkToFit: false和width: 377选项，而是使用以下代码：

var $bDiv = $('#grid').closest('div.ui-jqgrid-bdiv'),
    clientWidth = $bDiv[0].clientWidth, //$bDiv.width(),
    scrollWidth = $bDiv[0].scrollWidth,
    scrollBarWidth = $bDiv[0].scrollWidth - $bDiv[0].clientWidth;

$('#grid').jqGrid("setGridWidth", scrollWidth + scrollBarWidth, false);

再看一个演示http://jsfiddle.net/OlegKi/MZ9ue/2531/