爲什麼滾動條會覆蓋工具欄？

Question

我已使用scrollbars top and bottom中的代碼創建一個類似於頂部和底部滾動條鏈接上的內容的網格。但是當我使用

toolbar: [true, "top"], 

與

$('<div><input type="button" value="Send" /></div>').appendTo("#t_grid"); 

工具欄來添加的按鈕不會顯示而是隻顯示在頂部的滾動條。它似乎像滾動條覆蓋工具欄。

我有以下問題：

我如何包括我的按鈕工具欄與頂部滾動條來嗎？ （在此工具欄必須位於頂部滾動條上方）

Answer 1

The old demo，我爲the answer創建，使用頂部工具欄進行滾動。因此，頂部工具欄的所有內容（在你的情況下的「發送」按鈕）將被滾動。

一個人可以很容易地解決問題，插入一個單獨的div與頂部工具欄後的div。相應的代碼將爲

var $bdiv = $grid.closest(".ui-jqgrid-bdiv"), 
    $topToolbar = $("#t_" + $grid[0].id), 
    $scrollBar = $('<div class="ui-state-default" id="tscroll_' + $grid[0].id + 
     '" style="overflow-x:scroll;overflow-y:hidden;"><div style="height:1px;width:' + 
     $grid.width() + 'px;"></div></div>'); 

// insert the custom content in the top toolbar 
$('<div><input type="button" value="Send" /></div>').appendTo($topToolbar); 
$topToolbar.css("height", "auto"); 

// append the new div with the scroll bar on top of the grid 
$topToolbar.after($scrollBar[0]); 

// synchronize the scroll position of $scrollBar and $bdiv 
$scrollBar.scroll(function() { 
    // synchronize the srollbar of the grid 
    $bdiv.scrollLeft($(this).scrollLeft()); 
}); 
$bdiv.scroll(function() { 
    // synchronize the srollbar of the toppbar 
    $scrollBar.scrollLeft($(this).scrollLeft()); 
});