原文作者:楊友山
原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/22321921
前一篇說了JS增加一行,那麼如何刪除一行呢?
也很簡單,還是用JS實現,JS獲取要刪除的一行,並得到這一行數據的ID(綁定數據時將ID放在一個隱藏空間中)。然後使用ajax方法傳到後臺,完成真正的刪除。同時在前臺也刪掉gridview中的一行。
效果如下
確認刪除
刪除成功
代碼如下:
前臺代碼,主要看DelItem這個JS方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> </head> <body id="Body1" runat="server"> <form id="Form1" runat="server"> <asp:Button ID="btnAdd" runat="server" OnClientClick="return AddNewRow();return false;" Text="增加"/> <asp:GridView ID="dgPersons" runat="server" EnableViewState="false" CellPadding="4" GridLines="Horizontal" PageChange="TextBox" AutoGenerateColumns="False" SortMode="Total" ForeColor="#333333" CellSpacing="1" Width="60%" ShowNoRecordTip="True"> <Columns> <asp:TemplateField> <ItemTemplate> <%#Container.DataItemIndex +1%> <input id="hideID" type="hidden" runat="server" value='<%#Eval("p_id")%>' /> </ItemTemplate> <HeaderTemplate> <span>序號</span> </HeaderTemplate> </asp:TemplateField> <asp:TemplateField> <ItemTemplate> <span> <%#Eval("p_name")%></span> </ItemTemplate> <HeaderTemplate> <span>姓名</span> </HeaderTemplate> </asp:TemplateField> <asp:TemplateField> <ItemTemplate> <span> <%#Eval("p_age")%></span> </ItemTemplate> <HeaderTemplate> <span>年齡</span> </HeaderTemplate> </asp:TemplateField> <asp:TemplateField> <ItemTemplate> <span> <%#Eval("p_sex")%></span> </ItemTemplate> <HeaderTemplate> <span>性別</span> </HeaderTemplate> </asp:TemplateField> <asp:TemplateField> <ItemTemplate> <a href ="JavaScript:viod(0)" </ItemTemplate> <HeaderTemplate> <span>操作</span> </HeaderTemplate> </asp:TemplateField> </Columns> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <RowStyle HorizontalAlign="Center" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <EditRowStyle BackColor="#999999" /> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> </asp:GridView> </form> </body> <script type="text/javascript" src="/Scripts/Ajax.js"></script> <script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script> <script language="javascript" type="text/javascript"> var dgPersonsID = "<%= dgPersons.ClientID %>"; $(document).ready(function () { $("#dgPersons tr").eq(1).hide(); }); function AddNewRow() { var tr = $("#dgPersons tr").eq(1).clone(); tr.show(); tr.appendTo("#dgPersons"); refreshNo(); return false; } function DelItem(obj) { var elm = event.target || event.srcElement; if (elm.disabled) { return false; } if (confirm("真的要刪除?")) { var row = obj.parentElement.parentElement; var deleteData = new Object(); deleteData.ID = row.cells[0].children[0].value; var postData = deleteData; postData.operateType = "Delete"; var htmlobj = $.ajax({ type: "POST", data: postData, async: true, success: function (result) { var tr = elm.parentNode.parentNode; tr.parentNode.removeChild(tr); alert("刪除成功!") }, error: function (result) { alert("刪除失敗!"); } }); } refreshNo(); return false; } function refreshNo() { var dgg = document.getElementById(dgPersonsID); var index = 1; for (var i = 2; i < dgg.rows.length; ++i) { var cells = dgg.rows[i].cells; var row = dgg.rows[i]; if (row.style.display != "none") { cells[0].firstChild.nodeValue = index++; } } return false; } </script>
後臺代碼
獲取到傳來的數據id刪除,然後迴應前臺就可以了
public partial class ChildFrm : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { switch (Request["operateType"]) { case "Delete": DeleteSingleData(); return; default: break; } if (!IsPostBack) { DataTable dt= InitData(); this.dgPersons.DataSource = dt; this.dgPersons.DataBind(); } } private DataTable InitData() { DataTable PersonCollect = new DataTable(); PersonCollect = new DataTable(); PersonCollect.Columns.Add("p_id"); PersonCollect.Columns.Add("p_name"); PersonCollect.Columns.Add("p_age"); PersonCollect.Columns.Add("p_sex"); if (PersonCollect.Rows.Count < 1) { for (int i = 0; i < 1; i++) { DataRow nrow = PersonCollect.NewRow(); nrow["p_id"] = System.Guid.NewGuid().ToString(); nrow["p_name"] = "西北白楊樹"; nrow["p_age"] = 27; nrow["p_sex"] = "男"; PersonCollect.Rows.Add(nrow); } } return PersonCollect; } protected void DeleteSingleData() { string id = Request["ID"].ToString(); //用ID自己寫代碼刪除數據庫 SendTextMessage("success"); } protected void SendTextMessage(string message) { Response.ContentType = "text/plain"; Response.Write(message); Response.End(); } }
代碼下載:http://download.csdn.net/detail/yysyangyangyangshan/7109385