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

Question

我有一个带有子网格的网格。在网格初始化期间，我的高度设置为“自动”，但我还在初始化后设置了它的最大高度，这样如果高度超过“500px”我就可以有垂直滚动条。我不需要水平滚动条，我已经为它定义了 css 规则:

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

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

在下图中，滚动条位于最后一列的内部:

但在它下面表示 scrollOffset 及其在最后一列的外部:

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

请关注test我从某人的测试中创建来重现我的问题。

我的实际网格设置为“shrinkToFit”并且隐藏了 overflow-x(用于其他目的)。除此之外， fiddle 描述了我的场景。

欢迎提出任何建议或意见。谢谢

$("#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 将 shr​​ink 选项设置为 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: 可以不使用 shr​​inkToFit: 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/