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

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

1 个答案: