Question

所以我对jqGrid有一个小的显示问题。我不能说它本身就是一个bug，但它让我的用户感到困惑，所以我被要求处理它 - 但它似乎越来越好了。

我正在使用子网格，其中扩展父网格行会导致加载子网格（请参阅下面的代码）。我已经简化了整个配置以使其更易于阅读，主要是通过删除除一列以外的所有配置并保持colModel简单。父网格有一个水平滚动条，可以从右向左滚动以查看可能不在屏幕上的数据。当屏幕足够大以显示所有数据时，父网格上的水平滚动条会消失。

当子网格加载时，它的加载宽度为100％，效果很好。父网格扩展以允许显示整个子网格，父网格的水平滚动条允许您来回滚动以查看所有数据。无论是否显示多个子网格，都有一个滚动条可用于所有水平滚动。

不幸的是，子网格也显示了一个水平滚动条 - 但由于网格宽度为100％，此滚动条不会“执行”任何操作 - 除了让用户误以为没有更多数据可供查看他们试图用它滚动而没有任何动作。

有没有办法通过jqGrid配置或CSS“魔法”我可以在子网格上隐藏这个水平滚动条？我使用了Chrome开发工具，但似乎没有专门与滚动条相关联的DIV标记，只有标题，标题和数据行。

版本：

的jQuery：1.4.2
jQueryUI的：1.8.5
的jqGrid：3.8.1
浏览器：Chrome 8，IE 8

jQuery(document).ready(function () {
    jQuery('#ParentGrid').jqGrid({
        url: '[URL TO GET DATA]',
        width: '100%',
        height: '100%',
        shrinkToFit: 'false',
        datatype: 'json',
        mtype: 'POST',
        jsonReader: { repeatitems: false },
        sortname: 'ParentRowID',
        sortorder: 'asc',
        colNames: [
            'Parent Row ID'
        ],
        colModel: [
            { name: 'ParentRowID', index: 'ParentRowID', width: 110, align: 'left' }
        ],
        gridComplete: function () {
            $('.ui-jqgrid-titlebar-close', '#ParentGrid').remove();
        },            
        subGrid: true,
        subGridRowExpanded: function (subgrid_id, row_id) {
            var subgrid_table_id = subgrid_id + '_t';
            $('#' + subgrid_id).html("<table id='" + subgrid_table_id + "' cellpadding='0' cellspacing='0'></table>");
            $('#' + subgrid_table_id).jqGrid({
                url: '[URL TO GET DATA BASED ON PARENT GRID SELECTED ROW ID]',
                width: '100%',
                height: '100%',
                shrinkToFit: 'false',
                datatype: 'json',
                mtype: 'POST',
                jsonReader: { repeatitems: false },
                sortname: 'ChildRowID',
                sortorder: 'asc',
                colNames: [
                    'Child Row ID'
                ],
                colModel: [
                    { name: 'ChildRowID', index: 'ChildRowID', width: 110, align: 'left' }
                ],
                gridComplete: function () {
                    $('.ui-jqgrid-titlebar-close', '#' + subgrid_table_id).remove();
                }
            });
        }
    });
});

Answer 1

我有同样的问题，我已经通过添加css解决了它。你可以这样做：

#ParentGrid .ui-jqgrid-bdiv{
        overflow-x:hidden;
    }

Answer 2

赋予分页并增加结果网格的高度，以便删除垂直滚动条。这反过来也会删除水平滚动条。

如何在jqGrid子网格上隐藏水平滚动条？

2 个答案: