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//DTDXHTML 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() { varinputs = document.getElementsByTagName("input"); varlen = inputs.length; for(vari = 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 } } } returnfalse; }
//点击保存按钮是触发的javascript方法
function AddTableRowNo() { varrowindex = 0; vari = 0; varCarId = document.getElementById("txtMembersCardId").value; varCarNo = document.getElementById("txtMembersCard").value; if(CarId == ""){ alert("会员编号Id不能为空"); return; } if(CarNo == ""){ alert("会员卡号不能为空"); return; } // var IsCardTable =document.getElementById("IsCardTable"); varinputs = document.getElementsByTagName("input"); varinputLen = 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异步请求后台代码并且保存数据
varnum = 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> >> <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;"> 未发卡表</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;"> 所属事务所 <asp:DropDownList ID="ddlOffice"runat="server"> <asp:ListItem Value="">--请选择--</asp:ListItem> </asp:DropDownList> CPA证号 <asp:TextBox ID="txtCPANo"runat="server"></asp:TextBox> 姓名 <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:HiddenFieldID="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;"> 已发卡表</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:CheckBoxID="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;"> 增加会员卡号</span></h3> <table class="card_list"cellpadding="0" width="80%"cellspacing="0"> <tr><td align="center"style="height:30px;"> 会员卡号Id <asp:TextBoxID="txtMembersCardId"runat="server" onkeyup="value=value.replace(/[^w./]/ig,'')"> </asp:TextBox> 会员卡号 <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="保存"/> <asp:Button ID="Button1"class="form_buttom"runat="server"Text="返回" onclick="Button1_Click"/> </td></tr></table>
</div></div> </form> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |