JQuery实现表格的全选和反选，以及分页勾选保存（laypage插件分页的使用）

需求：

1、全选与取消全选

2、单个勾选，点击表格单元格中checkbox勾选，也可以在点击行勾选，便与用户操作

3、分页勾选保存

4、固定表头

功能一：

说明：操作全选按钮的同时，遍历每一个tr中的checkbox，如果是全选的并且之前没有被选中的就勾选上，如果是取消取消就全部取消勾选

//全选与取消全选
$("#grid").on("click",'.checkAll',function(){
    var me=this;//留住this
    $("#grid tr+>td").find("input[type=checkbox]").each(function(i,e){
        var id=$(e).attr("data-id")
        if(me.checked){
            //判断之前是否选中
            if(idArr.indexOf(id)==-1){
                $(e).prop("checked", true);  
                $(e).parent().parent().css("background-color","rgb(220, 248, 168)")
                //将idObj中的添加属性
                idArr.push(id)
            }
        }else{
            $(e).prop("checked", false); 
            //在数组中找到
            idArr.splice(idArr.indexOf(id),1);
            $(e).parent().parent().css("background-color","")
        }
    })
})

功能二：

　　这个功能实现起来有些陷阱；

　　　　1、选中之前一定要做判断，不能重复的数组中push值

　　　　2、注意解决事件的冒泡问题，因为在勾选到checbox的时候同时会冒泡到tr上触发事件，所以加上了e.stopPropagation();，还有一个行内中一个a链接跳转，点击的时候也会触发，也需要阻止a标记的冒泡事件，对于a标记的事件冒泡本来用了

return false 应该可以解决，但是在实际情况并没有得到解决，（后来发现了原因是因为a标记里面的方法有一个跳转事件，跳转了return false就无效了）所以用了事件，在a标记的父元素的td中添加了一个事件，然后return false 完美解决了问题

//每一个checkBox的点击事件
$("#grid").on("click",'input[type=checkbox]:not(.checkAll)',function(e){
    e.stopPropagation();//此处很重要，否则会冒泡触发其他事件
    var id=$(this).attr("data-id")
    if(this.checked){
        //判断是否已经选中过
        if(idArr.indexOf(id)==-1){
            idArr.push(id);
            $(this).parent().parent().css("background-color","rgb(220, 248, 168)")
        }
    }else{
        idArr.splice(idArr.indexOf(id),1);
        $(this).parent().parent().css("background-color","")
    }
　　opCheckArr();
})
//为了用户更好的体验在tr上面也绑定事件
$("#grid").on("click",'tr:not(.tbl-header)',function(){
    var id=$(this).attr("data-id");
    var $chk=$(this).find("input[type=checkbox]");
    //如果是勾选的那么久取消勾选，反之
    if($chk[0].checked){
        $chk.prop("checked", false); 
        $(this).css("background-color","");
        idArr.splice(idArr.indexOf(id),1);
    }else{
        //判断是否之前有选中过,如果选中了就不在执行
        if(idArr.indexOf(id)==-1){
            //将行中的checkbox选中
            $chk.prop("checked", true);  
            idArr.push(id);
            $(this).css("background-color","rgb(220, 248, 168)")
        }
    }
}) 
//为了阻止a标记的事件冒泡,否则会冒泡到tr上面
$("#grid").on("click",'td:last-child',function(){
    return false;
}) 

    /*
     *检查操作全选的checkbox
     */
    function opCheckArr(){
        if(idArr.length==pageSize){
            $("#grid").find('.checkAll').prop("checked",true);
            $('.table-fixed').find('.checkAll').prop("checked",true);//克隆的checkbox也需要勾选上
        }else{
            $('#grid').find('.checkAll').prop("checked",false);
            $('.table-fixed').find('.checkAll').prop("checked",false);//克隆的checkbox也需要取消勾选
        }
    }

功能三：

　　实现过程：

　　勾选的时候操作数组idArr  勾选的时候push；

　　取消勾选的时候需要找到相应位置的元素将其删除 splice；

　　全选的时候，遍历一下一个每一个tr中的checkbox，之前要判断，如果勾选了就不要在操作数组

　　功能在功能一、二中已经实现了

如果不需要功能三，只需要在构建表格的时候将idArr数组清空即可

功能四：表头固定

　　实现过程：滚动div的时候，在现有的表格前面创建一个表格，内容为克隆原表格的表头，设置宽度

　　陷阱：克隆的表头出来之后还需要给其绑定事件，在这里用了深克隆其实是没有用的，因为原来的事件是代理在表格上面而不是在tr上面

　　解决：在克隆的checkbox点击的时候trigger一下原表格的click事件，还是有克隆表格的表头不能隐藏，只能删除和添加

　　js

        $(".scroll-tabel").on('scroll',function(){
            //判断是否有表头table在
            var el=$(this).find('.table-fixed');
            if(!el[0]){
                $(this).append("<table class='table-fixed conTbl' style='position:absolute;top:0;font-size:13px;table-layout:fixed;'></table>");
                //在原始表格找找到表头项进行克隆
                var $thead=$("#tbl").find('tr.tbl-header').clone(true);
                var older=$(this).find(".tbl-header").children();
                //设置固定表头的宽度
                $thead.children().each(function(idx,ele){
                    $(ele).css("width",older.eq(idx).css("width"));
                    $(ele).css("height",older.eq(idx).css("height"));
                })
                $(this).find('.table-fixed').append($thead);
                //为克隆的checkbox绑定事件
                $thead.on('click','.checkAll',function(){
                    $("#grid").find('.checkAll').trigger("click");
                })
            }else{
                //就设置top值
                el.css("top",$(this)[0].scrollTop+"px");
                if(parseFloat(el.css("top"))==0){
                    el.remove();//这个必须要删除不能隐藏否则会导致复制出来的全选问题
                }
            }
        })

　　

完整页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>账单管理</title>
    <link href="../lib/ligerUI/skins/Green/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="css/main.css" rel="stylesheet"/>
    <link href="css/table.css" rel="stylesheet"/>
    <script src="../lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
    <script src="../lib/My97DatePicker/WdatePicker.js"  type="text/javascript"></script>
    <script src="../js/laypage/laypage.js" type="text/javascript"></script>
    <script src="js/public.js"></script>
    <script src="js/pubScroll.js" type="text/javascript"></script>
    <style>
        .conTbl th{min- 100px;}
        a{
            cursor: pointer;
            color:blue;
        }
        #tbl{
            1405px;
            height:624px;
            overflow: auto;
        }
        .conTbl th,.conTbl td{white-space: nowrap}
        .conTbl th:nth-child(2){
            min-30px;
        }
    </style>
</head>
<body>
<table class="banner">
    <tr>
        <td>开始日期：</td><td class="padr20"><input type="text" id="fromDate" class="Wdate item-text green-ipt" onfocus="WdatePicker({dateFmt:'yyyy-MM'})"></td>
        <td>结束日期：</td><td class="padr20"><input type="text" id="toDate" class="Wdate item-text green-ipt" onfocus="WdatePicker({dateFmt:'yyyy-MM'})"></td>
        <td>所在区域：</td><td class="padr20"><input type="text" id="area"></td>
        <td>是否收费：</td><td class="padr20"><input type="text" id="isfree"></td>
        <!-- <td>系统类型：</td><td class="padr20"><input type="text" id="system"></td> -->
        <td><input type="text" class="green-ipt" id="searchVal" placeholder="输入用户名字搜索">&nbsp;</td><td><button class="green-btn" id="search">搜索</button></td>
    </tr>
</table>
<div class="btns"><button id="export" class="green-btn">导出已勾选</button></div>
<div id="tbl" class="scroll-tabel" style="position:relative">
    <table id="grid" class='conTbl' style="font-size: 13px;table-layout:fixed"></table>
</div>
<div id="page"></div>
<div id="no">暂无数据</div>
<script type="text/javascript">
    var g,freeData;
    var pageNo = 1;
    var pageSize = 100;
    var win1;
    var idOjbBuc={},idObj={};
    var idArr=[];
    $(function (){
        initLoad();
        initEvent();
        scrollEvent();
    });
    function scrollEvent(){
        $(".scroll-tabel").on('scroll',function(){
            //判断是否有表头table在
            var el=$(this).find('.table-fixed');
            if(!el[0]){
                $(this).append("<table class='table-fixed conTbl' style='position:absolute;top:0;font-size:13px;table-layout:fixed;'></table>");
                //在原始表格找找到表头项进行克隆
                var $thead=$("#tbl").find('tr.tbl-header').clone(true);
                var older=$(this).find(".tbl-header").children();
                //设置固定表头的宽度
                $thead.children().each(function(idx,ele){
                    $(ele).css("width",older.eq(idx).css("width"));
                    $(ele).css("height",older.eq(idx).css("height"));
                })
                $(this).find('.table-fixed').append($thead);
                //为克隆的checkbox绑定事件
                $thead.on('click','.checkAll',function(){
                    $("#grid").find('.checkAll').trigger("click");
                })
            }else{
                //就设置top值
                el.css("top",$(this)[0].scrollTop+"px");
                if(parseFloat(el.css("top"))==0){
                    el.remove();//这个必须要删除不能隐藏否则会导致复制出来的全选问题
                }
            }
        })
    }
    function initEvent(){
        //搜索
        $("#search").click(function(){
            searchCilck();
        });
        //导出
        $("#export").click(function(){
            if(idArr==undefined||idArr.length==0){
                $.ligerDialog.warn("没有选择账单，请选择账单！");
                return;
            }
            var str=idArr.join(";");
            window.location.href =  '../exportexcel_exportBathBillMs?ids='+str;
        })
        //设置全选
        $("#grid").on("click",'.checkAll',function(){
            var me=this;
            $("#grid tr+>td").find("input[type=checkbox]").each(function(i,e){
                var id=$(e).attr("data-id")
                if(me.checked){
                    //判断之前是否选中
                    if(idArr.indexOf(id)==-1){
                        $(e).prop("checked", true);  
                        $(e).parent().parent().css("background-color","rgb(220, 248, 168)")
                        //将idObj中的添加属性
                        idArr.push(id)
                    }
                }else{
                    $(e).prop("checked", false); 
                    //在数组中找到
                    idArr.splice(idArr.indexOf(id),1);
                    $(e).parent().parent().css("background-color","")
                }
            })
        })
        //每一个checkBox的点击事件
        $("#grid").on("click",'input[type=checkbox]:not(.checkAll)',function(e){
            e.stopPropagation();//此处很重要，否则会冒泡触发其他事件
            var id=$(this).attr("data-id")
            if(this.checked){
                //判断是否已经选中过
                if(idArr.indexOf(id)==-1){
                    idArr.push(id);
                    $(this).parent().parent().css("background-color","rgb(220, 248, 168)")
                }
            }else{
                idArr.splice(idArr.indexOf(id),1);
                $(this).parent().parent().css("background-color","")
            }
            opCheckArr();//判断全选的checkbox是否需要勾选上
        })
        //为了用户更好的体验在tr上面也绑定事件
        $("#grid").on("click",'tr:not(.tbl-header)',function(){
            var id=$(this).attr("data-id");
            var $chk=$(this).find("input[type=checkbox]");
            //如果是勾选的那么久取消勾选，反之
            if($chk[0].checked){
                $chk.prop("checked", false); 
                $(this).css("background-color","");
                   idArr.splice(idArr.indexOf(id),1);
            }else{
                //判断是否之前有选中过,如果选中了就不在执行
                if(idArr.indexOf(id)==-1){
                    //将行中的checkbox选中
                    $chk.prop("checked", true);  
                    idArr.push(id);
                    $(this).css("background-color","rgb(220, 248, 168)")
                }
            }
        }) 
        //为了阻止a标记的事件冒泡,否则会冒泡到tr上面
        $("#grid").on("click",'td:last-child',function(){
            return false;
        }) 
    }
    /*
     *检查操作全选的checkbox
     */
    function opCheckArr(){
        if(idArr.length==pageSize){
            $("#grid").find('.checkAll').prop("checked",true);
            $('.table-fixed').find('.checkAll').prop("checked",true);//克隆的checkbox也需要勾选上
        }else{
            $('#grid').find('.checkAll').prop("checked",false);
            $('.table-fixed').find('.checkAll').prop("checked",false);//克隆的checkbox也需要取消勾选
        }
    }
    function  initLoad() {
        //转化日期比当前小一个月
        var yearM = getPrevMonth();
        $("#fromDate").val(yearM);
        $("#toDate").val(new Date().Format("yyyy-MM"));
        $.when(getAreaData(),getDBSourcesList()).done(function(data,data1) {
            //初始化所在区域
            $("#area").ligerComboBox({
                selectBoxHeight: 200,
                tree:{
                    idFieldName: 'treeCode',
                    parentIDFieldName: 'treePCode',
                    textFieldName :'name',
                    checkbox: false,
                    data: data
                },
                onSelected: function (id) {
                    $("#area").data("data-id", id);
                }
            })
            yearM = yearM.replace('-','');
            queryData();
           //startQueryData('','','',yearM,yearM,data1[0].id,pageNo,pageSize,1); //1代表查询全部  2查询差额
        })
        freeData =  [
            { text: '是', id: '0' },
            { text: '否', id: '1' }
        ];
        $("#isfree").ligerComboBox({
            data: freeData,
            onSelected: function (id) {
                $("#isfree").data("data-id", id);
            }
        })
    }
    function startQueryData(userName,org_code,isNo,fromYearMonth,toYearMonth,system,pageNo,pageSize,flag){
        if((parseInt(toYearMonth.substring(0,4),10)*12+parseInt(toYearMonth.substring(4),10))-(parseInt(fromYearMonth.substring(0,4),10)*12+parseInt(fromYearMonth.substring(4),10))>2){
            $.ligerDialog.warn("查询日期范围不能超过三个月");
            return;
        }else{
           $.ligerDialog.waitting('正在统计收费情况,请耐心等候(<span>30</span>)...');
            window.timer=setInterval(function(){
                if($(".l-dialog-content-noimage").length>0){
                    var time=parseInt($(".l-dialog-content-noimage").find("span").html(),10);
                    if(time==0){
                        $.ligerDialog.confirm('统计时间过长，是否继续等待？', function (yes) {
                            if(yes){
                                $(".l-dialog-content-noimage").find("span").html(30);
                            } else{
                                clearInterval(window.timer);
                                $.ligerDialog.closeWaitting();//关闭等待窗口
                            }
                        });
                    }else{
                        time--;
                        $(".l-dialog-content-noimage").find("span").html(time);
                    }
                }else{
                    window.console.log("clearInterval(window.timer)");
                    clearInterval(window.timer);
                }
            },1000)
            $("#grid").empty();
            queryData(userName,org_code,isNo,fromYearMonth,toYearMonth,system,pageNo,pageSize,flag);
        }
    }
    /*
     *查询数据
     */
    function queryData(){ 
        $.ajax({
            url : "ChargeMs_queryChargeMsManage",
            dataType : "json",
            data : getParam(),
            success : function(data) {
                var result = data.result;
                $("#no").hide();
                var pages = Math.ceil(data.sumNo/pageSize);
                laypage({
                    cont: 'page',
                    pages: pages, //可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18
                    skip: true,
                    skin: 'molv', //皮肤
                    first: '首页', //将首页显示为数字1,。若不显示，设置false即可
                    last: '尾页', //将尾页显示为总页数。若不显示，设置false即可
                    groups: 3,
                    curr: 1,
                    jump: function(e, first) { //触发分页后的回调
                        if (!first) { //一定要加此判断，否则初始时会无限刷新
                            getPageData(e.curr);
                        }
                    }
                });
                buildHtml(result);
            }
        })
    }
    /*
     *分页调用
     */
    function getPageData(_pageNo){
        var param=getParam();
        param.pageNo=_pageNo;
        $.ajax({
            url: "ChargeMs_queryChargeMsManage",
            dataType: "json",
            data:param,
            success: function (data) {
                buildHtml(data.result);
            }
        })
    }
    /*
    *构建表格
    */
    function buildHtml(result){
        idArr=[];//如果不需要翻页勾选，将此处去掉
        var $grid = $("#grid");
        var checkCount=0;//记录一页中勾选的个数
        idOjbBuc={};
        $grid.empty();
        var title = "<tr class='tbl-header'><th></th><th><input type='checkbox' class='checkAll'/></th><th>用户编号</th><th>用户名称</th><th>区域</th><th>账单年月</th><th>上次结余(元)</th><th>本月费用(元)</th><th>本月应交</th> <th>是否交费</th>" +
                "<th>操作</th></tr>";
        $grid.append(title);
        if(result.length>0){
            queryLog('ChargeMs_queryChargeMsManage');
            for(var i=0;i<result.length;i++){
                var id=result[i].id+"";
                idOjbBuc[result[i].id]=result[i];
                var detail = "<a onclick=openWindow('bill/BillDetailBY.html?type=charge&month="+result[i].month+"&userNo="+result[i].userNo+"&dbsources="+result[i].systemType+"') >账单</a>";
                var month = result[i].month+'';
                var lastLeft = !!result[i].lastLeft?result[i].lastLeft.toFixed(2):0.00;
                var monthPay = !!result[i].monthPay?result[i].monthPay.toFixed(2):0.00;
                var needPay = !!result[i].needPay?result[i].needPay.toFixed(2):0.00;
                var yearMonth = month.substring(0,4)+'-'+month.substring(4);
                var str= $("<tr id='"+result[i].userNo+"' data-id='"+result[i].id+"'>"+
                            "<td>"+(i+1)+"</td>"+
                            "<td><input type='checkbox' data-id='"+result[i].id+"'/></td>"+
                            "<td>"+result[i].userNo+"</td>"+
                            "<td>"+result[i].userName+"</td><td>"+result[i].org_codeName+"</td>"+
                            "<td>"+yearMonth+"</td><td>"+lastLeft+"</td>" +
                            "<td>"+result[i].monthPay+"</td><td>"+needPay+"</td>"+
                            "<td>"+result[i].isPay+"</td><td>"+detail+"</td>"+
                        "</tr>");
                //判断是否需要初始化勾选
                if(idArr.indexOf(id)>-1){
                   str.find("input[type=checkbox]").prop("checked",true);
                   checkCount++;
                }
                $grid.append(str);
            }
        }else{
           $grid.append("<tr><td colspan='8'>暂无数据</td></tr>");
        }
        //判断一页中全选的是否需要勾上
        if(checkCount===pageSize){
            $grid.find('.checkAll').prop("checked",true);
            $('.table-fixed').find('.checkAll').prop("checked",true);//克隆的checkbox也需要勾选上
        }
    }
    function searchCilck(){
        var userName = $('#searchVal').val();
        var org_code = $("#area").data("data-id") || '';
        var isNo = $("#isfree").data("data-id") || '';
        var fromYearMonth = $("#fromDate").val().replace('-',''); //查询上一个月的
        var toYearMonth = $("#toDate").val().replace('-',''); //查询上一个月的
        var system = $("#system").data("data-id");
        if($('#area').val() == '') org_code = '';
        if($('#isfree').val() == '') isNo = '';
        if($('#system').val() == '') system = '';
         //queryData(userName,yearMonth,system,isNo,pageNo,pageSize);
        queryData(userName,org_code,isNo,fromYearMonth,toYearMonth,system,pageNo,pageSize)
    }
    /**
     *弹出小窗口显示
     */
     function openWindow(url){
         if (win1) win1.close(); 
         win1 = $.ligerDialog.open({ height: $(window).height(), url: url,  $(window).width()-100 });
     }
    /**
     *获取查询的条件
     */
    function getParam(){
        var obj={};
        obj.startDate=$("#fromDate").val().replace(/-/g,"");//开始时间
        obj.endDate=$("#toDate").val().replace(/-/g,"");//结束时间
        obj.org_code=$("#area").data("data-id") || '';//所在区域
        if($("#area").val() == "")  obj.org_code = '';
        obj.isNo=$("#isfree").data("data-id") || '';//是否收费
        if($("#isfree").val() == "") obj.isNo = '';
        obj.userName=$('#searchVal').val();//搜索用户名
        obj.dbsources='BaseDao';
        obj.pageNo=pageNo;
        obj.pageSize=pageSize;
        return obj;
    }
</script>

</body>
</html>