锦上添花DataGrid!

我们知道如果datagrid的宽度比较长那么使得我们很难分清楚行数据,也就是很容易

使我们看错行,我想如果当我们的鼠标移动到datagrid的行上,他可以清楚的显示给

我们就好了,那么好吧现在我们就开始,首先我们知道datagrid在客户端被解释成了

table所以我们有知道table都有tr和td组成,tr就是行,我们只需要在每个tr上面的

onmouseover加入一段javascript脚本就可以实现这个功能,
<table>
<tr οnmοuseοver="this.style.backgroundColor='Silver'"

οnmοuseοut="this.style.backgroundColor='white'"><td>...</td></tr>
</table>
这是从客户端看到的脚本那么我们可以通过datagrd在绑定数据的ItemDataBound事件

时候将这段脚本加入进去。具体代码如下:
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==

ListItemType.AlternatingItem){
    e.Item.Attributes.Add

("onmouseover","this.style.backgroundColor='Silver'");
    e.Item.Attributes.Add

("onmouseout","this.style.backgroundColor='white'");
   }
这样就可以让鼠标移动过行的时候将颜色变成silver移走之后变成white(本色)。
前面的判断可以排除鼠标移动到Head和Foot的时候也有相同的效果,这样可以把脚本

只产生在里面的项上。

或者指定某列变色:
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==

ListItemType.AlternatingItem){
    e.Item.Cells[2].Attributes.Add

("onmouseover","this.style.backgroundColor='Silver'");
    e.Item.Cells[2].Attributes.Add

("onmouseout","this.style.backgroundColor='white'");
   }

不但如此你还可以指定鼠标移动到某一列时鼠标的形状:
e.Item.Cells[3].Style("cursor") = "hand"
或者点击某一个单元个显示提示信息:
e.Item.Cells[3].Attributes.Add("onclick", "alert('你点击的ID是: " +

e.Item.Cells[0].Text + "!');")
等等...

通过这个方法我们还可以添加在鼠标移动到行上出现提示的效果
e.Item.Cells[2].Attributes.Add("title","在这里可以添加提示信息");

经过实践发现在绑定的时候你可以添加很多的javascript脚本使你的datagrid看起来

更加生动。
完!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值