锦上添花DataGrid!

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

更加生动。 完!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Petrichor的专栏

Jupyter

When attempt to download .ipynb file as .python file:

71630
来自专栏Petrichor的专栏

图像处理: RGB颜色值 & 十六进制颜色码 速查表

22430
来自专栏儿童编程

Processing雁群实验

本文利用Processing完成一个3D随机渲染案例。由于最终动画效果像大雁群徘徊飞舞,我为其取名“雁群实验”。 为了简化说明,我们先用一个正方体旋转做说明,...

21130
来自专栏python3

tkinter -- Grid

实现机制是将 Widget 逻辑上分割成表格,在 指定的位置放置想要的 Widget 就可以了

10730
来自专栏优启梦

PHP头像九宫格合并 案例

唔,有一些东西需要随机头像! 比如一些聊天网站需要随机展现头像! 9宫格的平铺头像! 每次都会展现不一样的头像! 效果: ? 案例如下: <?php /** ...

668130
来自专栏菩提树下的杨过

拼凑了几个自定义的Panel(包括FishEyePanel,WrapPanel等几个常用的布局)

先看效果:  ? wrapPanel的效果在固定宽度的情况下看不出来,可查看在线演示地址:http://images.24city.com/jimmy/Cust...

19150
来自专栏韦弦的偶尔分享

微信小程序带图片弹窗简单实现

(PS:最近发现一个问题,如果页面内有textarea时,textarea的层级会比蒙版视图高,并且无法修改,做了一个比较笨的解决方案:小程序textarea层...

1.7K20
来自专栏非著名程序员

强烈推荐,Android图片处理的超强SDK

今天给大家推荐一个比较好的图片处理SDK,应该对大家有所帮助,最近快春节了,年底太忙了,希望大家见谅,可能推送的内容不及时或者少了些。你们放心,我的口号就是:你...

38570
来自专栏用户画像

使用jatoolsPrinter实现套打

最近在工作中遇到了套打的需求,前前后后,花了不少时间,现在总结一下套打的实现方式。

6810
来自专栏个人随笔

使用ListView控件展示数据

属性名称    说明 items   指定显示那种视图 View   指定显示那种视图 largelmagelist  大图标图像的imagelist控件 Sm...

30870

扫码关注云+社区

领取腾讯云代金券