如何局部刷新Gridview
想实现1点击增加按钮时把数据保存到数据库中。(已使用AJAX实现)
2、当保存成功后刷新GridView的显示(不知道如何控制局部刷新)
<div ><table><tr><td>慢性疾病 <asp:DropDownList ID="MXBList" runat="server"> </asp:DropDownList></td><td>管理状态<asp:DropDownList ID="GLList" runat="server"> </asp:DropDownList></td><td>确诊时间<asp:TextBox ID="QZtime" runat="server"></asp:TextBox></td><td>其它说明<asp:TextBox ID="elesSm" runat="server"></asp:TextBox></td><td><input type="button" value="增加" onclick="sent()"/></td></tr></table> </div> <div style="width:100%; height:144px;"><yyc:SmartGridView ID="SmartGridView1" runat='server' AutoGenerateColumns="False" HeaderStyle-BackColor="#83bfe9" PageSize="4" Width="100%" CaptionAlign="Bottom" HorizontalAlign="Center" > <FixRowColumn FixRows="Header" FixRowType="Header" tablewidth="" /> <HeaderStyle BackColor="#83BFE9" VerticalAlign="Top" Wrap="False" /> <EmptyDataRowStyle HorizontalAlign="Center" VerticalAlign="Top" /><Columns> <asp:BoundField DataField="名称" HeaderText="慢性病名" /> <asp:BoundField DataField="确诊时间" HeaderText="确诊时间" /> <asp:BoundField DataField="其它说明" HeaderText="其它说明" /> <asp:BoundField DataField="名称" HeaderText="管理状态" /> <asp:TemplateField HeaderText="操作"> <ItemTemplate> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <input type="button" value="删除" onclick="ss()" /> </td> </tr> </table> </ItemTemplate> <ItemStyle Font-Bold="False" HorizontalAlign="Center" Font-Names="Arial" /> <HeaderStyle BackColor="#83bfe9" HorizontalAlign="Center" BorderColor="#83bfe9" BorderStyle="Solid" BorderWidth="1px" Font-Bold="true" Font-Names="Arial" Font-Size="12px" /> </asp:TemplateField></Columns></yyc:SmartGridView> </div>
var xRequest = null;function sent() {try{alert("111");if(document.getElementById("GR_JWBS1_MXBList").value=="无疾病"){alert("请选择要添加的疾病!");}else{ if (window.XMLHttpRequest) { xRequest = new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { xRequest = new ActiveXObject("Microsoft.XMLHTTP"); } if (xRequest) { var arr = new Array(); arr[0]=document.getElementById("GR_JWBS1_MXBList").value; arr[1]=document.getElementById("GR_JWBS1_GLList").value; arr[2]=document.getElementById("GR_JWBS1_QZtime").value; arr[3]=document.getElementById("GR_JWBS1_elesSm").value; var person ={"档案ID":aarr[0],"管理状态":arr[0],"结束日期":"","开始日期":"","录入人":arr[0],"录入日期":arr[0],"慢性病ID":arr[0],"慢性病名":"","其它说明":arr[0],"确诊时间":arr[0],"随访次数":"","随访间隔":""} var jsonStr = JSON.stringify(person);alert(jsonStr); xRequest.onreadystatechange = onReadyStateChange; xRequest.open("POST", "SQ_GR_MXBAJAX.aspx?person="+jsonStr, true); xRequest.setRequestHeader("Cache-Control", "no-cache"); xRequest.send(null); } else { alert("Your browser does not support XMLHTTP."); }}}catch(Error ){var txt; txt="There was an error on this page.\n\n"; txt+="Error description: " + err.description + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); }}function onReadyStateChange() { if (xRequest.readyState == 4) { if (xRequest.status == 200) { alert("保存成功"); // document.getElementById("cook").src = document.getElementById("cook").src + "?"; //这里如何局部刷新Gridview } else { alert("服务端返回状态" + xRequest.statusText); } }}
function addRow(){ var tblObj = document.getElementById("table1"); if(tblObj.rows){ alert(tblObj.rows.length); }else{ alert('aaa'); } //追加行 var newRow = tblObj.insertRow(); newRow.style.display = ""; var cellNum = tblObj.rows[0].cells.length; //追加列 for (colIndex = 0; colIndex < cellNum; colIndex++) { var newCell = newRow.insertCell(); initTblCell(newCell); } } function initTblCell(cell){ var lastCell = document.getElementById("table1").rows[0].cells[cell.cellIndex]; cell.innerHTML = lastCell.innerHTML; alert(cell.innerHTML); if (cell.children != null && cell.children.length > 0) { for(childIndex = 0; childIndex < cell.children.length; childIndex++) { var child = cell.children[childIndex]; switch(child.type) { case "text": child.value = ""; break; case "checkbox": child.value = ""; child.checked = false; break; } } } cell.className = lastCell.className; cell.align = lastCell.align; cell.height = lastCell.height; } function buttonFun(){ var obj= document.getElementsByName("text4"); for(i=1;i<obj.length;i++){ alert(obj[i].value); } } function dellRow(){ var obj= document.getElementById("table1"); var objRow=obj.rows.length-1; alert(objRow); if(objRow != 0){ obj.deleteRow(objRow); } } 下面是html代码<table id="table1" name="table1" width="300"> <tr style="display:none"> <td width="100"> <input type="button" name="testBtn4" value="button" onclick=""/> </td> <td width="100"> <input type="text" name="text4" id="text4"/> </td> <td width="100"> 123 </td> </tr> <tr> <td width="100"> <input type="button" name="testBtn4" value="button" onclick="toExcel_Page()"/> </td> <td width="100"> <input type="text" name="text4" id="text4"/> </td> <td width="100"> 123 </td> </tr> </table> <input type="button" name="testAdd" id="testAdd" value="AddRow" onclick="addRow()"/> <input type="button" name="testAdd" id="testAdd" value="DellRow" onclick="dellRow()"/> <input type="button" name="testAdd2" id="testAdd2" value="GetTextValue" onclick="buttonFun()"/>