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

Question

我已经使用 scrollbars top and bottom 中的代码创建了一个类似于 link 中带有顶部和底部滚动条的网格。但是当我使用

toolbar: [true, "top"],

和

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

添加了按钮的工具栏不会显示，而只会在顶部显示滚动条。滚动条似乎覆盖了工具栏。

我有以下问题：

如何将我的工具栏与按钮一起包含在顶部滚动条中？（在此工具栏必须位于顶部滚动条上方）

Answer 1

The old demo, which I created for the answer，使用顶部工具栏进行滚动。因此，顶部工具栏的所有内容（在您的情况下为 "Send" 按钮）都将滚动。

通过使用顶部工具栏在 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());
});

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

why the scrollbar override the toolbar?

jquery

jqgrid

free-jqgrid