ASP.NET—006：GridView刪除一行JS實(shí)現(xiàn)

發(fā)布時(shí)間：2020-07-02 16:00:51 來(lái)源：網(wǎng)絡(luò) 閱讀：558 作者：yangyoushan 欄目：編程語(yǔ)言

原文作者：楊友山

原文地址：http://blog.csdn.net/yysyangyangyangshan/article/details/22321921

前一篇說(shuō)了JS增加一行，那么如何刪除一行呢？
也很簡(jiǎn)單，還是用JS實(shí)現(xiàn)，JS獲取要?jiǎng)h除的一行，并得到這一行數(shù)據(jù)的ID（綁定數(shù)據(jù)時(shí)將ID放在一個(gè)隱藏空間中）。然后使用ajax方法傳到后臺(tái)，完成真正的刪除。同時(shí)在前臺(tái)也刪掉gridview中的一行。
效果如下
確認(rèn)刪除
ASP.NET—006：GridView刪除一行JS實(shí)現(xiàn)
刪除成功

代碼如下：
前臺(tái)代碼，主要看DelItem這個(gè)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>序號(hào)</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("真的要?jiǎng)h除？")) {
            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>

后臺(tái)代碼
獲取到傳來(lái)的數(shù)據(jù)id刪除，然后回應(yīng)前臺(tái)就可以了

 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"] = "西北白楊樹(shù)";


                    nrow["p_age"] = 27;


                    nrow["p_sex"] = "男";


                    PersonCollect.Rows.Add(nrow);
                }
            }


            return PersonCollect;
        }


        protected void DeleteSingleData()
        {
            string id = Request["ID"].ToString();


            //用ID自己寫(xiě)代碼刪除數(shù)據(jù)庫(kù)


            SendTextMessage("success");
        }


        protected void SendTextMessage(string message)
        {
            Response.ContentType = "text/plain";


            Response.Write(message);


            Response.End();
        }
    }

代碼下載：http://download.csdn.net/detail/yysyangyangyangshan/7109385

向AI問(wèn)一下細(xì)節(jié)

ASP.NET—006：GridView刪除一行JS實(shí)現(xiàn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽