当DataGrid合并行是,怎么用JavaScript写行变色效果。
全并行的DataGrid
1private void grdSearchResults_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
2 {
3 ListItemType itemType = (ListItemType)e.Item.ItemType;
4
5 if ((itemType != ListItemType.Footer) && (itemType != ListItemType.Separator))
6 {
7
8 // Add attributes to the <td>.
9 string tableRowId = grdSearchResults.ClientID + "_row" + e.Item.ItemIndex.ToString();
10 e.Item.Attributes.Add("id", tableRowId);
11 object checkBox = e.Item.FindControl("chkChoice");
12 if(checkBox != null)
13 {
14 string clientId = ((CheckBox)checkBox).ClientID;
15 e.Item.Attributes.Add("onMouseMove", "Javascript:chkSelect_OnMouseMove('" + tableRowId + "','" + clientId + "',"+e.Item.ItemIndex+")");
16 e.Item.Attributes.Add("onMouseOut", "Javascript:chkSelect_OnMouseOut('" + tableRowId + "','" + clientId + "'," + e.Item.ItemIndex + ")");
17 ((CheckBox)checkBox).Attributes.Add("onClick", "Javascript:chkSelect_OnClick('" + tableRowId + "','" + clientId + "'," + e.Item.ItemIndex + ")");
18 }
19 }
20 }
1private void grdSearchResults_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
2 {
3 ListItemType itemType = (ListItemType)e.Item.ItemType;
4
5 if ((itemType != ListItemType.Footer) && (itemType != ListItemType.Separator))
6 {
7
8 // Add attributes to the <td>.
9 string tableRowId = grdSearchResults.ClientID + "_row" + e.Item.ItemIndex.ToString();
10 e.Item.Attributes.Add("id", tableRowId);
11 object checkBox = e.Item.FindControl("chkChoice");
12 if(checkBox != null)
13 {
14 string clientId = ((CheckBox)checkBox).ClientID;
15 e.Item.Attributes.Add("onMouseMove", "Javascript:chkSelect_OnMouseMove('" + tableRowId + "','" + clientId + "',"+e.Item.ItemIndex+")");
16 e.Item.Attributes.Add("onMouseOut", "Javascript:chkSelect_OnMouseOut('" + tableRowId + "','" + clientId + "'," + e.Item.ItemIndex + ")");
17 ((CheckBox)checkBox).Attributes.Add("onClick", "Javascript:chkSelect_OnClick('" + tableRowId + "','" + clientId + "'," + e.Item.ItemIndex + ")");
18 }
19 }
20 }
相应的JavaScript
1 /**//*
2 描述:鼠标移入事件
3 作者:南守拥
4 时间:2006年12月13日
5 参数:tableRow为TR的ID,checkBox此行的选择CheckBox,rowIndex行号。
6 */
7 function chkSelect_OnMouseMove(tableRow, checkBox,rowIndex)
8 {
9 var tr = document.getElementById(tableRow);//等到当前行
10 var strTableRowBase = tableRow.substr(0,20);//当前行ID的不变部分
11 var chbselect;
12 var bgColor; //选择CheckBox
13 var rowspan = tr.cells[0].rowSpan; //当前行的RowSpan
14 while(rowspan == 1) //如果当前行不是合并行的起点
15 {
16 rowIndex = rowIndex - 1; //行序号少一
17 var strTableRow = strTableRowBase + rowIndex;//上一行的行ID
18 tr = document.getElementById(strTableRow);//得到上一行
19 rowspan = tr.cells[0].rowSpan;//得到上一行的RowSpan
20 }//当找行的合并行起点时退出,当前行的信息有:tr、rowIndex、rowspan chbBase+rowIndex+2+chbLast
21
22 //找到合并行起点的选择CheckBox
23 var chbBase = checkBox.substr(0,21);
24 var chbLast = checkBox.substr(22,32);
25 var num = rowIndex + 2;//这里很危险,是看Html直接定的。
26 var chbSelectID = chbBase + num + chbLast;
27 var chbselect = document.getElementById(chbSelectID);
28 if(chbselect != null)
29 {
30 if(chbselect.checked == false)//如果没被选择则变色。
31 bgColor = "#ffffcc";
32 }
33
34 for(i = rowIndex;i<rowIndex + rowspan;i++)//从起点行开始,给每行设置bgColor
35 {
36 var strTableRow = strTableRowBase + i;
37 tr = document.getElementById(strTableRow);
38 tr.style.backgroundColor = bgColor;
39 }
40 }
41
42 /**//*
43 描述:鼠标移出事件
44 作者:南守拥
45 时间:2006年12月13日
46 参数:tableRow为TR的ID,checkBox此行的选择CheckBox,rowIndex行号。
47 */
48 function chkSelect_OnMouseOut(tableRow, checkBox, rowIndex)
49 {
50 var tr = document.getElementById(tableRow);//等到当前行
51 var strTableRowBase = tableRow.substr(0,20);//当前行ID的不变部分
52 var chbselect;
53 var bgColor; //选择CheckBox
54 var rowspan = tr.cells[0].rowSpan; //当前行的RowSpan
55 while(rowspan == 1) //如果当前行不是合并行的起点
56 {
57 rowIndex = rowIndex - 1; //行序号少一
58 var strTableRow = strTableRowBase + rowIndex;//上一行的行ID
59 tr = document.getElementById(strTableRow);//得到上一行
60 rowspan = tr.cells[0].rowSpan;//得到上一行的RowSpan
61 }//当找行的合并行起点时退出,当前行的信息有:tr、rowIndex、rowspan chbBase+rowIndex+2+chbLast
62
63 //找到合并行起点的选择CheckBox
64 var chbBase = checkBox.substr(0,21);
65 var chbLast = checkBox.substr(22,32);
66 var num = rowIndex + 2;//这里很危险,是看Html直接定的。
67 var chbSelectID = chbBase + num + chbLast;
68 var chbselect = document.getElementById(chbSelectID);
69 if(chbselect != null)
70 {
71 if(chbselect.checked == false)//如果没被选择则变色。
72 bgColor = "#ffffff";
73 }
74
75 for(i = rowIndex;i<rowIndex + rowspan;i++)//从起点行开始,给每行设置bgColor
76 {
77 var strTableRow = strTableRowBase + i;
78 tr = document.getElementById(strTableRow);
79 tr.style.backgroundColor = bgColor;
80 }
81 }
82
83
84 /**//*
85 描述:鼠标移出事件
86 作者:南守拥
87 时间:2006年12月13日
88 参数:tableRow为TR的ID,checkBox此行的选择CheckBox,rowIndex行号。
89 */
90 function chkSelect_OnClick(tableRow, checkBox, rowIndex)
91 {
92 var chbselect = document.getElementById(checkBox);
93 var strTableRowBase = tableRow.substr(0,20);//当前行ID的不变部分
94
95 if(chbselect != null)
96 {
97 var bgColor;
98 if(rowIndex%2 == 0)
99 bgColor = "#ffffff";
100 else
101 bgColor = "#f5f5f5";
102 if(chbselect.checked == true)
103 bgColor = "#b0c4de";
104 }
105 var tr = document.getElementById(tableRow);
106 var rowspan = tr.cells[0].rowSpan;
107 for(i = rowIndex;i<rowIndex + rowspan;i++)//从起点行开始,给每行设置bgColor
108 {
109 var strTableRow = strTableRowBase + i;
110 tr = document.getElementById(strTableRow);
111 tr.style.backgroundColor = bgColor;
112 }
113 }
1 /**//*
2 描述:鼠标移入事件
3 作者:南守拥
4 时间:2006年12月13日
5 参数:tableRow为TR的ID,checkBox此行的选择CheckBox,rowIndex行号。
6 */
7 function chkSelect_OnMouseMove(tableRow, checkBox,rowIndex)
8 {
9 var tr = document.getElementById(tableRow);//等到当前行
10 var strTableRowBase = tableRow.substr(0,20);//当前行ID的不变部分
11 var chbselect;
12 var bgColor; //选择CheckBox
13 var rowspan = tr.cells[0].rowSpan; //当前行的RowSpan
14 while(rowspan == 1) //如果当前行不是合并行的起点
15 {
16 rowIndex = rowIndex - 1; //行序号少一
17 var strTableRow = strTableRowBase + rowIndex;//上一行的行ID
18 tr = document.getElementById(strTableRow);//得到上一行
19 rowspan = tr.cells[0].rowSpan;//得到上一行的RowSpan
20 }//当找行的合并行起点时退出,当前行的信息有:tr、rowIndex、rowspan chbBase+rowIndex+2+chbLast
21
22 //找到合并行起点的选择CheckBox
23 var chbBase = checkBox.substr(0,21);
24 var chbLast = checkBox.substr(22,32);
25 var num = rowIndex + 2;//这里很危险,是看Html直接定的。
26 var chbSelectID = chbBase + num + chbLast;
27 var chbselect = document.getElementById(chbSelectID);
28 if(chbselect != null)
29 {
30 if(chbselect.checked == false)//如果没被选择则变色。
31 bgColor = "#ffffcc";
32 }
33
34 for(i = rowIndex;i<rowIndex + rowspan;i++)//从起点行开始,给每行设置bgColor
35 {
36 var strTableRow = strTableRowBase + i;
37 tr = document.getElementById(strTableRow);
38 tr.style.backgroundColor = bgColor;
39 }
40 }
41
42 /**//*
43 描述:鼠标移出事件
44 作者:南守拥
45 时间:2006年12月13日
46 参数:tableRow为TR的ID,checkBox此行的选择CheckBox,rowIndex行号。
47 */
48 function chkSelect_OnMouseOut(tableRow, checkBox, rowIndex)
49 {
50 var tr = document.getElementById(tableRow);//等到当前行
51 var strTableRowBase = tableRow.substr(0,20);//当前行ID的不变部分
52 var chbselect;
53 var bgColor; //选择CheckBox
54 var rowspan = tr.cells[0].rowSpan; //当前行的RowSpan
55 while(rowspan == 1) //如果当前行不是合并行的起点
56 {
57 rowIndex = rowIndex - 1; //行序号少一
58 var strTableRow = strTableRowBase + rowIndex;//上一行的行ID
59 tr = document.getElementById(strTableRow);//得到上一行
60 rowspan = tr.cells[0].rowSpan;//得到上一行的RowSpan
61 }//当找行的合并行起点时退出,当前行的信息有:tr、rowIndex、rowspan chbBase+rowIndex+2+chbLast
62
63 //找到合并行起点的选择CheckBox
64 var chbBase = checkBox.substr(0,21);
65 var chbLast = checkBox.substr(22,32);
66 var num = rowIndex + 2;//这里很危险,是看Html直接定的。
67 var chbSelectID = chbBase + num + chbLast;
68 var chbselect = document.getElementById(chbSelectID);
69 if(chbselect != null)
70 {
71 if(chbselect.checked == false)//如果没被选择则变色。
72 bgColor = "#ffffff";
73 }
74
75 for(i = rowIndex;i<rowIndex + rowspan;i++)//从起点行开始,给每行设置bgColor
76 {
77 var strTableRow = strTableRowBase + i;
78 tr = document.getElementById(strTableRow);
79 tr.style.backgroundColor = bgColor;
80 }
81 }
82
83
84 /**//*
85 描述:鼠标移出事件
86 作者:南守拥
87 时间:2006年12月13日
88 参数:tableRow为TR的ID,checkBox此行的选择CheckBox,rowIndex行号。
89 */
90 function chkSelect_OnClick(tableRow, checkBox, rowIndex)
91 {
92 var chbselect = document.getElementById(checkBox);
93 var strTableRowBase = tableRow.substr(0,20);//当前行ID的不变部分
94
95 if(chbselect != null)
96 {
97 var bgColor;
98 if(rowIndex%2 == 0)
99 bgColor = "#ffffff";
100 else
101 bgColor = "#f5f5f5";
102 if(chbselect.checked == true)
103 bgColor = "#b0c4de";
104 }
105 var tr = document.getElementById(tableRow);
106 var rowspan = tr.cells[0].rowSpan;
107 for(i = rowIndex;i<rowIndex + rowspan;i++)//从起点行开始,给每行设置bgColor
108 {
109 var strTableRow = strTableRowBase + i;
110 tr = document.getElementById(strTableRow);
111 tr.style.backgroundColor = bgColor;
112 }
113 }