web DataGridView 冻结表头和列

最新推荐文章于 2020-10-07 10:19:35 发布

laozhang700

最新推荐文章于 2020-10-07 10:19:35 发布

阅读量1.9k

点赞数

asp.net 在GridView中使用CSS固定上、左表头(似Excel冻结行列一样)(限IE) [转]

2012-05-11 12:39:50| 分类： .net技术 |举报|字号订阅
1.首先这样的方式并非标准的CSS语法，然而创建WebForm的时候，aspx里面都会加入一行来检查是否是标准的格式，有这行会失败，必須将此行刪除。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2、其次，由于GridView所产生的HTML里面，自懂会加入一个DIV，这会导致CSS中的

this.parentElement.offsetParent.parentElement.scrollLeft

取错，要修正为

this.parentElement.offsetParent.offsetParent.scrollLeft

以下为范例：

1、首先，在.aspx文件中加入CSS设定：

<style type="text/css">

.FixedTitleRow
{
position: relative;
table-layout:fixed;
top: expression(this.offsetParent.scrollTop-2);
background-color:White;
z-index: 10;
}

.FixedTitleRow th
{
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
padding:2px;
}

.FixedTitleColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft-2);
}

.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.offsetParent.scrollLeft-2);
}

</style>

2、去掉：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3、为gridview表头设置样式(锁定表头)：在.cs文件中的load方法中设置即可

GridView1.HeaderStyle.CssClass="FixedTitleRow";

4、若固定左边的一列，设定HeaderStyle的CssClass=FixedTitleColumn，以及ItemStyle的CssClass=FixedDataColumn。即可

laozhang700

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web DataGridView 冻结表头和列

asp.net 在GridView中使用CSS固定上、左表头(似Excel冻结行列一样)(限IE) [转] 2012-05-11 12:39:50| 分类： .net技术 |举报|字号订阅1.首先这样的方式并非标准的CSS语法，然而创建WebForm的时候，aspx里面都会加入一行来检查是否是标准的格式，有这行会失败，必須将此行刪除。 2、其次，由于G
复制链接

扫一扫