滚动时修复列标题 - jqgrid答案

【问题标题】：fixing column headers while scrolling - jqgrid滚动时修复列标题 - jqgrid
【发布时间】：2013-09-11 17:50:16
【问题描述】：

如果我的网格数据在当前窗口上滚动，是否可以在滚动数据时冻结列标题，以便列标题始终可见（如在 excel 中）。我正在使用 height: 'auto' 因为我不想修复我的网格高度。提前谢谢...

【问题讨论】：

我不确定我是否理解您的问题。 jqGrid 的默认行为已经如此：只有带有数据的主体会滚动，但列标题保持可见。你能更准确地解释这个问题吗？图片也可能会有所帮助。
我已经添加了图片。基本上我想要动态高度，但是当我得到窗口滚动条时，第三张图片显示标题在滚动时不可见。是否可以修复列标题？

标签： jqgrid

【解决方案1】：

如果网格是页面上最顶层的元素，那么position: fixed 的使用会很有帮助。代码可能如下

var $hdiv = $($grid[0].grid.hDiv),
    hOffset = $hdiv.offset(),
    $cdiv = $($grid[0].grid.cDiv),
    cOffset = $cdiv.offset(),
    $bdiv = $($grid[0].grid.bDiv);
// change gbox position
$bdiv.parent().parent().css({
    position: "relative",
    top: $bdiv.offset().top,
    left: 0});
// make header and capture fixed
$hdiv.css({
    position: "fixed",
    zIndex: 1,
    top: hOffset.top - cOffset.top,
    left: hOffset.left
});
$cdiv.css({
    position: "fixed",
    zIndex: 1,
    top: 0,
    left: cOffset.left,
    width: $cdiv.width()
});

见the demo。

【讨论】：

如果网格位于页面中心怎么办？我该怎么办？？
@SanthoshKumar：您可以定义 outer div 放置用于创建网格的 <table>。如果您将 outer div 居中，例如使用 <div style="display: table; margin: 0 auto;">，那么网格也会在页面上水平居中。

【解决方案2】：

这是内置在 jqgrid 中的。但是，为了使用此功能，您需要调整网格本身的大小以适应窗口，然后在窗口调整大小时让它调整大小。这将允许滚动发生在网格本身内，而不是在整个文档内。见下文：

$(window).resize(function () {
  resizeGrid();
});

$(window).load(function() {
  resizeGrid();
});

function resizeGrid() {
  var heightPadding = 200; // or whatever you want it to be
  var widthPadding = 40; // or whatever you want it to be
  $('#grid').setGridHeight($(window).height() - heightPadding);
  $('#grid').setGridWidth($(window).width() - widthPadding);
}

【讨论】：

【解决方案3】：

根据他们的文档和演示，这似乎应该自动发生。尝试将高度设置为像素值，看看会发生什么。

【讨论】：

Zero21xxx：感谢您的回复，我想它可以在固定高度下工作，但正如我所提到的，我不想修复我的网格高度，因为网格高度可能会根据网格中填充的数据而改变。 ..
如果你想保持两个值之间的高度，你可以设置一个最小高度和一个最大高度。如果您不想设置任何高度，那么如果没有大量自定义 jqGrid 代码，您实现这一目标的选择几乎是不可能的，我很抱歉。

【解决方案4】：

这对我有用（没有网格 css 编辑）

document.getElementById("gview_" + gridID).style.height = "100%";
document.getElementById(gridID).parentNode.parentNode.style.height = "100%";
document.getElementById(gridID).parentNode.style.height = "100%";
document.getElementById(gridID).parentNode.style.overflow = "auto";

您必须在网格初始化后使用此代码，并且您必须使用此 id 调用您的网格来设置样式：

document.getElementById("gbox_" + gridID).style.width = "100%";
document.getElementById("gbox_" + gridID).style.height = "100%";

或

document.getElementById("gbox_" + gridID).style.top = "0px";
document.getElementById("gbox_" + gridID).style.left = "0px";
document.getElementById("gbox_" + gridID).style.bottom = "40px";
document.getElementById("gbox_" + gridID).style.right = "0px";
document.getElementById("gbox_" + gridID).style.position = "absolute";

列标题始终可见！

希望对您有所帮助！

【讨论】：