新人--使用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>
相關文章
- 1. Layui表格-複雜表頭
- 2. 【layui】數據表格 表格重載的使用
- 3. 固定頭部的表格
- 4. vue移動端複雜表格表頭，固定表頭與固定第一列
- 5. 複雜的POI導出Excel表格（多行表頭、合併單元格）
- 6. 使用LAYUI操作數據表格
- 7. 使用LayUI操作數據表格
- 8. 表格頭部固定(列定寬)
- 9. Javascript 固定表格表頭
- 10. Bsgrid表格表頭固定
- 更多相關文章...
- • jQuery Mobile 表格 - jQuery Mobile 教程
- • Markdown 表格 - Markdown 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Layui表格-複雜表頭
- 2. 【layui】數據表格 表格重載的使用
- 3. 固定頭部的表格
- 4. vue移動端複雜表格表頭，固定表頭與固定第一列
- 5. 複雜的POI導出Excel表格（多行表頭、合併單元格）
- 6. 使用LAYUI操作數據表格
- 7. 使用LayUI操作數據表格
- 8. 表格頭部固定(列定寬)
- 9. Javascript 固定表格表頭
- 10. Bsgrid表格表頭固定