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>)
            }
        }

效果图：

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

时间： 2024-10-13 22:43:28

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

js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种方式使<input type="checkbox" />中的复选框被选中. 方法一:直接在HTML行间中添加checked属性.   eg:<input type="checkbox" checked /> 方法二:使用javascript使in

【mfc】组框、单选框控件与复选框控件

VC6中的MFC中的单选框与复选框控件也不简单,它没有VS中C#那样可以之间通过一个封装之后的函数进行判断,该单选框/复选框有没有被选中啊?或者控制单选框/复选框的选中状态.这东西比较复杂,通过相应的值来控制的. 一.基本目标 下面就用一个简单例子来说明VC6中的MFC中的单选框与复选框控件,点击"确定"按钮能够判断对话框中的所有单选框与复选框的选中状态.Radio1-Radio3互成一个组,组内仅能够有一个组员被选中,Radio4-Radio5也互成一组,选择Radio4能够令复选框

js自定义修改复选框单选框样式，清除复选框单选框默认样式

之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认样式进行修改,但发现,并没有可以重置效果的方法,之前用过-webkit-appearance的方法,但是这个只在webkit内核的浏览器里面生效,火狐不生效. 所以自己写了个js,用li来模拟复选框和单选框的效果,很简单,7行就行. 效果图:  涉及到的知识点:自定义属性来存储点击状态和原来的class名 h

分页实现复选框的选中状态

function GetIds() { $(".ck:checked").each(function () { var v = $(this).val(); if (id.toString() == "") { id.push(v); } else { if ($.inArray(v, id) <0) { id.push(v); } } }); alert(id.toString()); } function Fan() { $(".ck"

点击文本框弹出可供选择的checkbox复选框代码实例

点击文本框弹出可供选择的checkbox复选框代码实例:本章节分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&qu

jquery获取选中的checkbox复选框的值

jquery获取选中的checkbox复选框的值:checkbox复选框是常用的表单元素之一,既然使用,一般就要获取选中的复选框的值,下面就介绍一下如何使用jQuery实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/

Jquery学习笔记：操作form表单元素之二（复选框和单选框）

在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="item" checked> 全选</label> 注意,input标签要放在label标签内,这样点击文字时也会有反映. 如果选中了,调用  $("#item").prop("checked")返回true,否则返回false 同样利用pro

样式化复选框(Styling Checkbox)

复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 选中状态  未选状态 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览器才支持对这类控件应用样式,比如拿到这样一张设计图:  blue.png 在过去,想要通过简单地修改样式达成这种设计效果根本不行,不过,现在借助强大的 CSS3 属性 appearance 可以对该类控件有空前的样式控制能力: input[type="checkbox&

复选框使用总结

对复选框最基本的应用, 就是对复选框进行全选,反选和全不选等操作.复杂的操作需要与选项挂钩,来达到各种级联效果. 首先在空白网页中创建一个表单, 其中放入一组复选框: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <