“浮动"网格视图标题 [英] "Floating" Gridview Header

问题描述

在 ASP.NET 中是否有一种方法可以拥有一个浮动"标题，就像您在 Excel 工作表中看到的标题一样，在您滚动时会跟随页面向下移动?

Is there a way in ASP.NET to have a "floating" header, much like a header you would see in an Excel sheet that follows you down the page as you scroll?

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

Or alternatively, an easier route may be to have the header appear after every line, for example:

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 魔法.

Can either of the above options be done? I get the feeling either route is going to take some javascript wizardry.

推荐答案

我和我之前的一个项目在同一条船上，因为要求是冻结标题和一些列以便于滚动.我曾经尝试使用 css expression 和 javascript 解决方案在互联网上尝试所有建议，但它总是在一个或其他浏览器中中断，直到我遇到一个很好的插件，它才能完成工作还不错.

I was in the same boat like for one of my previous projects as the requirement was to freeze the header and some of the columns for easy scrolling. I used to try out all the recommendations out there in internet using css expression and javascript solutions but it always breaks in one or the other browsers and it was never complete until I came across a nice plugin that does the job pretty good.

链接到 GridViewScroll Demo 和 github 的 link

Link to GridViewScroll Demo and the github's link

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

Here is how I used it in my application and it works flawlessly.

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

这篇关于“浮动"网格视图标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！