jquery - jqGrid水平滚动条在顶部由标题

Question

只是好奇是否有人知道将水平滚动条添加到 jqGrid 顶部的方法（例如在标题下方或上方）？我正在使用冻结列和高度：自动但是当有很多行时，用户必须向下滚动才能水平滚动网格并且看不到标题......我做了一些搜索，看起来滚动条很难在大多数情况下会弄乱，但我想我会把它放在那里。

谢谢！

Answer 1

我觉得你的问题很有趣。我投入了一些时间并创建了以下演示，演示了如何实现您的要求。它显示

可以同时使用网格顶部或底部的水平滚动条。我使用答案作为创建顶部滚动条的基础。此外，如果用户在 Web 浏览器中使用缩放，我还包括了固定所有 jqGrid 潜水的大小和位置的代码部分。

我的答案代码中最重要的部分包括在下面：

var $grid = $("#list");
// create the grid with some frozen columns
$grid.jqGrid({
    ....
});

var $gview = $grid.closest(".ui-jqgrid-view"),
    $topToolbar = $gview.find(">.ui-userdata"),
    $bdiv = $grid.closest(".ui-jqgrid-bdiv"),
    resetTopToolbarHeight = function () {
        var scrollbarHeight = 18; // some test value
        $topToolbar.find(">div").height(scrollbarHeight);
        $topToolbar.css("border-top", "0").css("height", "auto");
        scrollbarHeight = $topToolbar.height() - scrollbarHeight;
        $topToolbar.find(">div").height(scrollbarHeight);
        $topToolbar.height(scrollbarHeight);
        fixPositionsOfFrozenDivs.call($grid[0]);
    };
// insert empty div in the top toolbar and make its width
// the same as the width of the grid
$topToolbar.css({ overflowX: "scroll", overflowY: "hidden"})
    .append($("<div>").width($grid.width()));
// set the height of the div and the height of toolbar
// based on the height of the horizontal scrollbar
resetTopToolbarHeight();
// detect scrolling of topbar
$topToolbar.scroll(function () {
    // synchronize the srollbar of the grid
    $bdiv.scrollLeft($(this).scrollLeft());
});
// detect scrolling of the grid
$bdiv.scroll(function () {
    // synchronize the srollbar of the toppbar
    $topToolbar.scrollLeft($(this).scrollLeft());
});
// detect zoop of the page and adjust the
$(window).on("resize", function () {
    resetTopToolbarHeight();
    fixPositionsOfFrozenDivs.call($grid[0]);
});

我从关于使用冻结列的旧答案中获得的代码的其他部分。