＆QUOT;浮动＆QUOT; gridview的头 [英] "Floating" Gridview Header

问题描述

有没有ASP.NET办法有一个浮动的头，就像一个头，你会在下面你失望，你滚动页面？

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.

推荐答案

我是在同一条船上像我的previous项目之一的要求是冻结的标题和一些容易滚动列。我用用css 前pression 和JavaScript的解决方案，尝试了所有的建议赫然出现在互联网，但它总是以一种或另一种浏览器打破，这是永远不会完成直到我碰到一个不错的插件，没有工作pretty好来了。

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演示和GitHub的的链接

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

这篇关于＆QUOT;浮动＆QUOT; gridview的头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！