锦上添花DataGrid!

原创 2003年08月31日 10:20:00

我们知道如果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看起来

更加生动。
完!

锦上添花DataGrid!

作者:cuike519的专栏   http://blog.csdn.net/cuike519/我们知道如果datagrid的宽度比较长那么使得我们很难分清楚行数据,也就是很容易使我们看错行,我想如果当...
  • 21aspnet
  • 21aspnet
  • 2004年10月30日 16:04
  • 1790

锦上添花

羊:能常跟心爱的人在一起已是很幸福且满足的了,在此基础上再能有些浪漫就是锦上添花的事了。但世上好像往往锦上添花的事很多人比较喜好,却好像忘了根本,是以常有不快的结局。羊是这样看的。 花:嗯,还是羊常说...
  • sheepandflower
  • sheepandflower
  • 2004年11月29日 23:53
  • 403

为你的程序锦上添花的五种程序组织形式

形式一."见兔撒鹰".                                                     ...
  • chensheng913
  • chensheng913
  • 2007年06月22日 19:33
  • 15559

锦上添花 Icing on the cake

 制作西式糕点最后一道工序,就是在糕点上洒上或涂上一层白色的冰淇淋,叫做icing on the cake,在俚语当中icing on the cake意思是使一件原本已经很好的事物变得更加的美好,也...
  • killer000777
  • killer000777
  • 2008年11月27日 19:42
  • 349

矩阵快速幂锦上添花小结

右做了一个矩阵的专题。。表示又有更深的理解了。。
  • u011394362
  • u011394362
  • 2014年10月29日 14:59
  • 909

前程似锦 如鱼得水 藏头诗

公司同事辞职,灵感突发,诗一首赠之。每句的首字连起来就是“前程似锦,如鱼得水”。非专业人士,也不知道写得好不好,但觉得有点意思,因此还是留在博客里吧。   前人栽树后人凉 程门立雪永流芳...
  • gws1229
  • gws1229
  • 2014年06月26日 15:37
  • 685

IT世界锦上添花——无限潜力

锦上添花——无限潜力 通常技术一面是面基础,二面更多的是双方的进一步了解。如技术方向,技术潜力等。 如果二面面试官不问你技术问题,那么你一定要积极主动的与他沟通,并表达你的意愿。尝试以下几个方向:...
  • mynote
  • mynote
  • 2013年10月29日 16:33
  • 576

落井下石,不要锦上添花

////////////////////////////////////////////////////////////////////////////////////////////////////...
  • hakuabby
  • hakuabby
  • 2011年08月27日 11:25
  • 398

easyui datagrid属性和方法

使用方法(Usage Example) 从现有的表单元素创建数据表格,定义在html中的行,列和数据。 table class="easyui-datagrid">       ...
  • whatday
  • whatday
  • 2017年07月27日 09:54
  • 2356

jquery datagrid 参数及使用

数据表格 - DataGrid 内容 概况 使用方法 数据表格属性 数据列属性 编辑 数据视图 事件 方法  继承$.fn.panel.defaults,使用$.fn.datag...
  • JIESA
  • JIESA
  • 2015年06月04日 09:17
  • 18591
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:锦上添花DataGrid!
举报原因:
原因补充:

(最多只允许输入30个字)