博 之 文

以 拼 搏 设 计 梦 想 , 以 恒 心 编 程 明 天
  首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

AJAX异步请求实现无刷新增删改查;完全无刷新;

Posted on 2012-04-02 15:26  IsNull_Soft  阅读(14492)  评论(0编辑  收藏  举报

//注悉:点击保存按钮时自动获取未发卡员工的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>