h5表单列表,前端布局

由于需求需要,有些表单需要做汇总展示,相对于一般的表单都是针对单行记录展示,所以做了一下汇总的展示效果

由于使用框架的问题,所以这里使用jq开发,之后会相继开发vue版本的列表

使用之前记得先应用 jq 包,不然无法使用

html部分

	
		
		
		
		
		
	
	
		

			

				
					 打印
				
				
					 撤销隐藏
					0
				
			

			

				
查询条件：
			

		

		


			

				
				

					
					
				
			
			

				

					

						

							

								

									
类型
								
							
							


							
							

								

									
总计
								
							
						
					
				
				

					
				
			


			

				


					

						
						
						
					
				
				

					

						

					

				
			

			

				


					

						
						
					
				
				

					

					
0
				
			

			

			

			

			

			

				值：
			
		
		
		

	

这里的代码附加了一些图标的其他的展示代码,若不需要删除便可

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 = `
 `
			$(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 = ''+typeNum[k].name+'小计'
				}else if(typeNum[ind].count > 1){
					var colsDatas = ''+typeNum[k].name+''
					var typeCols = ''
					for(var c=0; c< typeNum[ind].count-1; c++){
						typeCols += '-'
					}
					var colsDatass = colsDatas.concat(typeCols)
					var sumCol = '小计'
					var colsData = colsDatass.concat(sumCol)
				}
				
				$('#typeSumNum').append(colsData)
			}
			
			for (var i = 0; i < rates.length; i++) {
				var rowData = '' + rates[i] + ''
				$('.tableTitle').append(rowData)
			}
			var data = {}
			for(var j = 0; j
							
							${cell[j].name == null ? "-" : cell[j].name}
							${cell[j].paySum}
							${cell[j].payCount}
						
						`
			$('.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,其他的不提供

效果图