需求:
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();//这个必须要删除不能隐藏否则会导致复制出来的全选问题 } } })
完整页面代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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="输入用户名字搜索"> </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>