“浮动”网格视图标题答案

【问题标题】："Floating" Gridview Header“浮动”网格视图标题
【发布时间】：2014-08-22 02:47:38
【问题描述】：

在 ASP.NET 中是否有一种“浮动”标题，就像您在 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 魔法。

【问题讨论】：

标签： javascript asp.net vb.net gridview

【解决方案1】：

我和我以前的一个项目一样，因为要求是冻结标题和一些列以便于滚动。我曾经使用 css expression 和 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
        }
    });
}

【讨论】：

这行得通，谢谢！我只需要稍微调整一下就可以让它和我的一起工作，我在隐藏滚动条时遇到了麻烦

【解决方案2】：

尝试以下方法 (asp.net forums)：

1。添加锁定的Css：

td.locked, th.locked {
    position:relative;    
    left:expression((this.parentElement.parentElement.parentElement.parentElement.scrollLeft-2)+'px');
}

2。在 RowDataBound 事件中添加 css 到 GridView 单元格：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[0].CssClass = "locked";
    }
}

【讨论】：

【解决方案3】：

纯基于 css 的解决方案可能会在某些浏览器中中断。为此，您也必须使用一些 javascript。

最受青睐的方法的精简版是克隆原始表。将两个表（以下称为 table1 和 table2）放入 div 容器中。 div 容器会重叠一点，最重要的是剪辑我们不需要显示的内容。并且两个 div 将被堆叠（兄弟姐妹）。第一个 div 将包含 table1 并且其可视区域将调整大小以仅显示 table1 标题行。它的滚动条也将被隐藏。 table2 将放置在具有足够 -ve 边距的第二个 div 内，以便用户看不到其标题。此外，我们还必须处理事件，以防我们想要水平滚动。

Ps：我有时间会显示一些代码...

【讨论】：