jqGrid水平滚动条顶部的标题

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

谢谢！

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($("
").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]); }); 

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