碼上快樂

相關內容    簡體    繁體

AJAX異步請求實現無刷新增刪改查；完全無刷新；

本文轉載自   查看原文   2012-04-02 15:26   14075    AJAX

//注悉：點擊保存按鈕時自動獲取未發卡員工的Id無刷新異步保存卡號Id與卡號並且該員工資料被隱藏；已發卡表就顯示該員工資料；如果想從第N位開始發卡，操作前必須把N-1以及其前的所有員工資料都客戶端刪除（此刪除只是客戶端隱藏display='none'，操作跟后台無關，當然數據庫的數據不變）；才可以正常保存第N位員工發卡；（系統默認從未發卡員工表第一位員工開始發卡）；這個功能讓哥很頭疼；研究了整整兩天才搞定；如果是選擇CheckBox對應的發卡的話，哥一兩個鍾整個流程就可以搞定了；

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ME_MembersCardNo_Add.aspx.cs" Inherits="Front.Member.ME_MembersCardNo_Add" %>

<!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>
    <link href="../CSS/style.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../Scripts/Members/Commom.js" type="text/javascript"></script>
    <script src="../Scripts/Members/ME_Members_Add.js" type="text/javascript"></script>
    <script src="../Scripts/Members/ME_MembersNo.js" type="text/javascript"></script>

　 <script type="text/javascript">

　　

//-----------------------------AJAX實現非執業注師無刷新發卡
//        $(function () {
//            $("input[isRemoveRow='true']").click(function () {
//                var Id = $(this).attr("curId");
//                if (confirm("真的要刪除嗎？")) {
//                    $.post("HandlerDel.ashx", { "Id": Id }, function (data, status) {
//                        if (status == "success") {
//                            alert("刪除成功！");
//                        }
//                    });
//                    $("input[curId='" + Id + "']").parent().parent().remove(); //AJAX刪除input→td→tr,parent()指當前Id所在位置的父親td，也就是要刪除tr的話，就要刪除當前Id所在input的父親td的父親tr；
//                }
//            });
//        });
//動態刪除選中的行
function delTableRowNo() {
    var inputs = document.getElementsByTagName("input");
    var len = inputs.length;
    for (var i = 0; i < len; i++) {
        if ("checkbox" == inputs[i].type) {
            if (inputs[i].checked) {
                if (inputs[i].id != "checkAll")
                    document.getElementById(inputs[i].title).style.display = "none";//被選中的Checkbox客戶端隱藏
                //                            document.getElementById(inputs[i].title).style
            }
        }
    }
    return false;
}

//點擊保存按鈕是觸發的javascript方法

function AddTableRowNo() {
    var rowindex = 0;
    var i = 0;
    var CarId = document.getElementById("txtMembersCardId").value;
    var CarNo = document.getElementById("txtMembersCard").value;
    if (CarId == "") {
        alert("會員編號Id不能為空");
        return;
    }
    if (CarNo == "") {
        alert("會員卡號不能為空");
        return;
    }
    //            var IsCardTable = document.getElementById("IsCardTable");
    var inputs = document.getElementsByTagName("input");
    var inputLen = inputs.length;

　 //當遍歷到checkbox的style.display不等於none時，取得該checkbox的Id就跳出for循環
    for (i = 0; i < inputLen; i++) {
        if ("checkbox" == inputs[i].type) {
            if ("checkAll" != inputs[i].id) {
                if (document.getElementById(inputs[i].title).style.display != "none") {
                    rowindex = inputs[i].id;
                    break;
                }
            }
        }
    }

    //AJAX異步請求后台代碼並且保存數據

    var num = Front.Member.ME_MembersCardNo_Add.SaveIsCardMembersNO(rowindex, CarId, CarNo);
    if (rowindex != 0) {

        document.getElementById(inputs[i].title).style.display = "none";

　　  //AJAX異步請求查詢已發卡的會員資料
        var dt = Front.Member.ME_MembersCardNo_Add.ReturnIsCardTableNo()
        var IsCardT = document.getElementById("IsCardTable");

        //                for (var j = 0; j < IsCardT.rows.length; j++) {
        //                    document.getElementById("IsCardTable").removeChild();
        //               }

        //                for (var j = 0; j < inputLen; j++) {
        //                    if ("hidden" == inputs[j].type) {
        //                        if ("name" == inputs[j].name) {
        //                            if ("No" != document.getElementById("No")) {
        //                        
        //                            }
        //                        }
        //                       
        //                    }
        //                 }

　　　//JQuery動態刪除已發卡的員工表
        $("#IsCardTable").remove();

　　  //JQuery動態添加已發卡的員工表（空表）
        var table = $("<table id='IsCardTable' class='card_datalist' width='100%'><tr><td>會員卡號ID</td><td>會員卡號</td><td>姓名</td><td>性別</td><td>身份證</td><td>CPA證號</td></tr></table>");
        $("#Addtable").append(table);
        for (var K = 0; K < dt.value.Rows.length; K++) {
            if (dt.value.Rows[K]["MemberNo"] == null) {
                var tr = $("<tr id='" + dt.value.Rows[K]["Id"] + "'><td>" + dt.value.Rows[K]["CarId"] + "<input type='hidden' id='" + dt.value.Rows[K]["Id"] + "' name='name' />" + "</td><td>" + dt.value.Rows[K]["CardNo"] + "</td><td>" + dt.value.Rows[K]["Mname"] + "</td><td>" + dt.value.Rows[K]["Sex"] + "</td><td>" + dt.value.Rows[K]["IdNo"] + "</td><td>" + " " + "</td></tr>")
            }
            else {
                var tr = $("<tr id='" + dt.value.Rows[K]["Id"] + "'><td>" + dt.value.Rows[K]["CarId"] + "<input type='hidden' id='" + dt.value.Rows[K]["Id"] + "' name='name' />" + "</td><td>" + dt.value.Rows[K]["CardNo"] + "</td><td>" + dt.value.Rows[K]["Mname"] + "</td><td>" + dt.value.Rows[K]["Sex"] + "</td><td>" + dt.value.Rows[K]["IdNo"] + "</td><td>" + dt.value.Rows[K]["MemberNo"] + "</td></tr>")
            }
            $("#IsCardTable").append(tr);

        }
    }
    else {
        alert("沒有發卡的會員");
    }
    document.getElementById("txtMembersCardId").value = "";
    document.getElementById("txtMembersCard").value = "";
}

　 </script>

</head>

<body>
    <form id="form1" runat="server">
    <!-- 當前提示 start -->
  <div class="Tip">
    <div class="Current">當前位置：<span><a href="ME_MembersCardNo_Mgr.aspx">非執業注師發卡</a></span>&nbsp;>>&nbsp;<a href="ME_MembersCardNo_Add.aspx">發卡</a><span style="color:#F00"><asp:Label
        ID="lbl_title" runat="server" Text=""></asp:Label></span></div>
    <div class="adminop"> <span>現在時間：<span id="current_time"></span> </span>
     <script type="text/javascript" src="../Scripts/current_time.js"></script></div>
  </div>
  <!-- 當前提示 end -->
  <div class="mian_content">
  <div class="infobox">
    <h3><span style=" font-size:14px;">&nbsp;&nbsp;&nbsp;未發卡表</span></h3>
  
    <table class="card_list" cellpadding="0" width="80%" cellspacing="0">
       <tr><td>
       <table cellpadding="0" cellspacing="0" width="100%"><tr><td style="height:30px; padding:10px 10px 0 10px;">
       所屬事務所&nbsp;&nbsp;<asp:DropDownList ID="ddlOffice" runat="server">
            <asp:ListItem Value="">--請選擇--</asp:ListItem>
        </asp:DropDownList>
        CPA證號&nbsp;&nbsp;<asp:TextBox ID="txtCPANo" runat="server"></asp:TextBox>
        姓名&nbsp;&nbsp;<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
        <asp:Button ID="BtnSearch" CssClass="Submit" runat="server" Text="查詢" onclick="BtnSearch_Click"/></td></tr>
        <tr><td style="padding:0 10px; height:30px;">
        <asp:Button ID="LBtnDelMembersNoCard" CssClass="Submit" runat="server"  OnClientClick="return delTableRowNo();" Text="刪除不需發卡注師"/>
       </td></tr></table>
       </td></tr>
        <tr><td style="padding:0 10px 10px 10px;">
        <table id="TMain" class="card_datalist" width="100%" >
            <tr>
                <td align="center">
                     <input type="checkbox" id="checkAll" onclick="IscheckAll()"/>
                </td>
                <td>
                    會員卡號ID
                </td>
                <td>
                    會員卡號
                </td>
                <td>
                    姓名
                </td>
                <td>
                    性別
                </td>
                <td>
                    身份證
                </td>
                <td>
                    CPA證號
                </td>
            </tr>
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <tr id='<%#Eval("Id")%>'>

                        <td align="center">
                            <%--<input id="checkbox1" type="checkbox" isEditRow="true"  value='<%#Eval("Id")%>'/>--%>
                            <%--<asp:CheckBox ID="CheckBox1" runat="server" ToolTip='<%# Eval("Id") %>' isEditRow="true"></asp:CheckBox>--%>
                            <input type="checkbox" id='<%#Eval("Id")%>' title='<%#Eval("Id")%>'/>
                            <asp:HiddenField ID="HiddenField1" runat="server" Value='<%#Eval("Id")%>' />
                        </td>
                        <td>
                            <%#Eval("CarId")%>
                        </td>
                        <td>
                            <%#Eval("CardNo")%>
                        </td>
                        <td>
                            <%#Eval("Mname")%>
                        </td>
                        <td>
                            <%#Eval("Sex")%>
                        </td>
                        <td>
                            <%#Eval("IdNo")%>
                        </td>
                        <td>
                            <%#Eval("MemberNo")%>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>
        </table>
        </td>
        </tr>
        </table>

   
    <h3><span style=" font-size:14px;">&nbsp;&nbsp;&nbsp;已發卡表</span></h3>

            <table class="card_list" cellpadding="0" width="80%" cellspacing="0">
            <tr>
            <td id="Addtable" style="padding:10px;">
            <table id="IsCardTable" class="card_datalist" width="100%">
            <tr>
                <%--<td>
                    <input type="checkbox" id="Checkbox2" onclick="IscheckAll();"/>
                </td>--%>
                <td>
                    會員卡號ID
                </td>
                <td>
                    會員卡號
                </td>
                <td>
                    姓名
                </td>
                <td>
                    性別
                </td>
                <td>
                    身份證
                </td>
                <td>
                    CPA證號
                </td>
            </tr>
            <asp:Repeater ID="Repeater2" runat="server">
                <ItemTemplate>
                    <tr >
                       <%-- <td>
                            <asp:CheckBox ID="CheckBox1" runat="server" />
                        </td>--%>
                        <td>
                            <%#Eval("CarId")%>
                        </td>
                        <td>
                            <%#Eval("CardNo")%>
                        </td>
                        <td>
                            <%#Eval("Mname")%>
                        </td>
                        <td>
                            <%#Eval("Sex")%>
                        </td>
                        <td>
                            <%#Eval("IdNo")%>
                        </td>
                        <td>
                            <%#Eval("MemberNo")%>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>
            </table>
            </td>
            </tr>
        </table>
    <h3><span style=" font-size:14px;">&nbsp;&nbsp;&nbsp;增加會員卡號</span></h3>
<table class="card_list" cellpadding="0" width="80%" cellspacing="0">
    <tr><td align="center" style="height:30px;">
        會員卡號Id&nbsp;&nbsp;<asp:TextBox ID="txtMembersCardId" runat="server"  onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"> </asp:TextBox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        會員卡號&nbsp;&nbsp;<asp:TextBox ID="txtMembersCard" runat="server" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"> </asp:TextBox>
        </td></tr>
        <tr><td align="center" style="height:30px;">
        <%--<asp:Button ID="BtnSaveCard" class="form_buttom" runat="server" Text="保存" OnClientClick="return checkBtn();" onclick="BtnSaveCard_Click"/>--%>
        <input type="button" class="form_buttom" id="button1" onclick="AddTableRowNo();" value="保存"/> &nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button1" class="form_buttom" runat="server" Text="返回"  onclick="Button1_Click"/>
        </td></tr></table>

    </div></div>
    </form>
</body>
</html>

 

 


 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ajax 異步無刷新 5.Hibernate實現全套增刪改查和ajax異步分頁 分享一個自己寫的MVC+EF “增刪改查” 無刷新分頁程序 AJAX異步請求,局部刷新 關於Ajax異步請求（實時刷新） Ajax異步無刷新顯示圖片 使用AJAX實現數據的增刪改查 ElementUI tree異步樹(懶加載)節點新增刪除編輯時實現局部刷新 ajax異步請求實例 ajax異步刷新請求數據
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM