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

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