GridView固定表头和首列

GridView固定表头和首列

GridVIew中要显示的数据非常多的时候,用户常需要开发人员固定表头或是首列,以保证在拖动滚动条的时候,可以清楚得了解到每一列或行的内容。 借助于CSS的功能,可以将GridView打造成这样的表格:

首先,要把GridView放在一个<asp:Panel runat=server ID="panel">容器中,然后在页面中添加如下CSS:

.fixedheader
{
position
: relative ;
table-layout
: fixed ;
top
: expression(this.offsetParent.scrollTop -1) ;
z-index
: 10 ;
}

.fixedheader th
{ text-overflow : ellipsis ; overflow : hidden ; white-space : nowrap ; }

最后将GridView的HeaderStyle属性集中的CssClass属性设为"fixedheader":

< HeaderStyle Wrap = " False " CssClass = " fixedheader " />

上述这种方法是以页面的滚动条为基准,因此是“this.offsetParent.scrollTop”,实际使用时可以根据需要尝试其他调整方法

至于固定左边列的方法与此类似

.fixedLeft
{
position
: relative ;
left
: expression (this.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.scrollLeft-4) ;
z-index
: 10 ;
}

其中 expression后的parentElement到底要多少个,需要设置Debugger自己去跟踪。同时,还要记住设置GridView的背景色,即便是白色也要设:#FFFFFF,不能为透明。最后,将GridView的ItemStyle中的CssClass设为"fixedLeft" ,便可得到效果了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值