javascript - "Floating"Gridview标题

Question

在 ASP.NET 中是否有办法拥有一个“ float ”标题，就像您在 Excel 工作表中看到的标题一样，当您滚动时，该标题会跟随您向下滚动？

或者，更简单的方法可能是让标题出现在每一行之后，例如:

Header 1 | Header 2 | Header 3
val 1    | val 2    | val 3

Header 1 | Header 2 | Header 3
val 4    | val 5    | val 6

以上选项可以实现吗？我感觉这两种方法都需要一些 JavaScript 魔法。

Answer 1

就像我之前的一个项目一样，我也遇到了同样的情况，因为要求是卡住标题和一些列以便于滚动。我曾经尝试使用 css 表达式 和 javascript 解决方案来尝试互联网上的所有建议，但它总是在一个或其他浏览器中崩溃，并且它从未完成，直到我遇到了一个很好的插件，它可以执行以下操作:工作相当不错。

链接到GridViewScroll Demo和 github 的 link

以下是我在应用程序中使用它的方法，它运行完美。

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