本文介绍如何使用JavaScript为WebForm页面中的DataGrid实现行高亮效果，并提供代码示例。同时，还介绍了如何通过添加脚本防止DataGrid表头随页面滚动。
首先在WebFrom页面中添加JavaScript 代码块
private
void
dgTemp_PreRender(
object
sender, System.EventArgs e)
{
for (int i = 0 ; i < dgTemp.Items.Count; i++)
{
dgTemp.Items[i].Attributes.Add("onmouseover","SetDataGridBackColor('LightBlue',false);");
dgTemp.Items[i].Attributes.Add("onmouseout","SetDataGridBackColor('white',true);");
}
}
为了防止DataGrid标头的滚动,可以在增加这么一个脚本
private
void
dgTemp_ItemCreated(
object
sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
//使DataGrid标头不滚动
if (e.Item.ItemType == ListItemType.Header)
{
e.Item.Style.Add("position","relative;top:expression(document.all['dgBHGJBSZ'].offsetParent.scrollTop);");
}
}
1
<
script
>
2
//
鼠标移动时高亮显示所悬停的行
3
function
SetDataGridBackColor(color,isMouseOut)
4
{
5 var tr=event.srcElement.parentElement;
6
7 var iRowIndex = tr.rowIndex ;
8 if( isMouseOut )
9 {
10 if( ( iRowIndex % 2 ) == 1 )
11 {
12 tr.style.backgroundColor = color;
13 }
14 else
15 {
16 tr.style.backgroundColor = "#EAE9D7";
17 }
18 }
19 else
20 {
21 tr.style.backgroundColor = color;
22 }
23 }
24
</
script
>
然后在aspx文件中的DataGrid事件中去注册这个脚本
<
script
>
2
//
鼠标移动时高亮显示所悬停的行
3
function
SetDataGridBackColor(color,isMouseOut)4
{5
var tr=event.srcElement.parentElement;6
7
var iRowIndex = tr.rowIndex ;8
if( isMouseOut )9
{10
if( ( iRowIndex % 2 ) == 1 )11
{12
tr.style.backgroundColor = color;13
}14
else15
{16
tr.style.backgroundColor = "#EAE9D7";17
}18
}19
else20
{21
tr.style.backgroundColor = color;22
}23
}
24
</
script
>
private
void
dgTemp_PreRender(
object
sender, System.EventArgs e)
{ for (int i = 0 ; i < dgTemp.Items.Count; i++) { dgTemp.Items[i].Attributes.Add("onmouseover","SetDataGridBackColor('LightBlue',false);"); dgTemp.Items[i].Attributes.Add("onmouseout","SetDataGridBackColor('white',true);"); } }
为了防止DataGrid标头的滚动,可以在增加这么一个脚本
private
void
dgTemp_ItemCreated(
object
sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{ //使DataGrid标头不滚动 if (e.Item.ItemType == ListItemType.Header) { e.Item.Style.Add("position","relative;top:expression(document.all['dgBHGJBSZ'].offsetParent.scrollTop);"); } }
扫一扫
354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
