jqGrid水平滾動條在標題頂部

Question

只是好奇，如果有人知道一種方法來添加一個水平滾動條到jqGrid的頂部（就像在標題下或上面）？我正在使用凍結列和高度：自動但當有很多行時，用戶必須向下滾動以水平滾動網格，並且看不到標題... 我做了一些搜索，它看起來像滾動條在大多數情況下很難處理，但我想我只是把它放在那裏。

謝謝！

Answer 1

我覺得你的問題很有趣。我投入了一些時間並創建了the following demo，它演示瞭如何實現您的需求。它顯示

其中一個可以在頂部或者在網格的底部同時使用水平滾動條。我使用the answer作爲創建頂部滾動條的基礎。此外，我還包含了固定所有jqGrid潛水的大小和位置的代碼部分，以防用戶在Web瀏覽器中使用縮放。

我的答案的代碼的最重要的部分下面我包括：

var $grid = $("#list"); 
// create the grid with some frozen columns 
$grid.jqGrid({ 
    .... 
}); 

var $gview = $grid.closest(".ui-jqgrid-view"), 
    $topToolbar = $gview.find(">.ui-userdata"), 
    $bdiv = $grid.closest(".ui-jqgrid-bdiv"), 
    resetTopToolbarHeight = function() { 
     var scrollbarHeight = 18; // some test value 
     $topToolbar.find(">div").height(scrollbarHeight); 
     $topToolbar.css("border-top", "0").css("height", "auto"); 
     scrollbarHeight = $topToolbar.height() - scrollbarHeight; 
     $topToolbar.find(">div").height(scrollbarHeight); 
     $topToolbar.height(scrollbarHeight); 
     fixPositionsOfFrozenDivs.call($grid[0]); 
    }; 
// insert empty div in the top toolbar and make its width 
// the same as the width of the grid 
$topToolbar.css({ overflowX: "scroll", overflowY: "hidden"}) 
    .append($("<div>").width($grid.width())); 
// set the height of the div and the height of toolbar 
// based on the height of the horizontal scrollbar 
resetTopToolbarHeight(); 
// detect scrolling of topbar 
$topToolbar.scroll(function() { 
    // synchronize the srollbar of the grid 
    $bdiv.scrollLeft($(this).scrollLeft()); 
}); 
// detect scrolling of the grid 
$bdiv.scroll(function() { 
    // synchronize the srollbar of the toppbar 
    $topToolbar.scrollLeft($(this).scrollLeft()); 
}); 
// detect zoop of the page and adjust the 
$(window).on("resize", function() { 
    resetTopToolbarHeight(); 
    fixPositionsOfFrozenDivs.call($grid[0]); 
}); 

的代碼，我從我的約凍結列的使用舊的答案得到的其他部分。