ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中（一）

时间：2022-03-10 18:08

<%@ 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" />  <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>  <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>  <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>)
            }
        }
        
效果图：