冻结 gridview 标头和 SUB 标头答案

【问题标题】：Freezing gridview header and SUB headers冻结 gridview 标头和 SUB 标头
【发布时间】：2014-10-27 14:08:37
【问题描述】：

在 SO 和其他地方提出了多个关于冻结/固定 GridView 标头的问题。我目前正在为单个标题 GridView 使用其中一个插件。

但它不是很优雅。由于调用 jQuery 函数后标题列与数据列不对齐。

带圆圈的列轮廓显示“未对齐”。

除了未对齐的问题外，还需要冻结另一个 GridView 的标题和子标题，如下所示。

现在这引起了一些担忧。

为子标题编写新的 jQuery 插件。 The plug-in I am currently using refers to this post. 我需要大量的知识支持来写一个新的。
创建两个不同的 Gridview，一个用于标题，一个用于数据。并且会有对齐问题（因为它是最早的设计）。此外，所有这些网格视图都执行 DML/CRUD 操作。
是否可以为标题编写html代码并隐藏GridView的标题？然而，这在管理与内容/数据相关的动态对齐方面也将面临挑战。

鉴于这种情况和选项，我只是对成本更低（时间/精力）的方向感到困惑，但对于未来的更新具有灵活性。也感谢编辑当前 jquery 函数以适应单个标题 GridView 的正确对齐的任何见解。

【问题讨论】：

标签： c# jquery asp.net gridview jquery-plugins

【解决方案1】：

由于您已经为此使用了一个插件，相信您使用另一个插件应该不难，但这次它应该使您的标题宽度与您的数据列对齐。确保使用ItemStyle-Width 属性为boundcolumn 或TemplateField 定义/调整列宽

链接到 GridViewScroll Demo 可以完美地完成这项工作。从here 下载插件。对于类似的问题，请参考我在 SO 上的其他答案 here 和 here

这里是代码

<script type="text/javascript"      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="gridviewScroll.min.js"></script>
<link href="GridviewScroll.css" rel="stylesheet" />

function pageLoad(sender, args) {
   gridviewScroll ();
}

function gridviewScroll() {
   gridView1 = $('#GridView1').gridviewScroll({
        width: 915,
        height: 449,
        railcolor: "#F0F0F0",
        barcolor: "#CDCDCD",
        barhovercolor: "#606060",
        bgcolor: "#F0F0F0",
        freezesize: 5,
        arrowsize: 30,
        varrowtopimg: "../../../images/arrowvt.png",
        varrowbottomimg: "../../../images/arrowvb.png",
        harrowleftimg: "../../../images/arrowhl.png",
        harrowrightimg: "../../../images/arrowhr.png",
        headerrowcount: 1,
        onScrollVertical: function (delta) {
         // store the scroll offset outside of this function in a hidden field and restore if you want to maintain vertical scroll position
        },
        onScrollHorizontal: function (delta) {
          //store the scroll offset outside of this function in a hidden field and restore if you want to maintain horizontal scroll position
        }
    });
}

【讨论】：