锦上添花DataGrid!
作者: cuike519的专栏 http://blog.csdn.net/cuike519/
我们知道如果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看起来
更加生动。
完!
锦上添花DataGrid!相关推荐
- datagrid资料+ by iCeSnaker - Program rhapsody
datagrid资料+ by iCeSnaker - Program rhapsody 关于datagrid的打印 http://www.chinaaspx.com/article/csharp/29 ...
- 【转贴CSDN】关于DataGrid的精华
[转贴CSDN]关于DataGrid的精华 1.DataGrid动态模板列更新数据并且分页的例子 http://www.cnblogs.com/lovecherry/archive/2005/03/2 ...
- 【分享】WebForm中DataGrid的20篇经典文章
1.DataGrid动态模板列更新数据并且分页的例子 http://www.cnblogs.com/lovecherry/archive/2005/03/26/126102.html 2.DataGr ...
- (转)DataGrid资料
DataGrid的正反双向排序 http://dev.csdn.net/develop/article/26/26817.shtm DataGrid删除确认及Item颜色交替 http://dev.c ...
- 【分享】WebForm中DataGrid的经典文章 及一些网址收藏
[分享]WebForm中DataGrid的20篇经典文章 自认为以下文章比较经典,希望对初学者有用^_^ 1.DataGrid动态模板列更新数据并且分页的例子 http://www.cnblogs.c ...
- DataGrid用法集锦[收藏]
关于datagrid的打印 http://www.chinaaspx.com/article/csharp/295.htm C#中为DataGrid添加下拉列表框 http://www.cnblogs ...
- DataGrid技巧大集合(转载)
DataGrid的正反双向排序 http://dev.csdn.net/develop/article/26/26817.shtm删除确认及Item颜色交替 http://dev.csdn.net/d ...
- DataGrid用法集锦
关于datagrid的打印 http://www.chinaaspx.com/article/csharp/295.htm C#中为DataGrid添加下拉列表框 http://www.cnblogs ...
- 【引用】DataGrid技巧大集合
引用自:http://www.cnblogs.com/iCeSnaker/archive/2004/07/31/29017.aspx DataGrid的正反双向排序 http://dev.csdn.n ...
最新文章
- setup_cuda.py 编译gpu_nms
- 阿里云支撑马来西亚数字自由贸易区落地 帮助马来西亚中小企业参与全球贸易...
- qa dataset
- 投影仪和电脑连接故障
- vi/vim多行注释和取消注释
- 服务器任务管理器详细信息,任务管理器服务器主机
- 17--合并两个有序数组
- shell 字符(串)处理命令
- HDU1248 寒冰王座【0/1背包+DP】
- JSTL EL 详解
- ajax帝国cms自动加载分页,帝国CMS7.0版ajax无刷新添加评论插件
- python编写简易木马程序_中国骇客云教你使用Python编写木马程序
- 零基础如何学习SEO网站优化
- Maxscript基本数据类型(二):Name
- C++学习 11.18.19
- android校准电池,为什么电池校准不适用于Android智能手机
- 自定义复选框,复选框样式修改,重写复选框
- 2018西工大计算机学院学生会,风雨同舟,砥砺前行:计算机学院学生会全体会议暨主席团换届竞选答辩举行...
- hiho一下 第三周---KMP算法
- 【历史】- UNIX发展史(BSD,GNU,linux)
热门文章
- java语言基础final_java语言中final的用法
- Windows下Eclipse配置基于MinGW的C/C++开发环境
- PyTorch框架:(5)使用PyTorch框架构建卷积神经网络
- Windows中的tree命令不可用的解决办法
- LeetCode刷题记录10——434. Number of Segments in a String(easy)
- 参考WebStorm设置VSCode“转到编辑器中的符号”快捷键为Shift双击(这是一个频繁使用的快捷键)
- 在Ubuntu 14.04 64bit上安装字体管理器font-manager
- Blender左轮手枪制作教程
- pip install失败报错解决方案
- 简谈-Python一些常用的爬虫技巧