首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

怎么局部刷新Gridview

2012-09-14 
如何局部刷新Gridview想实现1点击增加按钮时把数据保存到数据库中。(已使用AJAX实现)2、当保存成功后刷新Gri

如何局部刷新Gridview
想实现1点击增加按钮时把数据保存到数据库中。(已使用AJAX实现)
2、当保存成功后刷新GridView的显示(不知道如何控制局部刷新)

HTML code
 <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>




JScript code
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);        }    }} 








[解决办法]
如果说你要速度很快。或者要求所谓的局部刷新(我理解为:只是想将最后的一条数据绑定到你的GradView的后面)你可以通过写js代码实现给table增加一个tr来实现。
[解决办法]
用UpdatePanel,仅仅是看起来不刷新。

[解决办法]
探讨

1、新建Ajax网站,添加ScriptManager和UpdatePanel
2、添加数据后重新绑定GridView

手写Ajax太麻烦了且效率低

[解决办法]
不能用ajax 它的局部刷新时相对整个页面来说的,整个GridView都刷新了

照前面说的 用js在table中增加一行
JScript code
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()"/> 

热点排行