h5表单列表,前端布局

末蓝、 2023-02-09 14:10 8阅读 0赞

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

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

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

## 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,其他的不提供

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020051911085661.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA==,size_16,color_FFFFFF,t_70