新人--使用layui做的表格，复杂表头，固定列，操作单元格数据计算，点击查询重载表格,可以选择部分或者全部导出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>总合计</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/AdminLTE.min.css"/>
<!--<link rel="stylesheet" href="/layui/css/layui.css"/>-->
<link rel="stylesheet" href="/css/skin-blue.min.css"/>
<link rel="stylesheet" href="/css/font-awesome.css"/>
<link rel="stylesheet" href="/js/pilotShop/searchOfficial/css/layui.css"/> <script src="/js/vue.min.js"></script>
<style> .box-headerDis {
display: inline-block;
width: 250px;
} .box-headerDis .totalPayment-title {
font-size: 18px;
} .disFlex {
display: flex;
justify-content: flex-start;
align-items: center;
} .totalPayment-money {
font-size: 18px;
margin: 10px;
} .layui-table-cell { line-height: 23px;
padding: 0px;
position: relative;
overflow: visible;
text-overflow: clip;
white-space: normal;
box-sizing: border-box;
text-align: center;
} .layui-table thead .hei231 th {
height: 231px !important;
} .layui-table-box .layui-table-header .layui-table th {
height: 70px !important;
font-size: 11px;
} .layui-table-fixed .layui-table-header .layui-table th {
height: 140px !important;
font-size: 11px;
}
</style>
</head> <body>
<div class="businessOverview" id="businessOverview"> <div class="box-header">
<h3 class="box-title">总统计记录</h3>
</div>
<div class="box-tools" style=" left: 128px;">
<div class="disFlex ">
<div class="input-group input-group-sm" style="padding: 7px;width: 150px;">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input autocomplete="off" placeholder="选择时间" style=" width: 204px;" type="text" class="layui-input"
id="jt_date"/>
</div>
<div class="demoTable">
投资方
<div class="layui-inline">
<input autocomplete="off" type="text" placeholder="输入资方名称" v-model="investorName"
class="form-control"/>
</div>
</div>
<div class="demoTable" style="padding-left: 5px;">
公司名称
<div class="layui-inline">
<input autocomplete="off" type="text" placeholder="输入公司名称" v-model="companyName"
class="form-control"/>
</div>
</div>
<div class="demoTable">
<button class="layui-btn" data-type="reload" v-on:click="SearchInDetail()">搜索</button>
</div> </div>
<!--<button class="" id="btnExport">导出明细</button>-->
</div> <table id="demo" lay-filter="test"></table> </div>
<!--公司ID-->
<script type="text/html" id="companyId">
<a class="layui-table-link" style="font-size: 10px" target="_blank">{{ d.companyId }}</a>
</script>
<!--公司名称-->
<script type="text/html" id="usernameTpl">
{{# if(d.type === 2){ }}
<a class="layui-table-link" style="font-size: 10px" target="_blank">{{ d.companyName }}</a>
{{# } else { }}
<a style="font-size: 10px" target="_blank" >{{ d.companyName }}</a>
{{# } }}
<!--<a href="/thePointsRecord.html?companyId={{d.companyId}}" class="layui-table-link" style="font-size: 10px" target="_blank">{{ d.companyName }}</a>-->
</script>
<!--操作-->
<script type="text/html" id="TheOperatingSubsidiary">
{{# if(d.type === 2){ }} {{# } else { }}
<a target="_blank"><button class="layui-btn" style="height: 30px;line-height: 30px;">明细</button></a>
{{# } }}
</script>
<!--资方利润-->
<script type="text/html" id="ProfitManagement"> {{# if(d.ProfitManagement === "NaN"){ }}
<a target="_blank">{{ 0.00 }}</a>
{{# } else { }}
<a target="_blank">{{ d.ProfitManagement }}</a>
{{# } }}
</script>
<!--资方利润 GenerationOfOperating-->
<script type="text/html" id="GenerationOfOperating"> {{# if(d.totalBusinessPrincipalShow === "0.00"){ }}
<a target="_blank">{{ 0.00 }}</a>
{{# } else { }}
<a target="_blank">{{ d.GenerationOfOperating }}</a>
{{# } }}
</script> <!-- jQuery 3 -->
<script src="/js/jquery.min.js"></script>
<!--<script src="/layui/layui.js"></script>-->
<script src="/js/pilotShop/searchOfficial/layui.js"></script>
<script src="/js/jquery.table2excel.min.js"></script>
<script src="/js/adminlte.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/js/bootstrap.min.js"></script>
<script th:inline="javascript">
new Vue({
el: "#businessOverview",
data: {
TotalConsumptionList: [],
companyName: "",
beginDate: "",
endDate: "",
investorName: "" },
filters: {},
// 数据初始化
mounted: function () {
var this_ = this;
this.TotalConsumption()
layui.use('laydate', function () {
var laydate = layui.laydate;
laydate.render({
elem: '#jt_date',//指定元素;
type: 'date',
theme: '3c8dbc',
range: '~',
max: new Date().valueOf(),
done: function (value, date, endDate) {
value = value.split('~');
this_.beginDate = value[0];
this_.endDate = value[1];
if (value == "") {
this_.beginDate = "";
this_.endDate = "";
} else {
this_.beginDate = value[0].replace(/(^\s+)|(\s+$)/g, "");
this_.endDate = value[1].replace(/(^\s+)|(\s+$)/g, "");
}
}
}); });
layui.use('table', function () {
var table = layui.table;
// table.exportFile(table.data, data); //data 为该实例中的任意数量的数据
table.render({
elem: '#demo'
, url: '/v1/wx/cs/searchcity/investment/report/company/data/details'
// ,where: {companyName:this_.companyName}
, contentType: 'application/json'
, method: 'POST'
, toolbar: '#toolbarDemo'
, title: '用户数据表'
, height: 715 //容器高度
, page: true //是否显示分页
// , limit: 10 //每页默认显示的数量
, done: function (res, curr, count) {
// console.log(res)
}
, request: {
pageName: 'pageNum' //页码的参数名称，默认：page
, limitName: 'limitNum' //每页数据量的参数名，默认：limit
}
, parseData: function (res) { //res 即为原始返回的数据
res.code = 1;
// res = JSON.stringify(res);
console.log(res)
var resultData = res.data.resultData;
for (var i in resultData) {
// 营业额
resultData[i].turnoverShow = (resultData[i].turnover / 100).toFixed(2);
// 普通会员
resultData[i].totalVipRealPriceShow = (resultData[i].totalVipRealPrice / 100).toFixed(2); // PLUS会员
resultData[i].totalPlusRealPriceShow = (resultData[i].totalPlusRealPrice / 100).toFixed(2);
// 成本 投资合同签约成本（总营业额*合同售卖折扣）
resultData[i].totalContractPrincipalShow = (resultData[i].totalContractPrincipal / 100).toFixed(2);
//成本 官方代运营签约成本（总营业额*代运营折扣）
resultData[i].totalBusinessPrincipalShow = (resultData[i].totalBusinessPrincipal / 100).toFixed(2); // 手续费
resultData[i].wxTotalPayPricePoundage = ((resultData[i].wxTotalPayPrice / 100) * 0.006).toFixed(2);
//业务员的收益
resultData[i].totalSalesmanEarnings = ((resultData[i].totalSalesmanEarningsO / 100) + (resultData[i].totalSalesmanEarningsI / 100)).toFixed(2);
//店长的收益
resultData[i].totalShopManagerEarnings = ((resultData[i].totalShopManagerEarningsO / 100) + (resultData[i].totalShopManagerEarningsI / 100)).toFixed(2);
//收银的收益
resultData[i].totalCashierEarnings = ((resultData[i].totalCashierEarningsO / 100) + (resultData[i].totalCashierEarningsI / 100)).toFixed(2); //实入账 投资合同（营业额*合同购买额度*0.994）
resultData[i].totalContractRealPrice = (resultData[i].totalContractRealPrice / 100).toFixed(2);
//实入账 官方代运营（订单总支付金额*0.994）
resultData[i].RealAccountOfAgentOperation = ((resultData[i].wxTotalPayPrice / 100) * 0.994).toFixed(2); // 总收益（实入账-成本） 投资合同总收益
resultData[i].SmallCapitalCardTotalIncome = (resultData[i].totalContractRealPrice - resultData[i].totalContractPrincipalShow).toFixed(2); // 总收益（实入账-成本） 代运营
resultData[i].GenerationOfOperating = (resultData[i].totalContractPrincipal / 100 - (resultData[i].totalBusinessPrincipal / 100)).toFixed(2);
//总收益（实入账-成本） 官方实际收益
// resultData[i].RealIncome =(((resultData[i].totalVipRealPrice/100)+ (resultData[i].totalPlusRealPrice/100))*0.994- resultData[i].totalContractRealPrice+(resultData[i].totalContractPrincipal/100-(resultData[i].totalBusinessPrincipal/100))+(resultData[i].totalContractPrincipal/100)*(1-(resultData[i].investorProfitsProportion/100))).toFixed(2);
resultData[i].RealIncome = ((resultData[i].totalVipRealPrice/100 + resultData[i].totalPlusRealPrice/100) * 0.994- (resultData[i].totalContractRealPrice)+parseFloat(resultData[i].GenerationOfOperating)+(parseFloat(resultData[i].SmallCapitalCardTotalIncome)*(1 - (resultData[i].investorProfitsProportion / 100)))).toFixed(2); // 利润 资方 微信总支付金额*0.994-银联合同本金除2-资方付给店长等的部分利润
resultData[i].ProfitManagement = (((resultData[i].SmallCapitalCardTotalIncome)*(resultData[i].investorProfitsProportion / 100))-parseFloat(resultData[i].totalCashierEarningsI/100) - parseFloat(resultData[i].totalSalesmanEarningsI/100) - parseFloat(resultData[i].totalShopManagerEarningsI/100)).toFixed(2); // resultData[i].ProfitManagement = ( (resultData[i].totalContractRealPrice - resultData[i].totalContractPrincipalShow) / (resultData[i].investorProfitsProportion / 100) - (resultData[i].totalCashierEarningsI) - (resultData[i].totalSalesmanEarningsI) - (resultData[i].totalShopManagerEarningsI)).toFixed(2);
// 利润 官方
resultData[i].ProfitsTheOfficial = (resultData[i].RealIncome - parseFloat(resultData[i].totalCashierEarningsO/100) - parseFloat(resultData[i].totalSalesmanEarningsO/100) - parseFloat(resultData[i].totalShopManagerEarningsO/100)).toFixed(2);
// console.log(resultData[i].SmallCapitalCardTotalIncome+""+resultData[i].investorProfitsProportion+"-"+resultData[i].totalCashierEarningsI+"-"+resultData[i].totalSalesmanEarningsI+"-"+resultData[i].totalShopManagerEarningsI)
}
return {
"code": res.status, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.data.pageCount, //解析数据长度
"data": res.data.resultData //解析数据列表
};
}
, response: {
statusName: 'code' //规定数据状态的字段名称，默认：code
, statusCode: 200 //规定成功的状态码，默认：0
, msgName: 'message' //规定状态信息的字段名称，默认：msg
, countName: 'count' //规定数据总数的字段名称，默认：count
, dataName: 'data' //规定数据列表的字段名称，默认：data
}
, defaultToolbar: ['filter', 'print', 'exports']
, cols: [[
{type: 'checkbox', fixed: 'left', width: 37, rowspan: 2}
, {field: 'investorName', title: '投资方', fixed: 'left', width: 50, rowspan: 2}
, {
field: 'companyName',
event: 'setSign',
title: '公司名称',
fixed: 'left',
width: 200,
templet: '#usernameTpl',
rowspan: 2
}
, {field: 'turnoverShow', title: '总营业额', width: 120, rowspan: 2}
, {field: 'joinTime', title: '实际支付', colspan: 2}
, {field: 'zone', title: '成本', colspan: 2}
, {field: 'wxTotalPayPricePoundage', title: '手续费（实际支付额*006)', width: 150, rowspan: 2}
, {field: 'zone', title: '实入账', colspan: 2}
, {field: 'zone', title: '总收益（实入账-成本）', width: 80, colspan: 3}
, {field: 'email', title: '补贴', colspan: 3}
, {field: 'email', title: '利润', colspan: 2}
, {field: 'TheOperatingSubsidiary', title: '操作',event: 'setSignTwo', width: 80, rowspan: 2,templet:"#TheOperatingSubsidiary"}
// , {
// field: 'companyId',
// title: '跳页id',
// width: 50,
// templet: "#companyId",
// rowspan: 2,
// style: "display:none"
// }
// , {
// field: 'investmentBuyCreditLineProportion',
// title: '代运营签约折扣',
// width: 80,
// rowspan: 2,
// templet: "#investmentBuyCreditLineProportion",
// style: "display:none"
// }
], [
{field: 'totalVipRealPriceShow', title: '普通会员总入账', width: 120}
, {field: 'totalPlusRealPriceShow', title: 'PLUS会员总入账', width: 120} , {field: 'totalContractPrincipalShow', title: '投资合同签约成本（总营业额*合同售卖折扣）', width: 130}
, {field: 'totalBusinessPrincipalShow', title: '官方代运营签约成本（总营业额*代运营折扣）', width: 130}
, {field: 'totalContractRealPrice', title: '投资合同（营业额*合同签约售卖折扣*0.994）', width: 130}
, {field: 'RealAccountOfAgentOperation', title: '官方实际支付额（订单总支付金额*0.994）', width: 140} , {field: 'SmallCapitalCardTotalIncome', title: '投资合同总收益', width: 130}
, {field: 'GenerationOfOperating', title: '代运营', width: 130, templet: "#GenerationOfOperating"}
, {field: 'RealIncome', title: '官方实际收益', width: 130}
, {field: 'totalSalesmanEarnings', title: '业务（营业额*业务补贴折扣）', width: 130}
, {field: 'totalCashierEarnings', title: '收银（营业额*收银补贴折扣）', width: 130}
, {field: 'totalShopManagerEarnings', title: '店长（营业额*店长补贴折扣）', width: 130} , {field: 'ProfitManagement', title: '资方', width: 150, templet: "#ProfitManagement"}
, {field: 'ProfitsTheOfficial', title: '官方', width: 150}
]] });
//单机公司名称
table.on('tool(test)', function (obj) {
var data = obj.data;
if (obj.event === 'setSign') {
// console.log(obj.data.companyId)
if (obj.data.type==2){
localStorage.companyId = obj.data.companyId;//存值
window.location.href = "SearchCityBranchRecords.html?companyId=" + obj.data.companyId; //跳页
}
}
if (obj.event === 'setSignTwo') {
// console.log(obj.data.companyId)
localStorage.restaurantId = obj.data.restaurantId;//存值
window.location.href = "SearchCityCancelAfterVerificationDetails.html?restaurantId=" + obj.data.restaurantId; //跳页
}
});
//工具栏事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
console.log(obj)
switch (obj.event) {
case 'getCheckData':
var data = checkStatus.data;
console.log(checkStatus.data)
//layer.alert(JSON.stringify(data)); break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：' + data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选' : '未全选')
break;
}
});
});
},
computed: {
pages: function () {
var pag = [];
var current = this.current;
var showItem = this.showItem;
// console.log(current,showItem) //current当前页数 showItem显示条数
if (current >= showItem) { //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var middle = this.current - Math.floor(this.showItem / 2),//从哪里开始
i = this.showItem; if (middle > (this.allpage - this.showItem)) {
middle = (this.allpage - this.showItem) + 1
}
while (i--) {
pag.push(middle++);
}
} else { //当前页数大于显示页数了
var i = Math.min(this.showItem, this.allpage); //显示数据中低的那个
while (i) {
pag.unshift(i--);
}
}
// console.log(current,showItem)
return pag
}
},
methods: {
//单机查询
SearchInDetail: function () {
var this_ = this;
var table = layui.table;
layui.use('table', function () {
console.log(table)
table.reload('demo', {
where: {
companyName: this_.companyName,
beginDate: this_.beginDate,
endDate: this_.endDate,
investorName: this_.investorName,
}
, page: {
curr: 1 //重新从第 1 页开始
}
});
}) },
TotalConsumption: function () {
var this_ = this
$.ajax({
type: 'post',
contentType: 'application/json',
url: "/v1/wx/cs/searchcity/investment/report/all/data",
success: function (res) {
// console.log(res)
this_.TotalConsumptionList = res.data
},
error: function (res) {
alert("获取失败")
}
});
}
}
})
</script>
</body>
</html>
新人--使用layui做的表格，复杂表头，固定列，操作单元格数据计算，点击查询重载表格,可以选择部分或者全部导出的更多相关文章
- bootstrap-table固定表头固定列
1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <tabl ...
- CSS开发技巧(二）：表格合并边框后的单元格宽度计算
前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表 ...
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...
- vue中获取滚动table的可视页面宽度，调整表头与列对齐(每列宽度不都相同)
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...
- 浅谈js中如何动态添加表头/表列/表格内容
我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...
- vue表格实现固定表头首列
前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
- layui 数据表格+分页+搜索+checkbox+缓存选中项数据
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...
- vue中 表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...
随机推荐
- [python]win32api
安装完pywin32以后一定要重启啊!!!!!!!!!!!!
- POJ 1175
//本来写了个和1021相同的HASH,但没过,于是,抱着侥幸的心理,把它变成距离的四次方, //我就呵呵了... //这个题,完全靠概率.当然了,如果是把图翻转来比较,也是可以的.但好像很麻烦.. ...
- Android学习笔记(17):文本框TextView类
TextView继承自View.用于显示文本.它有很多的子类,掌握其属性是非常重要的. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5 ...
- 安卓欢迎界面和activity之间的跳转问题
使用安卓的UI界面,就不得不了解activity,由于actvity就像是一个form表单一样,全部的UI都呈如今这里,他能够承载全部的UI控件. INtent就是一个中继站一样.他负责组件之间的沟通 ...
- 【待解决】maven创建web项目报错
创建web项目时报错
- JAVA 几种多线程的简单实例 Thread Runnable
实例1: class Hello extends Thread{ private String name; public Hello(){} public Hello(String name){ th ...
- 在Android系统中添加宏控制代码【原创】
关键词:Android 宏控制 Androd.mk 平台信息:内核:linux3.4.39 系统:android/android5.1平台:S5P4418 作者:庄泽彬(欢迎转载,请注明作者) 邮 ...
- nyoj--239--月老的难题（最小点覆盖）
月老的难题 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 月老准备给n个女孩与n个男孩牵红线,成就一对对美好的姻缘. 现在,由于一些原因,部分男孩与女孩可能结成幸福的一 ...
- RabbitMQ消息队列服务
MQ 全称为 Message Queue, 消息队列( MQ ) 是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们. 一个软件它 ...
- JavaScript之BOM和DOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...