ASP.NET實現彈出框真分頁將複選框選擇的資料存到資料庫中（一），asp.net資料庫
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>) } }
：
綜述：
其實這個功能把真分頁，複選框選擇儲存資料，JS提供一個零時緩衝（一個陣列變數）這三個技術進行了融合在了一起。這三個功能也可以分開來使用。
點擊事件中執行：迴圈panel中的所有控制項，如果是checkbox，則判斷是否選中，如果是，則訪問資料庫將其儲存
aspnet中怎向資料庫插入checkbox選中的值
直接.value
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
