需求：
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="输入用户名字搜索"> </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>
