jquery - 如何隐藏 jqGrid 子网格上的水平滚动条？

Question

所以我在 jqGrid 方面遇到了一个小显示问题。我不能声称它本身就是一个错误，但它让我的用户感到困惑，因此我被要求处理它 - 但它似乎让我变得更好。

我正在使用子网格，其中展开父网格行会导致加载子网格(请参阅下面的代码)。我简化了整个配置，使其更易于阅读，主要是删除除一列之外的所有列并保持 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;
    }