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中沒有這樣的問題。