jqgrid rtl水平滚动条问题

Question

当我调整我的网格大小和水平滚动条出现时，我发现为它创建了一个额外的空间，但我仍然在其他网格列上看到它。我想只在最左边的列上看到这个滚动条。

这是我的代码：

$(function() 
    {    
     $("#gridTable").jqGrid(
     { 
      editurl: "clientArray", 
      direction:"rtl", 
      datatype: "local", 
      colNames:['Code1','Code2', 'Code3', 'Code4','Code5','Code6','Code7','Code8','Code9'], 
      colModel:[ 
             {name:'code1',index:'code1', width:60, sorttype:"int" , editable:true, edittype:'text'}, 
             {name:'code2',index:'code2', width:150, sorttype:"date" , editable:true, edittype:'text'}, 
             {name:'code3',index:'code3', width:150 , editable:true, edittype:'text'}, 
             {name:'code4',index:'code4', width:80, sorttype:"float" , editable:true, edittype:'text'}, 
             {name:'code5',index:'code5', width:80, sorttype:"float" , editable:true, edittype:'text'}, 
             {name:'code6',index:'code6', width:80, sorttype:"float" , editable:true, edittype:'text'}, 
             {name:'code7',index:'code7', width:80, sortable:false , editable:true, edittype:'text'}, 
             {name:'code8',index:'code8', width:80, sorttype:"float" , editable:true, edittype:'text'}, 
             {name:'code9',index:'code9', sorttype:"float" , editable:true, edittype:'text'}, 
            ],     
      height: '120px' , 
      scrolling: true, 
      autowidth: true, 
      shrinkToFit: false     
      }); 

      $("#gridTable").closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' }); 

      var mydata = [ 
       {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
       {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
       {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
       {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
       {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
       {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
       {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
    ]; 

      for(var i=0;i<=mydata.length;i++) 
        jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]); 
    }); 

，这是问题的一个画面：

任何帮助将appritiated，

感谢的提前。

Answer 1

尝试验证谷歌浏览器或Safari浏览器中是否存在水平滚动条的问题。如果在浏览器中你将没有水平滚动条，那你遇到的问题与我描述的here相同。

jqGrid在shrinkToFit:false的情况下有错误的宽度计算的问题。我的修复bug的建议是在GitHub上的jqGrid代码中实现的，并且会在下一个jqGrid版本的代码中确定。因此，您可以尝试使用GitHub中的jqGrid的开发人员（非最小化版本），或者像在the bug report中所述的那样明确设置网格的width。

另一个解决方法：您可以修复关于fixGridWidth功能的网格宽度，该功能代码是我发布的here。

已更新：我再次看了这个问题，可以说您的问题真的主要来自jqGrid中的错误，如果使用shrinkToFit:false。的jqGrid的代码（bug修复后）和小的变化一行在jqGrid的定义变更后的电网将是以下

你可以看到它住here。对应的代码是

$(function() { 
    var mydata = [ 
     {id:"1",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
     {id:"2",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
     {id:"3",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
     {id:"4",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
     {id:"5",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
     {id:"6",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}, 
     {id:"7",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""} 
    ]; 
    $("#gridTable").jqGrid({ 
     editurl: "clientArray", 
     direction:"rtl", 
     datatype: "local", 
     data: mydata, 
     colNames:['Code1','Code2', 'Code3', 'Code4','Code5','Code6','Code7','Code8','Code9'], 
     colModel:[ 
      {name:'code1',index:'code1', width:60, sorttype:"int", editable:true}, 
      {name:'code2',index:'code2', width:150, sorttype:"date", editable:true}, 
      {name:'code3',index:'code3', width:150, editable:true}, 
      {name:'code4',index:'code4', width:80, sorttype:"float", editable:true}, 
      {name:'code5',index:'code5', width:80, sorttype:"float", editable:true}, 
      {name:'code6',index:'code6', width:80, sorttype:"float", editable:true}, 
      {name:'code7',index:'code7', width:80, sortable:false, editable:true}, 
      {name:'code8',index:'code8', width:80, sorttype:"float", editable:true}, 
      {name:'code9',index:'code9', sorttype:"float", editable:true} 
     ], 
     height: 'auto', 
     shrinkToFit: false 
    }); 
}); 

代码修复小错误在你的代码，使最小的优化与尊重data参数，而不是addRowData的用法。在你的代码的小错误是以下几点：

• 在mydata初始化结束在你面前逗号“]”，这是语法错误。您在colModel的定义中遇到同样的错误。 ']'前应删除两个逗号。在使用data的情况下，将严格建议在mydata阵列中的每个项目的定义中包含其他id属性。 id将定义相应的行ID。您将尝试访问未定义的元素mydata[mydata.length]。该循环应更改为for(var i=0;i<mydata.length;i++)。更好的方法是在data参数上填充网格（请参阅上面的代码）。
• 在所有列中使用的参数edittype:'text'是默认值，因此您可以将其删除。
• jqGrid中不存在jqGrid参数scrolling: true，它将被jqGrid忽略。
• jqGrid参数autowidth: true对我来说好像不太好，因为它会随着网格宽度的变化而跟shrinkToFit: false一起使用。因此，您将在网格中有横向滚动条，因为autowidth: true或者您将有许多可用空间作为网格的一部分。
• 设置网格高度明确像height: '120px'而不是height: 'auto'也可以遵循垂直滚动条，这将采取网格宽度。所以也可以看到单杠。

修订：我建议还看the demo和this one从the comment。

更新2：free jqGrid中没有这样的问题。