2010-12-08 104 views
4

所以我有一个与jqGrid小显示问题。我不能说这是一个错误,但它会让我的用户感到困惑,所以我被要求处理它 - 但它似乎越来越好。如何隐藏jqGrid子网格上的水平滚动条?

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

当子网格加载时,加载的宽度为100%,效果很好。父网格扩展为允许显示整个子网格,并且父网格的水平滚动条允许您前后滚动以查看所有数据。无论是否显示子网格或显示多少个子网格,所有水平滚动都有一个滚动条。

不幸的是,子网格也显示了一个水平滚动条 - 但由于网格宽度为100%,这个滚动条并没有“做”任何事情 - 优化让用户认为没有更多的数据可以看到当他们试图用它来滚动并没有任何动作。

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

版本:

  • jQuery的 :          1.4.2
  • jQueryUI的 :    1.8.5
  • 的jqGrid  :            3.8.1
  • 浏览器 : 铬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(); 
       } 
      }); 
     } 
    }); 
}); 
+0

已经6年了,你有没有修复这个bug?请分享? – 2017-11-20 06:07:58

回答

-1

给分页和增加结果网格的高度,使得垂直滚动条将被移除。这又会移除水平滚动条。

+0

其实,我这样做,只适用于“主”或“外”网格。 Iit不适用于子网格。 – Tony 2010-12-23 15:32:51

0

我有同样的问题,我已经通过添加CSS来解决它。你可以这样做:

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