前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >锦上添花DataGrid!

锦上添花DataGrid!

作者头像
阿新
发布2018-04-13 10:34:31
8750
发布2018-04-13 10:34:31
举报
文章被收录于专栏:c#开发者c#开发者

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

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

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

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

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

onmouseout="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看起来

更加生动。 完!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2005-02-01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档