1.js对象的使用
1 var fundReconciliation = {} 2 3 fundReconciliation.init = function () { 4 } 5 6 fundReconciliation.init.prototype = { 7 initBusinessTable: function () { 8 $.ajax({ 9 url: "/admin-web/fundReconciliation/businessInfo", 10 type: "post", 11 data: { 12 "accountStatus": $("#status").val(), 13 "invoiceTitle": $("#invoiceTitle").val(), 14 "billsNo": $("#billsNo").val(), 15 "souceCode": $("#souceCode").val(), 16 "postDateStartTime": $("#startTime").val(), 17 "postDateEndTime": $("#endTime").val(), 18 "sourceNoteCode": $("#sourceNoteCode").val() 19 }, 20 success: function (data) { 21 22 }, 23 error: function () { 24 25 } 26 }) 27 } 28 } 29 $(function () { 30 var obj = new fundReconciliation.init(); 31 obj.initBusinessTable(); 32 })
2.给表格添加滚轮加载数据
html代码：
注意：表格的外层需要加一个div包裹才能添加滚轮
1 <div style="height: 530px; overflow-y: scroll;overflow-x: hidden;" id="businessTableScroll"> 2 <table style="text-align: center; 100%;" class="table table-bordered table-striped"> 3 <colgroup> 4 <col width="2%"> 5 <col width="8%"> 6 <col width="18%"> 7 <col width="20%"> 8 <col width="13%"> 9 <col width="10%"> 10 <col width="17%"> 11 <col width="14%"> 12 </colgroup> 13 <thead> 14 <tr> 15 <th style="text-align: center;"><input type="checkbox" id="businessCheckAll" class="checkall" /></th> 16 <th style="text-align: center;">序号</th> 17 <th style="text-align: center;">发票抬头</th> 18 <th style="text-align: center;">报销单号</th> 19 <th style="text-align: center;">单号</th> 20 <th style="text-align: center;">结算金额</th> 21 <th style="text-align: center;">支付时间</th> 22 <th style="text-align: center;">状态</th> 23 </tr> 24 </thead> 25 <tbody> 26 27 </tbody> 28 </table> 29 </div>
js代码:
1 $('#businessTableScroll').scroll(function () { 2 //滚动条位置 3 var scrollTop = $('#businessTableScroll').scrollTop(); 4 //可视窗口的高度 5 var viewportHeight = $('#businessTableScroll').height(); 6 //整个页面可以滚动的高度 7 var scrollHeight = $('#businessTableScroll')[0].scrollHeight; 8 /* $("span").text("滚动条位置"+ scrollTop+ "可视窗口的高度"+ viewportHeight + "整个页面可以滚动的高度" +scrollHeight);*/ 9 if (Math.round(scrollTop + viewportHeight) == scrollHeight) { 10 //获取下一页的数据 11 var pageNo = businessPageNo + 1; 12 new fundReconciliation.init().scrollLoadBusinessTable(pageNo) 13 } 14 });
3.复选框
html代码：
全选复选框：<input type="checkbox" id="businessCheckAll" class="checkall" />
子复选框：<input type="checkbox" name="businessSubBox" class="checkchild" />
js代码：
1.点击全选复选框时，所有的子复选框也被选中
checkAll: function () { $("#checkAll").click(function () { $('input[name="childCheckBox"]').prop("checked", this.checked); }); },
2.子复选框全部被选中后，把全选复选框选中
childCheck: function () { $("input[name='childCheckBox']").click(function () { $("#checkAll").prop("checked", $("input[name='childCheckBox']").length == $("input[name='childCheckBox']:checked").length ? true : false); $("#checkAllList").prop("checked", $("input[name='childCheckBox']").length == $("input[name='childCheckBox']:checked").length ? true : false); }); },
3.判断复选框是否选中
var businessBox = $("input[name='businessSubBox']"); var businessCheck = false; for (var i = 0; i < businessBox.length; i++) { if (businessBox[i].checked) { businessCheck = true; break; } }
4.翻页时如果全选复选框被选中，则子复选框也选中
checkAllListTochildCheckBoxCheck :function () { if ($("#checkAllList").is(':checked')) { $("#checkAll").prop("checked", true); $('input[name="childCheckBox"]').prop("checked", true); } $("#checkAll").prop("checked", $("input[name='childCheckBox']").length == $("input[name='childCheckBox']:checked").length ? true : false); }
5.获取多个复选框的值
html代码：
<div class="form-group" id="checkStatus" style="margin-left: 20px;margin-top: 20px;"> <label>状态:</label> <input type="checkbox" name="state" checked="checked" value="2"/>需要处理 <input type="checkbox" name="state" checked="checked" value="0"/>未匹配 <input type="checkbox" name="state" value="1"/>已确认 <input type="checkbox" name="state" value="3"/>已收账 <input type="hidden" name="accountStatus" id="status" value="'2','0'"/> </div>
js代码：
changeStatus: function () {
//处理查询条件状态
var chk_value = [];
var obj = document.getElementsByName("state"); //选择所有name="state"的对象,返回数组
//取到对象数组后，循环检测它是不是被选中
var s = "";
for (var i = 0; i < obj.length; i++) {
if (obj[i].checked) {
s += "'" + obj[i].value + "'," //如果选中，将value添加到变量value中
}
}
s = s.substr(0, s.length - 1);
$("#status").val(s);
}
4.时间格式化处理
1 /**************************************时间格式化处理************************************/ 2 dateFtt: function (fmt, date) { 3 var o = { 4 "M+": date.getMonth() + 1, //月份 5 "d+": date.getDate(), //日 6 "h+": date.getHours(), //小时 7 "m+": date.getMinutes(), //分 8 "s+": date.getSeconds(), //秒 9 "q+": Math.floor((date.getMonth() + 3) / 3), //季度 10 "S": date.getMilliseconds() //毫秒 11 }; 12 if (/(y+)/.test(fmt)) 13 fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); 14 for (var k in o) 15 if (new RegExp("(" + k + ")").test(fmt)) 16 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); 17 return fmt; 18 },
5.获取当前月的第一天
getCurrentMonthFirst: function () {
var date = new Date();
date.setDate(1);
return date;
}
6.获取当前月的最后一天
getCurrentMonthLast: function () {
var date = new Date();
var currentMonth = date.getMonth();
var nextMonth = ++currentMonth;
var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
var oneDay = 1000 * 60 * 60 * 24;
return new Date(nextMonthFirstDay - oneDay);
}
7.日期默认值
fundReconciliationTime: function () {
var thisMonthFirstTd = new fundReconciliation.init().dateFtt("yyyy-MM-dd", new fundReconciliation.init().getCurrentMonthFirst());
var thisMonthEndTd = new fundReconciliation.init().dateFtt("yyyy-MM-dd", new fundReconciliation.init().getCurrentMonthLast());
$("#startTime").val(thisMonthFirstTd);
$("#endTime").val(thisMonthEndTd);
},
8.判断两个日期的大小
//判断两个日期的大小
judgeDate: function (date1, date2) {
var oDate1 = new Date(date1);
var oDate2 = new Date(date2);
if (oDate1.getTime() >= oDate2.getTime()) {
return true;
} else {
return false;
}
},
search: function () {
var orderStartTime = $("#startTime").val().trim();
var orderEndTime = $("#endTime").val().trim();
if ((orderStartTime == "" && orderEndTime != "") || (orderStartTime != "" && orderEndTime == "" || (orderStartTime == "" && orderEndTime == ""))) {
window.wxc.xcConfirm("日期不能为空", "newCustom");
} else if ((orderStartTime != "" && orderEndTime != "")) {
var flag2 = new fundReconciliation.init().judgeDate(orderEndTime, orderStartTime);
if (flag2) {
new fundReconciliation.init().changeStatus();
new fundReconciliation.init().initFinancialTable();
new fundReconciliation.init().initBusinessTable();
} else {
window.wxc.xcConfirm("开始日期不能大于结束日期", "newCustom");
}
}
},
9.获取表格单元格的值
html代码：
1 <div style="height: 530px; overflow-y: scroll;overflow-x: hidden;" id="businessTableScroll"> 2 <table style="text-align: center; 100%;" class="table table-bordered table-striped"> 3 <colgroup> 4 <col width="2%"> 5 <col width="8%"> 6 <col width="18%"> 7 <col width="20%"> 8 <col width="13%"> 9 <col width="10%"> 10 <col width="17%"> 11 <col width="14%"> 12 </colgroup> 13 <thead> 14 <tr> 15 <th style="text-align: center;"><input type="checkbox" id="businessCheckAll" class="checkall" /></th> 16 <th style="text-align: center;">序号</th> 17 <th style="text-align: center;">发票抬头</th> 18 <th style="text-align: center;">报销单号</th> 19 <th style="text-align: center;">单号</th> 20 <th style="text-align: center;">结算金额</th> 21 <th style="text-align: center;">支付时间</th> 22 <th style="text-align: center;">状态</th> 23 </tr> 24 </thead> 25 <tbody> 26 <tr> 27 <td><input type="checkbox" name="businessSubBox" class="checkchild"></td> 28 <td>1</td> 29 <td>aaaa</td> 30 <td>aasa</td> 31 <td><a href="/admin-web/order/orderDetail?orderNo=1120181000018606">1120181000018606</a></td> 32 <td>981.00</td> 33 <td></td> 34 <td>未匹配</td> 35 </tr> 36 <tr> 37 <td><input type="checkbox" name="businessSubBox" class="checkchild"></td> 38 <td>1</td> 39 <td>aaaa</td> 40 <td>aasa</td> 41 <td><a href="/admin-web/order/orderDetail?orderNo=1120181000018606">1120181000018606</a></td> 42 <td>981.00</td> 43 <td></td> 44 <td>未匹配</td> 45 </tr> 46 </tbody> 47 </table> 48 </div>
js代码：
1 businessCheck: function () { 2 var businessBox = $("input[name='businessSubBox']"); 3 var businessCheck = 0; 4 var businessTotalMoney = 0.00; 5 var busOrderNos = ""; 6 var busStatus = ""; 7 var businessList = new Array(); 8 for (var i = 0; i < businessBox.length; i++) { 9 if (businessBox[i].checked) { 10 businessCheck++; 11 var business = {}; 12 var tddata = businessBox[i].parentNode.parentNode; 13 businessTotalMoney += parseFloat($(tddata).find("td:nth-child(6)").text()); 14 busOrderNos += $(tddata).find("td:nth-child(5)").text() + ","; 15 busStatus += $(tddata).find("td:nth-child(8)").text() + ","; 16 business.reportNo = $(tddata).find("td:nth-child(4)").text(); 17 business.billsNo = $(tddata).find("td:nth-child(5)").text(); 18 business.orderAmount = $(tddata).find("td:nth-child(6)").text(); 19 businessList.push(business); 20 } 21 } 22 $("#busOrderNos").val(busOrderNos.substr(0, busOrderNos.length - 1)); 23 $("#busStatus").val(busStatus.substr(0, busStatus.length - 1)); 24 $("#businessTotalNum").text(businessCheck); 25 $("#businessTotalMoney").text(number_format(businessTotalMoney, 2, ".", ",")); 26 },
10.对金额格式化处理
1 function number_format(number, decimals, dec_point, thousands_sep) { 2 /* 3 * 参数说明： 4 * number：要格式化的数字 5 * decimals：保留几位小数 6 * dec_point：小数点符号 7 * thousands_sep：千分位符号 8 * */ 9 number = (number + '').replace(/[^0-9+-Ee.]/g, ''); 10 var n = !isFinite(+number) ? 0 : +number, 11 12 prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), 13 sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, 14 dec = (typeof dec_point === 'undefined') ? '.' : dec_point, 15 s = '', 16 toFixedFix = function (n, prec) { 17 var k = Math.pow(10, prec); 18 return '' + Math.floor(n * k) / k; 19 }; 20 s = (prec ? toFixedFix(n, prec) : '' + Math.floor(n)).split('.'); 21 var re = /(-?d+)(d{3})/; 22 console.log(s) 23 while (re.test(s[0])) { 24 s[0] = s[0].replace(re, "$1" + sep + "$2"); 25 } 26 27 if ((s[1] || '').length < prec) { 28 s[1] = s[1] || ''; 29 s[1] += new Array(prec - s[1].length + 1).join('0'); 30 } 31 return s.join(dec); 32 }