一段实现DataGrid的“编辑”、“取消”功能脚本[无刷新]

 1<script language="javascript">   
 2var selectRow="";   
 3var selectObject;   
 4function EditCell(thisObject,type)   
 5{   
 6var id = thisObject.id;   
 7var buttonID="Button"+type;   
 8var row=id.replace(buttonID,"");   
 9if(type==1&&selectRow.length>0&&selectObject!=null)   
10{   
11EditRow(selectRow,2,selectObject);   
12selectRow="";   
13}   
14if(type==1){selectRow=row;selectObject=thisObject;}else{selectRow="";selectObject=null;}   
15EditRow(row,type,thisObject);   
16} 
17
18function EditRow(row,type,thisObject)   
19{   
20var visible1="none";   
21var visible2="inline";   
22if(type!=1)   
23{   
24visible1="inline";   
25visible2="none";   
26}   
27var buttonID="Button"+type;   
28var style;   
29var i;   
30for(i=1;i<8;i++)   
31{   
32var name1=row+"Img"+i;   
33document.all[name1].getAttribute("style").display=visible1;   
34name1=row+"Text"+i;   
35var name2=row+"Checkbox"+i;   
36document.all[name2].getAttribute("style").display=visible2;   
37if(type!=1)   
38{   
39if(document.all[name1].value==1)   
40document.all[name2].checked=true;   
41else   
42document.all[name2].checked=false;   
43}   
44} 
45
46var tdIndex = thisObject.parentElement.cellIndex;   
47if(type>1) tdIndex = tdIndex -1;   
48thisObject.parentElement.parentElement.cells[tdIndex].getAttribute("style").display=visible2; 
49
50thisObject.parentElement.colSpan=type; 
51
52var name;   
53name=row+buttonID;   
54document.all[name].getAttribute("style").display="none"; 
55
56if(type==1)   
57{   
58document.all[name].parentElement.parentElement.getAttribute("style").backgroundColor="LightYellow";   
59name=row+"Button2";   
60document.all[name].getAttribute("style").display="inline";   
61}   
62else   
63{   
64document.all[name].parentElement.parentElement.getAttribute("style").backgroundColor="";   
65name=row+"Button1";   
66document.all[name].getAttribute("style").display="inline";   
67}   
68} 
69
70</script>

 1<asp:datagrid allowpaging="True" autogeneratecolumns="False" borderstyle="Solid" cellpadding="0" id="GridItem" runat="server" width="100%">
 2<selecteditemstyle backcolor="LightYellow"></selecteditemstyle>
 3<edititemstyle backcolor="Ivory" cssclass="tdbg-dark"></edititemstyle>
 4<itemstyle cssclass="tdbg" height="23px" horizontalalign="Center"></itemstyle>
 5<headerstyle cssclass="summary-title" height="25px" horizontalalign="Center"></headerstyle>
 6<columns>
 7<asp:boundcolumn datafield="id" headertext="人员编号" readonly="True">
 8<headerstyle width="120px"></headerstyle>
 9</asp:boundcolumn>
10<asp:boundcolumn headertext="姓名" readonly="True">
11<headerstyle width="120px"></headerstyle>
12</asp:boundcolumn>
13<asp:templatecolumn headertext="管理权">
14<headerstyle width="60px"></headerstyle>
15<itemtemplate>
16<img alt="" id="Img1" runat="server" src="Images/CheckBoxUnSelect.gif" style="DISPLAY: inline"/><input id="Checkbox1" runat="server" style="DISPLAY: none" type="checkbox"/>
17<input id="Text1" runat="server" style="DISPLAY: none" type="text"/>
18</itemtemplate>
19</asp:templatecolumn>
20<asp:templatecolumn headertext="查询权">
21<headerstyle width="60px"></headerstyle>
22<itemtemplate>
23<img alt="" id="Img2" runat="server" src="Images/CheckBoxUnSelect.gif" style="DISPLAY: inline"/><input id="Checkbox2" name="Checkbox2" runat="server" style="DISPLAY: none" type="checkbox"/>
24<input id="Text2" name="Text2" runat="server" style="DISPLAY: none" type="text"/>
25</itemtemplate>
26</asp:templatecolumn>
27<asp:templatecolumn headertext="录入权">
28<headerstyle width="60px"></headerstyle>
29<itemtemplate>
30<img alt="" id="Img3" runat="server" src="Images/CheckBoxUnSelect.gif" style="DISPLAY: inline"/><input id="Checkbox3" name="Checkbox3" runat="server" style="DISPLAY: none" type="checkbox"/>
31<input id="Text3" name="Text3" runat="server" style="DISPLAY: none" type="text"/>
32</itemtemplate>
33</asp:templatecolumn>
34<asp:templatecolumn headertext="修改权">
35<headerstyle width="60px"></headerstyle>
36<itemtemplate>
37<img alt="" id="Img4" runat="server" src="Images/CheckBoxUnSelect.gif" style="DISPLAY: inline"/><input id="Checkbox4" name="Checkbox4" runat="server" style="DISPLAY: none" type="checkbox"/>
38<input id="Text4" name="Text4" runat="server" style="DISPLAY: none" type="text"/>
39</itemtemplate>
40</asp:templatecolumn>
41<asp:templatecolumn headertext="删除权">
42<headerstyle width="60px"></headerstyle>
43<itemtemplate>
44<img alt="" id="Img5" runat="server" src="Images/CheckBoxUnSelect.gif" style="DISPLAY: inline"/><input id="Checkbox5" name="Checkbox5" runat="server" style="DISPLAY: none" type="checkbox"/>
45<input id="Text5" name="Text5" runat="server" style="DISPLAY: none" type="text"/>
46</itemtemplate>
47</asp:templatecolumn>
48<asp:templatecolumn headertext="导出权">
49<headerstyle width="60px"></headerstyle>
50<itemtemplate>
51<img alt="" id="Img6" runat="server" src="Images/CheckBoxUnSelect.gif" style="DISPLAY: inline"/><input id="Checkbox6" name="Checkbox6" runat="server" style="DISPLAY: none" type="checkbox"/>
52<input id="Text6" name="Text6" runat="server" style="DISPLAY: none" type="text"/>
53</itemtemplate>
54</asp:templatecolumn>
55<asp:templatecolumn headertext="导入权">
56<headerstyle width="60px"></headerstyle>
57<itemtemplate>
58<img alt="" id="Img7" runat="server" src="Images/CheckBoxUnSelect.gif" style="DISPLAY: inline"/><input id="Checkbox7" name="Checkbox7" runat="server" style="DISPLAY: none" type="checkbox"/>
59<input id="Text7" name="Text7" runat="server" style="DISPLAY: none" type="text"/>
60</itemtemplate>
61</asp:templatecolumn>
62<asp:buttoncolumn commandname="cmdSave" headertext="操作" text="保存">
63<itemstyle font-size="10pt"></itemstyle>
64</asp:buttoncolumn>
65<asp:templatecolumn>
66<itemtemplate>
67<input id="Button1" onclick="EditCell(this,1);" runat="server" style="cursor: hand; WIDTH: 35px; COLOR: blue; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline; BORDER-BOTTOM-STYLE: none" type="button" value="编辑"/><input id="Button2" onclick="EditCell(this,2);" runat="server" style="cursor: hand; DISPLAY: none; COLOR: blue; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline; BORDER-BOTTOM-STYLE: none" type="button" value="取消"/>
68</itemtemplate>
69</asp:templatecolumn>
70</columns>
71<pagerstyle nextpagetext="下一页" prevpagetext="上一页"></pagerstyle>
72</asp:datagrid>