Question

ASP.NET中有没有办法让＃34;浮动＆＃34;标题，就像你在滚动时跟在页面上的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 expression和javascript解决方案在互联网上尝试所有的建议，但它总是在一个或其他浏览器中打破，它永远不会完成，直到我遇到一个很好的插件才能完成这项工作

链接到GridViewScroll Demo和github＆＃39; 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
        }
    });
}

Answer 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";
    }
}

Answer 3

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

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

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

“浮动”Gridview标题

3 个答案: