为DataGrid的行添加属性,使其可以使用onmouseover的javascript
2006-09-11 14:24
435 查看
我们知道如果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看起来
更加生动。
完!
相关文章推荐
- javascript动态类型语言,可以动态的添加属性
- JavaScript基础 在字符数组中添加 字符\ 要使用\\才可以
- JavaScript可以动态添加、删除对象属性与方法
- 为自定View添加相应属性,在XML可以直接使用
- JavaScript基础 在字符数组中添加 字符\ 要使用\\才可以
- Javascript prototype属性使用(给内置对象添加新的方法,方便调用)
- javascript: 高级技巧: window 对象也可以添加自定义属性, 无须等加载完毕
- Javascript在对象生成后,可以任意给该对象添加属性或者方法。
- 便捷替换背景色与其他属性onmousemove="javascript:this.bgColor='#FCFDEE';",当DOM事件触发时this代表触发事件的DOM对象,所以可以使用对应DOM对象的属性和方法。
- javascript DOM添加元素,使用节点属性
- 使用js给td添加边框,不同条件下tr和td的visibility以及display属性的应用
- Javascript 中动态添加 对象属性
- JS 添加千分位,测试可以使用
- SharePoint 2010/2013 使用Javascript 动态添加Ribbon 按钮
- 使用javascript 获取 data- 自定义属性
- 在C#中使用属性控件添加属性窗口
- JavaScript:prototype属性使用说明
- 项目开发中对使用的第三方库统一进行管理__添加属性表/页
- JavaScript eval() 为什么使用eval()是一个坏主意 什么时候可以使用eval()
- Flex使用弹出窗口为DataGrid添加新数据