如何防止滾動條在jqGrid中顯示？

我正在使用jqGrid並出現一個水平滾動條。我怎樣才能阻止這種情況發生？如何防止滾動條在jqGrid中顯示？

jqGrid with scrollbar

來源

2010-09-09 GiddyUpHorsey

你有沒有編輯css或js上的東西？嘗試使用固定寬度 – 2010-09-09 00:48:49

發佈可用於重現問題的代碼示例（HTML，CSS，JavaScript和測試JSON/XML數據）總是好的，或發佈鏈接到可以查看和分析問題的頁面。 – Oleg 2010-09-09 12:33:43

有時會因爲不同的問題的網格大小將是錯誤的計算，一個有水平滾動條。問題大多是基於

在CSS中的一些變化，其繼承的jqGrid沒有在不同瀏覽器中的jqGrid
不同的繼承實現的CSS樣式的cellLayout參數的改變jqGrid的寬度計算算法
錯誤。填充數據後，網格大小將無法正確調整。

在我的ASP.NET MVC項目中，我大多數網格列的寬度是5像素，然後將總網格寬度增加到5 * colNumbers。

錯誤的網格寬度的問題很難調試和修復。所以前一段時間我寫了一個實用的解決方法，我第一次在我的回答Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog中建議。解決方法的想法是將網格的大小與將滾動的網格部分的scrollWidth屬性進行比較。如果存在滾動條並且網格的大小小於包含網格的頁面元素的大小，那麼我們只需增加網格寬度並且滾動條消失。

例如，我們有以下與jqGrid的表HTML片段

<div id="main"> 
<table id="grid"><tr><td/></tr></table> 
<div id="pager"/> 
</div>

然後將模式如何修復水平滾動問題可以如下：

jQuery(document).ready(function() { 
    var fixGridWidth = function (grid, mainBlockSelector) { 
     // fix wrong width calculation 5 pixel per column 
     //var gview = jQuery("#gview_" + grid[0].id); // like "#gview_grid" 
     //var gview = grid.parent().parent().parent(); 
     var gviewDomElement = grid[0].parentNode.parentNode.parentNode; 
     var gviewScrollWidth = gviewDomElement.scrollWidth; 
     var mainWidth = jQuery(mainBlockSelector).width(); 
     var gridScrollWidth = grid[0].scrollWidth; 
     var htable = jQuery('table.ui-jqgrid-htable', gviewDomElement); 
     var scrollWidth = gridScrollWidth; 
     if (htable.length > 0) { 
      var hdivScrollWidth = htable[0].scrollWidth; 
      if ((gridScrollWidth < hdivScrollWidth)) { 
       // max (gridScrollWidth, hdivScrollWidth) 
       scrollWidth = hdivScrollWidth; 
      } 
     } 
     if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) { 
      // min (scrollWidth, mainWidth) 
      var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth; 
      // if the grid has no data, gridScrollWidth can be less 
      // then hdiv[0].scrollWidth 
      if (newGridWidth != gviewScrollWidth) { 
       grid.jqGrid("setGridWidth", newGridWidth); 
      } 
     } 
    }; 

    var grid = jQuery("#grid"); 
    grid.jqGrid({ 
     // ... all like allways 
     loadComplete: function(data) { 
      // do all what you need and then at the end fix the wigth: 
      fixGridWidth(grid,"#main"); 
     }, 
     // ... other jqGrid options 
    }; 
});

在代碼中，我的開始在主網格表上使用由不同div和表格組成的網格結構和數據。您可以使用IE8或Chrome開發人員工具，Firebug的其他工具查看此結構。我在其他問題jqGrid get th and thead using Jquery和jqGrid footer cells 「inherits」 CSS from cells in the main grid的舊回答中描述了此結構的大部分部分。

嘗試使用這種方法。它不會搜索滾動問題的原因，但它可以解決水平滾動問題。

來源

2010-09-09 13:49:44 Oleg

如果這仍然不起作用和如果你已經改變了CSS嘗試

'cellLayout' => 21,

來源

2011-04-16 16:21:18 dlewicki

我嘗試了許多解決方案，用於固定水平滾動條問題，但並沒有完全成功。最適合我的最簡單的解決方案（在所有瀏覽器上測試過）：

loadComplete: function(data) { 
    fixGridWidth($("#grid")); 
} 

function fixGridWidth(grid) { 
    grid.setGridWidth($(window).width()); 
}

來源

2011-12-09 23:39:38 varaprakash

如何防止滾動條在jqGrid中顯示？

回答

相關問題