由於需求需要,有些表單需要做彙總展示,相對於一般的表單都是針對單行記錄展示,所以做了一下彙總的展示效果
由於使用框架的問題,所以這裏使用jq開發,之後會相繼開發vue版本的列表
使用之前記得先應用 jq 包,不然無法使用
html部分
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/echart-min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="page-head ">
<div id="btn-group">
<button class="btn btn-primary" id="btn-print">
<span class="glyphicon glyphicon-print"></span> 打印
</button>
<button class="btn btn-success" id="btn-showtitle">
<span class="glyphicon glyphicon-eye-open"></span> 撤銷隱藏
<span class="badge">0</span>
</button>
</div>
<div>
<div class="input-box" id="queryCondition" contenteditable="true">查詢條件：</div>
</div>
</div>
<div class="unit" id="page-center">
<div class="common-head" id="c-head">
<span class="head-title" contenteditable="true"></span>
<div class="btns">
<span class="glyphicon glyphicon-eye-close hide-title"></span>
<span class="glyphicon glyphicon-chevron-up down-text"></span>
</div>
</div>
<div id="container">
<div class="content left-tab" id="content-view1">
<div>
<table class="table table-bordered table-condensed table-hover" id="tab1">
<thead>
<tr>
<th>類型</th>
</tr>
</thead>
<tbody id="typeSumNum">
</tbody>
<tfoot>
<tr>
<td style="font-size: 12px;">總計</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="content-view2">
<table class="table table-bordered table-condensed table-hover">
<thead>
<tr class="tableTitle">
</tr>
</thead>
<tbody class="tableBody">
</tbody>
</table>
</div>
</div>
<div class="unit" id="page-foot">
<div class="common-head">
<div class="btns">
<span class="glyphicon glyphicon-eye-close hide-title"></span>
<span class="glyphicon glyphicon-chevron-up down-text"></span>
<span class="glyphicon glyphicon-resize-vertical changeType"></span>
</div>
</div>
<div id="tab-chart">
<div id="chart">
<div class="chart-child" id="chart1"></div>
</div>
</div>
</div>
<div class="unit" id="page-customer">
<div class="common-head">
<div class="btns">
<span class="glyphicon glyphicon-eye-close hide-title"></span>
<span class="glyphicon glyphicon-chevron-up down-text"></span>
</div>
</div>
<div id="description">
<div class="input-box" id="detail-1" contenteditable="true"></div>
<div id="detail-length-tip">0</div>
</div>
</div>
<div class="indicator" id="x-indicator"></div>
<div class="indicator" id="y-indicator"></div>
<div class="indicator" id="xaxis-rule-indicator"></div>
<div class="indicator" id="pie-rule-indicator"></div>
<div id="tip-board">
<label>值：<span id="cell-v"></span></label>
</div>
</div>
<script src="./js/dat.gui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/pageController.js"></script>
</body>
</html>
這裏的代碼附加了一些圖標的其他的展示代碼,若不需要刪除便可
js調用的時候使用的是調用id或者class,改變對應的名稱即可
js部分
$(function() {
/**
* typeNum 爲當前表單的數據每種類型的數量,name指定每種類型的名稱,count指定每種類型的個數
* 列表的每種類型的最後一行表示小計
*
* */
var rates = [ '消費類別', '消費金額', '消費次數']
var typeNum = [{name:"消費機",count:2},{name:"自助服務終端",count:1},{name:"琴房預約費用",count:1},{name:'琴房取消預約手續費用',count:1}]
var group = [{
"payClass": null,
"name": "消費機",
"paySum": "412.00",
"payCount": "16"
}, {
"payClass": null,
"name": "消費機",
"paySum": "400.00",
"payCount": "10"
},
{
"payClass": "小計",
"name": null,
"conType":"消費機",
"paySum": "812.00",
"payCount": "26"
}, {
"payClass": null,
"name": "自助服務終端",
"paySum": "90.00",
"payCount": "9"
}, {
"payClass": "小計",
"name": null,
"conType":"自助服務終端",
"paySum": "90.00",
"payCount": "9"
}, {
"payClass": null,
"name": "琴房預約費用",
"paySum": "240.00",
"payCount": "18"
}, {
"payClass": "小計",
"name": null,
"conType":"琴房預約費用",
"paySum": "240.00",
"payCount": "18"
}, {
"payClass": null,
"name": "琴房取消預約手續費用",
"paySum": "12.00",
"payCount": "7"
}, {
"payClass": "小計",
"name": null,
"conType":"琴房取消預約手續費用",
"paySum": "12.00",
"payCount": "7"
}, {
"payClass": "總計",
"name": null,
"paySum": "1,154.00",
"payCount": "60"
}]
var chartTitle = ['消費金額',"消費次數"] //圖標的標題
var isTotalTable = true //是否爲總表
var ChangeDataType = false
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
// 監聽打印完成操作
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
console.log('Functionality to run before printing.');
} else {
console.log('Functionality to run after printing');
$('#btn-group').toggle();
$('.dg .close-button').toggle();
$('#tab-chart').show();
chartOption.resetChart();
}
});
}
$('body').on('keydown keyup', '#detail-1', function() {
var length = $(this).text().length;
$('#detail-length-tip').text(length);
})
$('body').on("click",".common-head>.btns>.changeType",function(){
ChangeDataType = !ChangeDataType
console.log(ChangeDataType)
if(ChangeDataType){
chartOption.resetChart("payCount")
}else{
chartOption.resetChart("paySum")
}
})
$('body').on('click', '.common-head>.btns>.hide-title', function() {
$('#btn-showtitle>.badge').text(Number($('#btn-showtitle>.badge').text()) + 1);
$(this).parent().parent().parent().hide('slow');
})
$('body').on('click', '.common-head>.btns>.down-text, .common-head>.btns>.up-text', function() {
$(this).toggleClass('glyphicon-chevron-down down-text up-text');
$(this).parent().parent().next().slideToggle('slow');
})
$('body').on('click', '#btn-print', function() {
$('#btn-group').toggle();
$('.dg .close-button').toggle();
var chart1 = echarts.init(document.getElementById('chart1'));
var img1 = new Image();
var imgSrc1 = chart1.getDataURL();
// 渲染到圖表上面，遮住圖表
img1.src = imgSrc1;
chartOption.resetChartLatout();
$('#chart1').append(img1);
// 這裏需要適當的延時
setTimeout(() => {
window.print();
}, 500);
});
$('body').on('click', '#btn-sum', function() {
randomData.sumAll();
});
$('body').on('click', '#btn-showtitle', function() {
$('#btn-showtitle>.badge').text(0);
$('.unit').show();
});
/**
* [鼠標在單元格上方時，顯示提示框]
* 2018-7-19在這裏棄用hover,因爲此事件在JQ新版本中不支持，還是採用mousemove
*/
$('body').on('mousemove', 'td,th', function(e) {
var parentID = $(this).parent()[0].id;
if (parentID) {
var body_width = $('body').outerWidth();
var body_height = $('body').outerHeight();
var tip_board_width = $('#tip-board').outerWidth();
var tip_board_height = $('#tip-board').outerHeight();
var x = e.pageX;
var y = e.pageY;
var dif = 2
if ((body_width - x) < tip_board_width) {
_left = x - tip_board_width - dif;
} else {
_left = x + dif;
}
if ((body_height - y) < tip_board_height) {
_top = y - tip_board_height - dif;
} else {
_top = y + dif;
}
$('#tip-board').css({
"top": _top + "px",
"left": _left + "px"
});
tipOption.setTipBoard(this, tipOption.judgeXY(this));
} else {
$('#tip-board').hide();
}
}).on('mouseout', 'td,th', function(e) {
$('#tip-board').hide();
});
var tipOption = {
judgeXY: function(_self) {
return [];
},
setTipBoard: function(_self, arr) {
$('#cell-v').text($(_self).text());
$('#tip-board').show();
},
changeXYIndicator: function(e) {
var x = e.pageX;
var y = e.pageY;
var dif = 5;
var xIndicatorLength = $('#container')[0].offsetWidth;
var yIndicatorLength = $('#content-view1 table')[0].offsetHeight;
$('#x-indicator').css({
top: `${y-dif}px`,
width: `${xIndicatorLength}px`
});
$('#y-indicator').css({
left: `${x-dif}px`,
height: `${yIndicatorLength}px`
});
},
resetXYIndicator: function() {
$('#x-indicator').css({
top: 0,
width: '300px'
});
$('#y-indicator').css({
left: 0,
height: '300px'
});
},
indicatorAnimate: function(_self) {
$(_self).css("border-bottom", "none");
$(_self).siblings().css("border-bottom", "none");
var $this = $(_self)[0];
var _top = $this.offsetTop;
var _height = $this.offsetHeight;
var _left = $this.offsetLeft;
var _width = $(_self).width();
$('#x-indicator').css({
"top": `${_top + _height}px`,
"left": `${_left}px`,
"display": "inline-block",
"width": 0,
});
$('#x-indicator').animate({
width: `${_width}px`,
}, function() {
$('#x-indicator').hide();
$(_self).css("border-bottom", "2px solid red");
})
},
};
var chartOption = {
resetChartLatout: function() {
var selector = '#tab-chart>#chart';
$(selector).empty();
var div = `<div class="chart-child" id="chart1"></div> `
$(selector).append(div);
},
resetChart: function(nm) {
chartOption.resetChartLatout();
var chart1 = echarts.init(document.getElementById('chart1'));
var hash = {};
var seriesData = []
for(var i in group) {
if(hash[group[i].name]) {
hash.name = group[i].name
}
hash[group[i].name] = group[i].name;
delete hash.null
}
var xData = Object.keys(hash)
var datas = group.filter(function(i){
return i.payClass == "小計"
})
if(nm){
var sumData = this.sumAndCount(datas,nm)
}else{
var sumData = this.sumAndCount(datas,"paySum")
}
console.log(sumData)
var options = {
title:{
text:sumData.text
},
tooltip:{
trigger:'axis'
},
legend:{
data:rates
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: true
},
magicType: {
show: true,
type: ["line", "bar"]
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [
{
type: "category",
data: xData
}
],
yAxis: [
{
type: "value"
}
],
series: [{
data: sumData.data,
type: 'bar',
}]
}
chart1.setOption(options)
},
sumAndCount: function(data,m){
var d = []
var text = ''
for(var i=0; i< data.length ; i++){
if(m == "paySum"){
d.push(data[i].paySum)
text = chartTitle[0]
}else if(m == "payCount"){
text = chartTitle[1]
d.push(data[i].payCount)
}
}
return {text:text,data:d}
}
};
var randomData = {
redrawCenterLayout: function() {
var rateNum = this.setRateRow(rates);
//設置內容
var cell = group;
var sum = [];
// 左邊第一列的數據顯示/
for(var k = 0; k< typeNum.length ; k++){
let ind = k
if(typeNum[ind].count == 1){
var colsData = '<tr class="danger"><th>'+typeNum[k].name+'</th></tr><tr><td>小計</td></tr>'
}else if(typeNum[ind].count > 1){
var colsDatas = '<tr class="danger"><th>'+typeNum[k].name+'</th></tr>'
var typeCols = ''
for(var c=0; c< typeNum[ind].count-1; c++){
typeCols += '<tr><td>-</td></tr>'
}
var colsDatass = colsDatas.concat(typeCols)
var sumCol = '<tr><td>小計</td></tr>'
var colsData = colsDatass.concat(sumCol)
}
$('#typeSumNum').append(colsData)
}
for (var i = 0; i < rates.length; i++) {
var rowData = '<th>' + rates[i] + '</th>'
$('.tableTitle').append(rowData)
}
var data = {}
for(var j = 0; j<cell.length; j++){
console.log(cell[j])
// 總表
var rowTd = `
<tr id="f-${i}-all">
<td class="rowname">${cell[j].name == null ? "-" : cell[j].name}</td>
<td>${cell[j].paySum}</td>
<td>${cell[j].payCount}</td>
</tr>
`
$('.tableBody').append(rowTd)
}
this.setCellData(cell.length,cell[0].length)
},
// 設置中間內容個數
setRateRow: function(arr) {
var len = arr.length;
return len;
},
// 設置單元格數據
setCellData: function(row) {
var row_col = [];
var a_row = [];
for (var i = 0; i < row.length; i++) {
a_row.push(row[i]);
}
row_col.push(a_row);
console.log('設置單元格隨機數據', row_col)
return row_col;
},
};
window.outerFunction = function(arr) {
console.log(arr);
}
init();
function init() {
randomData.redrawCenterLayout();
chartOption.resetChart();
console.log(isTotalTable)
if(isTotalTable){
$('#page-foot').show()
}else{
$('#page-foot').hide()
}
}
})
css部分
@charset "utf-8";
body, html {
padding: 5px;
font-family: "微軟雅黑";
}
#page-center, #page-foot, #page-customer {
width: 100%;
}
#container {
display: flex;
/*width: 100%;*/
/*height: 500px;*/
/*border: 1px solid red;*/
box-shadow: 1px -1px 1px 1px #ccc;
}
.common-head {
display: flex;
justify-content: space-between;
align-items: center;
/*width: 98%;*/
height: 30px;
max-height: 30px;
background-color: #dff0d8;
border: 1px solid #ccc;
box-shadow: 1px -1px 1px 1px #ccc;
padding-left: 5px;
padding-right: 5px;
}
.up-move::after {
content: '上移';
font-family: "微軟雅黑";
}
.down-move::after {
content: '下移';
font-family: "微軟雅黑";
}
.changeType::after {
content: '圖表數據切換';
font-family: "微軟雅黑";
}
.hide-title::after {
content: '隱藏';
font-family: "微軟雅黑";
}
.up-text::after {
content: '展開';
font-family: "微軟雅黑";
}
.down-text::after {
content: '收折';
font-family: "微軟雅黑";
}
.common-head>span:hover, .common-head>div:hover {
cursor: pointer;
}
.content {
display: flex;
flex-wrap: wrap;
/*border: 1px solid red;*/
}
#content-view1 {
flex-grow: 1;
flex-shrink: 0;
}
#content-view2 {
flex-grow: 12;
}
#content-view3 {
flex-grow: 4;
flex-shrink: 0;
}
#page-head {
position: sticky;
top: 5px;
background-color: #fff;
margin-bottom: 5px;
}
.table {
margin-bottom: 5px;
}
#content-view1 div {
flex-grow: 1;
}
#content-view2 div {
flex-grow: 1;
}
#content-view3 div {
flex-grow: 1;
}
.center-tab table>thead>tr>th, #content-view2 table>thead>tr>th {
text-align: center !important;
}
.center-tab table>tbody>tr>th, .center-tab table>tfoot>tr>th {
text-align: center !important;
}
.right-tab table>tbody>tr>th, .right-tab table>tfoot>tr>th {
text-align: center !important;
}
table>tbody {
font-size: 12px;
}
td {
text-align: center;
}
.center-tab table>tbody>tr>th:hover, .center-tab table>tfoot>tr>th:hover {
cursor: pointer;
background-color: #18E690;
}
.right-tab table>tbody>tr>th:hover, .right-tab table>tfoot>tr>th:hover {
cursor: pointer;
background-color: #18E690;
}
#content-view2 td:hover, #content-view3 td:hover{
cursor: pointer;
background-color: yellow;
}
.indicator,#tip-board {
position: absolute;
}
.indicator {
top: 0;
left: 0;
z-index: 10;
width: 0;
height: 2px;
border: 1px solid red;
display: none;
}
#x-indicator {
width: 300px;
height: 2px;
}
#y-indicator {
width: 2px;
height: 300px;
}
#tip-board {
/*width: 145px;*/
/*height: 100px;*/
background-color: #fff;
border: 1px solid #ccc;
display: none;
padding-left: 5px;
}
#tab-chart {
/*width: 98%;*/
height: 300px;
display: flex;
border: 1px solid #ccc;
/*background-image: url(../../img/background.jpg);*/
}
#options {
flex-shrink: 0;
width: 120px;
padding-top: 50px;
padding-left: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
#options li{
list-style-type:none;
margin: 8px;
padding-left: 5px;
padding-right: 5px;
border-left: 1px dashed green;
}
li {
cursor: pointer;
}
#chart {
flex-grow: 1;
display: flex;
justify-content: space-around;
margin-right: 30px;
/*background-color: green;*/
}
.chart-child {
flex-grow: 1;
width: 40%;
/*height: 100%;*/
/*border: 1px solid #ccc;*/
}
.input-box {
/*width: 98%; */
min-height: 30px;
padding: 3px;
outline: 0;
word-wrap: break-word;
/*overflow-x: hidden;*/
/*overflow-y: auto;*/
}
#description {
border: 1px solid #a0b3d6;
}
#detail-length-tip::after {
content: '/建議1000';
}
其他需要應用的插件需要自己去找,名稱都在html的應用文件中,除了頁面功能的js,其他的不提供
效果圖
