为什么滚动条会覆盖工具栏？

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()); 
});