jqGrid中的水平滚动条答案

【问题标题】：Horizontal Scroll Bar in jqGridjqGrid中的水平滚动条
【发布时间】：2011-11-24 08:17:50
【问题描述】：

我在我的项目中的两个地方使用 jqGrid。

在第一个示例代码中，它运行完美，出现了水平条......

第一个 jqGrid 的示例代码示例代码：

jQuery("#list2").jqGrid({
    url:'server1.php?P1=ACNO,APHID',
    datatype: "json",
    colNames:[
        'ACNO','APHID'
    ],
    colModel:[
        {name:'ACNO',index:'ACNO', width:80, sortable:true, search:true},
        {name:'APHID',index:'APHID', width:80, sortable:true, search:true}
    ],
    rowNum:100,
    rowList:[100,200,300,400],
    pager: '#pager2',
    loadonce: true,
    sortname: 'geneID',
    viewrecords: true,
    width:700,
    shrinkToFit:false,
    height:700,
    sortorder: "desc",
    caption:"Breeder Tool Box"
});

第二个 jqGrid 的示例代码示例代码：

jQuery("#list2").jqGrid({
    url:'server4.php?P1=NEMATODE',
    datatype: "json",
    colNames:['Linkage_group','Chromosome','Start_Position','Stop_Position','Start','End','geneID','Feature_Type','Feature_Name','Mstart','Mstop','Trait'],
    colModel:[
        {index: 'Linkage_group', name: 'Linkage_group',width:170, sortable:true, search:true},
        {index: 'Chromosome', name: 'Chromosome',width:170, sortable:true, search:true},
        {index: 'Start_Position', name: 'StartPos',width:170, sortable:true, search:true},
        {index: 'Stop_Position', name: 'StopPos',width:170, sortable:true, search:true},
        {index: 'Start', name: 'Start',width:170, sortable:true, search:true},
        {index: 'End', name: 'End',width:170, sortable:true, search:true},
        {index: 'geneID', name: 'geneID',width:170, sortable:true, search:true,formatter: formatOperations},
        {index: 'Feature_Type', name: 'Feature_Type',width:170, sortable:true, search:true},
        {index: 'Feature_Name', name: 'Feature_Name',width:170, sortable:true, search:true},
        {index: 'Mstart', name: 'Mstart',width:170, sortable:true, search:true},
        {index: 'Mstop', name: 'Mstop',width:170, sortable:true, search:true},
        {index: 'Trait', name: 'Trait',width:170, sortable:true, search:true}],
    rowNum:100,
    rowList:[100,200,300,400],
    pager: '#pager2',
    loadonce: true,
    shrinkToFit:false,
    viewrecords: true,
    width:700,
    height:700,
    sortorder: "desc",
    caption: "Breeder Tool Box",
    sortname: 'Linkage_group'
});

第二个网格的jqGrid 全部扭曲，没有水平条。我无法找到这两个代码之间的区别，你能指出我的错误在哪里吗？

【问题讨论】：

我认为水平条的问题不在您发布的代码中。它应该在发布代码的代码中。例如，可能是 HTML 或 CSS 的一些问题。
我不确定，您是否理解index 属性的正确含义。在第二个网格中，您对 index 和 name（index: 'Start_Position', name: 'StartPos' 和 index: 'Stop_Position', name: 'StopPos'）使用不同的值。在第一个网格中，您定义了 sortname: 'geneID' 并且没有列 'geneID'。所有问题都与单杠问题无关，但存在错误。属性search 和sortable 具有默认值true，因此您可以在那里删除。如果要更改列的默认属性，可以使用 cmTemplate: {width:170} 并减少代码。

标签： jquery jqgrid

【解决方案1】：

你可以用 css 做到这一点。在ui.grid.css中更改以下内容

.ui-jqgrid .ui-jqgrid-bdiv {
  position: relative; 
  margin: 0em; 
  padding:0; 
  /*overflow: auto;*/ 
  overflow-x:visible; 
  overflow-y:auto; 
  text-align:left;
}

【讨论】：

我更改了 CSS，但我看不出有什么不同。这一切又被扭曲了。
非常感谢您的解决方案。它帮助我解决了这个问题:)。