我正在使用jqGrid並出現一個水平滾動條。我怎樣才能阻止這種情況發生?如何防止滾動條在jqGrid中顯示?
0
A
回答
1
有時會因爲不同的問題的網格大小將是錯誤的計算,一個有水平滾動條。問題大多是基於
- 在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的舊回答中描述了此結構的大部分部分。
嘗試使用這種方法。它不會搜索滾動問題的原因,但它可以解決水平滾動問題。
0
如果這仍然不起作用和如果你已經改變了CSS嘗試
'cellLayout' => 21,
0
我嘗試了許多解決方案,用於固定水平滾動條問題,但並沒有完全成功。最適合我的最簡單的解決方案(在所有瀏覽器上測試過):
loadComplete: function(data) {
fixGridWidth($("#grid"));
}
function fixGridWidth(grid) {
grid.setGridWidth($(window).width());
}
相關問題
- 1. 防止QScrollArea顯示水平滾動條
- 2. 防止顯示水平滾動條? (C#)
- 3. 如何在jqgrid中顯示水平滾動條
- 4. 如何在jqGrid中顯示垂直滾動條
- 5. C#MDI - 如何防止滾動條?
- 6. 防止在元素頂部顯示滾動條
- 7. 防止浮動元素纏繞(改爲顯示滾動條)
- 8. 如何在UITableView中顯示滾動條
- 9. 如何在NestedScrollView中顯示滾動條
- 10. 防止滾動條出現
- 11. 防止鍵盤顯示滾動iOS 6
- 12. 顯示網頁時防止垂直滾動條?
- 13. 防止顯示Silverlight ListBox垂直滾動條
- 14. 防止滾動條隱藏在froyo上
- 15. 如何防止TADORecordset滾動?
- 16. 如何防止TouchEvent滾動
- 17. CSS - 如何防止瀏覽器顯示滾動條時,div離開窗口?
- 18. PrimeFaces 3.0 - 如何防止<p:layoutUnit>顯示邊框和/或滾動條?
- 19. 如何防止自動滾動DataGrid中
- 20. 防止在HTML5中滾動
- 21. 如何防止在NSMenuItem中顯示keyEquivalent
- 22. 如何防止在URL中顯示JSESSIONID
- 23. 如何防止DataGrid RowDetails停止滾動?
- 24. 如何防止在PropertyGrid刷新滾動?
- 25. 在無限滾動時防止滾動條跳轉
- 26. 如何在Bing Maps API中顯示完整的地圖並防止滾動
- 27. 如何防止null顯示?
- 28. WPF/Silverlight:防止滾動條上的ScaleTransform
- 29. 防止內容重疊滾動條
- 30. 防止NSScrollView閃爍其滾動條
你有沒有編輯css或js上的東西?嘗試使用固定寬度 – 2010-09-09 00:48:49
發佈可用於重現問題的代碼示例(HTML,CSS,JavaScript和測試JSON/XML數據)總是好的,或發佈鏈接到可以查看和分析問題的頁面。 – Oleg 2010-09-09 12:33:43