ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中（一）
浏览数：37 /
时间：2015年06月12日
ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中，这个问题分一下几步走
1、将弹出框真分页后复选框选择的数据保存。
2、将弹出框保存的数据传到父页面上。
3、将数据在父页面上显示。
4、点击保存将信息存入数据库中。
首先来第一步将弹出框真分页后复选框选择的数据保存。
思路很简单就是先真分页，然后在点击下一页的时候扫描这一页所有点击复选框的数据保存到一个变量数组中。下面就是主要代码：
ASP代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ZCXDWLInfo.aspx.cs" Inherits="WEB.DDGL.ZCXDWLInfo" %> <!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 runat="server"> <title></title> <link href="../css/admin.content.css" rel="stylesheet" type="text/css" /> <link href="../css/admin.global.css" rel="stylesheet" type="text/css" /> <link href="../css/admin.index.css" rel="stylesheet" type="text/css" /> <!--JS导入的公共js文件--> <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../js/jquery.utils.js" type="text/javascript"></script> <script src="../js/admin.js" type="text/javascript"></script> <!--引用jBox样式css文件及js文件--> <link href="../jBox/Skins/Green/jbox.css" rel="stylesheet" type="text/css" /> <script src="../jBox/jquery.jBox-2.3.min.js" type="text/javascript"></script> <script src="../jBox/i18n/jquery.jBox-zh-CN.js" type="text/javascript"></script> <script src="js/ZCXDInfo.js" type="text/javascript"></script> <!--JS导入的界面操作js文件--> <script type="text/javascript"> </script> <style type="text/css"> .style1 { width: 110px; text-align: right; } .style2 { width: 92px; text-align: right; } .style3 { width: 57px; } .style4 { width: 123px; } .style5 { width: 159px; } .style6 { text-align: right; width: 97px; } .contentDisplay { display: none; } </style> </head> <body onload="search_Click()"> <form id="form1" runat="server"> <div class="block" id="ZCXD" runat="server"> <div class="h"> <span class="icon-sprite icon-list"></span> <h3> 物料信息</h3> <div class="bar"> <asp:Button ID="Button1" runat="server" Text="添加物料" OnClientClick="getSelected();return false;" /> </div> </div> <div class="tl corner"> </div> <div class="tr corner"> </div> <div class="bl corner"> </div> <div class="br corner"> </div> <div class="cnt-wp"> <div class="cnt"> <!--多标签标签部分--> <input id="Hidden1" type="hidden" runat="server" value="0" /> <!--多标签的内容部分--> <table class="data-table contentin" id="mainTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <th scope="col"> 物料编码 </th> <th scope="col"> 产品名称 </th> <th scope="col"> 数量 </th> <th scope="col"> 单价 </th> <th scope="col"> 金额 </th> <th scope="col"> 选择 </th> </tr> <tr id="content" class="contentDisplay"> <td class="txt c" id="LJBM" name="LJBM"> </td> <td class="txt c" id="LJMC" name="LJMC"> </td> <td class="txt c" id="LJSL"> <input id="txtSL" type="text" name="txtSL" onblur="Money();" /> <input id="hidLJID" type="hidden" name="hidLJID" /> </td> <td class="txt c" id="hidDJ" name="hidDJ"> </td> <td class="txt c" id="Money" name="Money"> </td> <td class="icon tail" id="ckWLXZ"> <input name="ckWLXZ" type="checkbox" onclick="SaveCheckboxInfo()" /> </td> </tr> </tbody> </table> </div> <input id="hidJBID" type="hidden" runat="server" /> <input id="hidWLMC" type="hidden" /> <input id="pageSize" type="hidden" /> <input id="pageIndex" type="hidden" /> <input id="pageCount" type="hidden" /> <input id="recordCount" type="hidden" /> <%--分页区域--%> <div id="insert"> </div> </div> </div> </form> </body> </html>
JS代码：
var SaveCheck = new Array(); var SaveBig = 0; function pagingClick(text, index) { var pageSize = parseInt($('#pageSize').val()); //页面大小 var pageIndex = parseInt($('#pageIndex').val()); //当前页 var pageCount = parseInt($('#pageCount').val()); //页总数 var recordCount = parseInt($('#recordCount').val()); //记录总数 if ("上一页" == text) {//点击上一页按钮 if (pageIndex > 1) { //查询并显示数据 getData(pageSize, pageIndex - 1); $('#pageIndex').val(pageIndex - 1); //更新当前页 // alert($('#lblPage').text()); $('#lblPage').text('共' + recordCount + '条记录，当前第' + (pageIndex - 1) + '/' + pageCount + '，每页' + pageSize + '条记录'); } } else if ("下一页" == text) {//点击下一页按钮 if (pageIndex < pageCount) { //查询并显示数据 getData(pageSize, pageIndex + 1); $('#pageIndex').val(pageIndex + 1); //更新当前页 $('#lblPage').text('共' + recordCount + '条记录，当前第' + (pageIndex + 1) + '/' + pageCount + '，每页' + pageSize + '条记录'); } } else if ("跳转" == text) { //点击跳转按钮 var skinIndex = $('#current-index').trim(); //获取要跳转的页数 if (skinIndex != pageIndex && skinIndex >= 1 && skinIndex <= pageCount) { //查询并显示数据 getData(pageSize, skinIndex); $('#pageIndex').val(skinIndex); //更新当前页 $('#lblPage').text('共' + recordCount + '条记录，当前第' + skinIndex + '/' + pageCount + '，每页' + pageSize + '条记录'); } else { $('#current-index').val('').focus(); return; } } else { //点击首页和尾页按钮 //查询并显示数据 getData(pageSize, parseInt(index)); $('#pageIndex').val(parseInt(index)); //更新当前页 $('#lblPage').text('共' + recordCount + '条记录，当前第' + parseInt(index) + '/' + pageCount + '，每页' + pageSize + '条记录'); } } //============================================================结束============================================================= //===========================================================显示分页控件==================================================== function pagingShow(pageSize, pageIndex) { var intJBID =$('#hidJBID').val(); //隐藏控件DLSCode if (intJBID == "null") { intJBID = ""; } //=================客户信息条数，并将分页按钮输出到界面================================ $.ajax({ type: "get", //传递类型get url: "../DDGL/handler/QueryZCXDCount.ashx?JBID=" + intJBID, //返回数据成功，将返回的json数据解析，并显示 success: function(ZCXDCount) { var recordCount = parseInt(ZCXDCount); //记录总数 $("#insert").contents("div").remove(); //去掉分页按钮 if (recordCount > 0) { //根据记录总数和每页显示数据条数算总页数 var pageCount = (recordCount % pageSize == 0) ? parseInt(recordCount / pageSize) : parseInt(recordCount / pageSize) + 1; $('#pageCount').val(pageCount); //将页总数赋值给界面隐藏控件 $('#recordCount').val(recordCount); //将记录总条数赋值给界面隐藏控件 //生成a标签的函数 function _getLink(text, index) { return J.FormatString(' <a class="button-white" href="javascript:pagingClick(\'' + text + '\',' + index + ');"><span>{0}</span></a>', text, index); } var html = []; html.push('<div class="pager-bar">'); html.push(J.FormatString('<div id = "lblPage" class="msg">共{0}条记录，当前第{1}/{2}，每页{3}条记录</div>', recordCount, pageIndex, pageCount, pageSize)); html.push(_getLink('首页', 1)); html.push(_getLink('上一页', pageIndex - 1)); html.push(_getLink('下一页', pageIndex + 1)); html.push(_getLink('未页', pageCount)); html.push(' '); html.push('第<input id="current-index" onkeydown="J.EnterSubmit(event, Pager.Jump);" class="input-small" style="text-align:center;" type="text" value="' + (pageIndex > 0 ? pageIndex : '') + '" />页'); html.push(' '); html.push('<a class="button-white" href="javascript:pagingClick(\'跳转\',\'\');"><span>跳转</span></a>'); html.push('</div>'); $("#insert").append(html.join('')); } }, //返回数据失败，弹出错误显示 error: function(XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); }, }); } //===================================点击查询按钮响应的事件========================================================== function search_Click() { var pagesize =50; //分页大小 var pageIndex =1; //当前页 //将这些数据赋值给界面的隐藏控件 // $('#hidJBID').val(intJBID); $('#pageSize').val(pagesize); //分页大小 $('#pageIndex').val(pageIndex); //当前页 //显示分页控件 pagingShow(pagesize, pageIndex); //查询并绑定数据 getData(pagesize, pageIndex); return false; } //=================================================结束======================================================================= //===============================根据页面大小和页数查询零件信息，并将数据显示在界面的table中=============================================== function getData(pageSize, pageIndex) { var intJBID = $('#hidJBID').val(); //级别ID if (intJBID == "null") { intJBID = ""; } //=================根据级别ID查询零件ID================================ $.ajax({ type: "get", url: "../DDGL/handler/QueryZCXDAllInfo.ashx?JBID=" + intJBID + "&pageSize=" + pageSize + "&pageIndex=" + pageIndex, //返回数据成功，将返回的json数据解析，并显示 success: function(strJson) { var obj = eval(strJson); //eval 计算 JavaScript 字符串，并把它作为脚本代码来执行 //检查后台返回的数据 //将获取到的数据动态的加载到table中 $("#mainTable tr").eq(1).removeClass("contentDisplay"); //移除模板行的样式 $("#mainTable tr").eq(1).nextAll().remove(); //将标题行的tr删除 这里指的是删除第二个tr //依次遍历获得的json数据，向数据表table中动态加载数据 for (var i = 0; i < obj.length; i++) { var row = $("#content").clone(); //clone clone() 方法生成被选元素的副本，包含子节点、文本和属性。 row.find("#LJBM").text(obj[i].LJBM); row.find("#hidLJID").val(obj[i].ID); row.find("#LJMC").text(obj[i].MC); row.find("#hidDJ").text(obj[i].DJ); // $("#txtSL").live("onblur",function(){ // $("#Money").val()=$("#txtSL").val()*$("#hidDJ").val() // }); //明细。单击时，传递参数，调用Detail_Click方法 // row.find("#Detail a").bind("click", { strDivisionID: obj[i].strDivisionID, strEvaluaterCode: obj[i].strEvaluaterCode }, Detail_Click); row.find("#ckWLXZ") //row.css("display", "inline"); row.appendTo("#mainTable"); //添加到mainTable中 } $("#mainTable tr").eq(1).addClass("contentDisplay"); //添加模板列的css样式 // 隔行变色 $('table.data-table tr:even').addClass('even'); }, //返回数据失败，弹出错误显示 error: function(XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); } }); } //保存选择数据 function SaveCheckInfo(){ var LJBM = document.getElementsByName("LJBM"); var CheckInfo = document.getElementsByName("ckWLXZ"); var LJID = document.getElementsByName("hidLJID"); var SL = document.getElementsByName("txtSL"); var Money = document.getElementsByName("Money"); var LJMC = document.getElementsByName("LJMC"); var DJ = document.getElementsByName("hidDJ"); for (var i = 1; i < CheckInfo.length; i++) { if (CheckInfo[i].checked == true) { // '{ "name": "cxh", "sex": "man" }' var strLJBM = LJBM[i].innerHTML var strLJID = LJID[i].value; var strSL = SL[i].value; var strLJMC = LJMC[i].innerHTML; var strMoney = Money[i].innerHTML; var strDJ=DJ[i].innerHTML; switch (i+1) { case 2 : SaveCheck[SaveBig] = '[{"LJBM":"' + strLJBM + '","SL":"' + strSL + '","Money":"' + strMoney + '","LJID":"' + strLJID + '","LJMC":"' + strLJMC + '","DJ":"'+ strDJ+'","DJBH":"-","GSF":"-","GLF":"-"}' break; // case CheckInfo.length : // SaveCheck[SaveBig] = '{"LJBM":"' + strLJBM + '","SL":"' + strSL + '","Money":"' + strMoney + '","LJID":"' + strLJID + '","LJMC":"' + strLJMC+ '","DJ":"'+ strDJ+ '","DJBH":"-","GSF":"-","GLF":"-"}]' // break; default : SaveCheck[SaveBig] = '{"LJBM":"' + strLJBM + '","SL":"' + strSL + '","Money":"' + strMoney + '","LJID":"' + strLJID + '","LJMC":"' + strLJMC+ '","DJ":"'+ strDJ+ '","DJBH":"-","GSF":"-","GLF":"-"}' break; } SaveBig++; SaveCheck[SaveBig]="]"; } } } /* 正常下单 */ /* 把保存的所有数据都返回到页面 */ function getSelected() { SaveCheckInfo() window.returnValue = SaveCheck; window.close(); } //算出金额 function Money() { var SL = document.getElementsByName("txtSL"); var DJ = document.getElementsByName("hidDJ"); var TotalMoeny=0; var Money = document.getElementsByName("Money"); for (var i = 1; i < SL.length; i++) { Money[i].innerHTML = SL[i].value * DJ[i].innerHTML TotalMoeny=parseFloat(TotalMoeny)+parseFloat(Money[i].innerHTML) // if(TotalMoeny>) } }
效果图：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
