页面布局div，一进入页面默认选中第一个div

最新推荐文章于 2024-09-01 13:46:58 发布
最新推荐文章于 2024-09-01 13:46:58 发布
阅读量1.2w 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wu920604/article/details/53582535
该页面通过div布局展示了不同维度的投标人统计数据，默认加载当前月上一个月的数据，并可通过选择不同的时间段和查询方式进行数据筛选。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

页面是div的排布，一进入页面默认选中第一个div，并且展示第一个div下的数据（默认选中的是当前月的上一个月），然后点击哪个div显示哪个div下的数据。


代码：
 
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="g2" uri="/g2-tags"%>
<g2:url var="path" value="/static/glodon.gbp.statistic" />

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>投标人统计分析</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
</script>
</head>
<body>
<% 
// String firstDay=(String)request.getAttribute("firstDay"); 
// String lastDay=(String)request.getAttribute("lastDay"); 
// String centerCodeName=(String)request.getAttribute("centerCodeName"); 
%>
<%-- value="<%=firstDay%>" --%>
	<div id="d01" class="content-title">投标人交易情况统计<span style="font-size:16px;color: #B6BFCB"> Bidders Transaction Statistics</span></div>
    <div class="sj-info">
        <div class="sort">
            <div id="sort1" class="sort-def" val="panel1">报名次数排名</div>
            <div id="sort2" class="sort-def" val="panel2">中标次数排名</div>
            <div id="sort3" class="sort-def" val="panel3">累计中标金额排名</div>
            <div id="sort4" class="sort-def" val="panel4">有效投标率排名</div>
            <div id="sort5" class="sort-def" val="panel5">价格区间排名</div>
        </div>
        <div class="panel" id="panel1">
        	<div class="searchDiv">
        		<div class="searchBtn1" id="year1" onclick="changeSearch(1,this)" >年</div>
        		<div class="searchBtn1" id="month1" onclick="changeSearch(2,this)" >月</div>
        		<div class="searchBtn1" id="week1" onclick="changeSearch(3,this)" >周</div>
        		<input type="hidden" id="searchType1" class="searchType" />
               <!--  <div class="search-title">按月查询:</div> -->
	                <select class="jyzx-all1" id="monthSerach1"  >
	                </select>
                <div class="searchBtn" id="searchButton1" >高级查询</div>
        		<div class="searchBtn" onclick="getChartData1(2)">查询</div>
            </div>
            <div id="hideDiv1" class="searchDiv">
            	<div class="search-title">日期查询:</div>
                <input id="begin1" class="datas" placeholder="   请选择" style="margin-right: 10px;" >
                <div style="float: left;margin-right: 10px;margin-top: 5px;">~</div>
                <input id="end1" class="datas" placeholder="   请选择" ">
            	<div class="search-title">交易中心:</div>
	                <select class="jyzx-all" id="jyzx-all1" style="width: 210px;">
	                    <option value="">全省</option>
	                </select>
	             
	             <div class="search-title">交易类型:</div>
	                <select class="jylx-all" id="jylx-type1" style="width: 110px;">
	                    <option value="Ce">建设工程</option>
	                    <option value="Gp">政府采购</option>
	                </select>
            </div><br/>
            <br/>
            <div id="mychart1" style="height: 400px;border:1px solid #ddd;padding: 40px;"></div>
        </div>
		<script type="text/javascript">
		function initDate(id){
			$(".searchBtn1").css("background","#4387B8");
			$(".searchBtn1").css("color","white");
			$(".searchBtn1").css("1px solid #ddd");
			$("#month"+id).css("background","white");
			$("#month"+id).css("color","#4387B8");
			$("#month"+id).css("border","1px solid #4387B8");
			$(".jyzx-all1").empty();
			var yearData = 2016; 
			var monthData = 1; 
			$(".jyzx-all1").append('<option value="" >请选择</option>');
			for (var i=1;i<37;i++){
				$(".jyzx-all1").append('<option value='+yearData+'-'+monthData+' >'+yearData+'年'+monthData+'月</option>');
				if(i % 12 == 0){
					yearData += 1;
					monthData = 1;
				}
				if(i >= 1 && i % 12 != 0){
					monthData += 1;
				}
			}
			$(".searchType").val("2");
		}
		
		function changeSearch(data,value){
			$(".searchBtn1").css("background","#4387B8");
			$(".searchBtn1").css("color","white");
			$(".searchBtn1").css("1px solid #ddd");
			if(data == 1){
				$(".jyzx-all1").empty();
				var yearData = 2015; 
				$(".jyzx-all1").append('<option value="" >请选择</option>');
				for (var i=1;i<7;i++){
					$(".jyzx-all1").append('<option value='+yearData+' >'+yearData+'</option>');
					yearData += 1;
				}
				$(".searchType").val("1");
			} else if(data == 2){
				$(".jyzx-all1").empty();
				var yearData = 2016; 
				var monthData = 1; 
				$(".jyzx-all1").append('<option value="" >请选择</option>');
				for (var i=1;i<37;i++){
					$(".jyzx-all1").append('<option value='+yearData+'-'+monthData+' >'+yearData+'年'+monthData+'月</option>');
					if(i % 12 == 0){
						yearData += 1;
						monthData = 1;
					}
					if(i >= 1 && i % 12 != 0){
						monthData += 1;
					}
				}
				$(".searchType").val("2");
			} else{
				$(".jyzx-all1").empty();
				$(".jyzx-all1").append('<option value="" >请选择</option>');
				var weekYearData = 2016; 
				var weekData = 1; 
				for (var i=1;i<157;i++){
					$(".jyzx-all1").append('<option value='+weekYearData+'-'+weekData+'>'+weekYearData+'年第'+weekData+'周</option>');
					if(i % 52 == 0){
						weekYearData += 1;
						weekData = 1;
					}
					if(i >= 1 && i % 52 != 0){
						weekData += 1;
					}
				}
				$(".searchType").val("3");
			}
			$("#"+value.id).css("background","white");
			$("#"+value.id).css("color","#4387B8");
			$("#"+value.id).css("border","1px solid #4387B8");
			$(".datas").val('');
		}
		$(function(){
			//ajax获取交易中心的数据
			$.ajax({
				type : "post",
				async : false, //同步执行  
				url : "bidder!getSelect.do",
				data : {
				},
				dataType : "json", //返回数据形式为json  
				success : function(data) {
					if (data) {
						for (var i=0;i<data.data.length;i++)
						{
							$(".jyzx-all").append('<option value='+data.data[i].name+' >'+data.data[i].value+'</option>');	
						}
					}
				},
				error : function(errorMsg) {
					
				}
			});
			$("#hideDiv1").hide();
        	var t=0;
        $("#searchButton1").click(function() {
            if(t==0){
            	$("#hideDiv1").show();
            	$("#searchButton1").text("收起");
            	//$("#monthSerach1").val('');
                 t=1;
            }else  {
            	$("#hideDiv1").hide();
            	$("#searchButton1").text("高级查询");
                 t=0;
            }

        });
        $("#monthSerach1").change(function() {
        	$("#begin1").val('');
			$("#end1").val('');
        });
        $(".jyzx-all1").empty();
		var yearData = 2016; 
		var monthData = 1; 
		$(".jyzx-all1").append('<option value="" >请选择</option>');
		for (var i=1;i<37;i++){
			$(".jyzx-all1").append('<option value='+yearData+'-'+monthData+' >'+yearData+'年'+monthData+'月</option>');
			if(i % 12 == 0){
				yearData += 1;
				monthData = 1;
			}
			if(i >= 1 && i % 12 != 0){
				monthData += 1;
			}
		}
		$(".searchType").val("2");
		$(".jyzx-all1").val('${firstDay}');
		$("#month1").css("background","white");
		$("#month1").css("color","#4387B8");
		$("#month1").css("border","1px solid #4387B8");
			$(".panel").hide();
			$("#panel1").show();
			$("#sort1").attr("class", "sort-select");
			//$("#xmhyfl").attr('checked',true);
			$(".sort div").on("click", function() {
				//$(".jyzx-all").val('');//清空数据
				//$(".jylx-all").val('');
				//$(".datas").val('');
				var id = $(this).attr("val");
				$(".sort-select").attr("class", "sort-def");
				$(this).attr("class", "sort-select");
				$(".panel").hide();
				$("#" + id).show();
				if(id=="panel2"){
					getChartData2(1);
				}else if(id=="panel3"){
					getChartData3(1);
				}else if(id=="panel4"){
					getChartData4(1);
				}else if(id=="panel5"){
					getChartData5(1);
				}else if(id=="panel1"){
					getChartData1(1);
				}
			})
		});
			var myChart1;
			$(function() {
// 				document.getElementById("begin1").flatpickr();
// 	            document.getElementById("end1").flatpickr();

				document.getElementById("begin1").flatpickr({
					onChange: function(dateObj, dateStr, instance) {
			        	$("#monthSerach1").val('');
					}
				});
	            document.getElementById("end1").flatpickr({
					onChange: function(dateObj, dateStr, instance) {
			        	$("#monthSerach1").val('');
					}
				});
				myChart1 = echarts.init(document.getElementById('mychart1'));
			 	myChart1.showLoading({  
		            text : "图表数据正在努力加载..."  
		        });
				//投标人报名次数排前十的数据统计
				var options1 = {
						title : {
							text : '投标人累计报名次数排名',
							x : 'center'
						},
						//color: colorArr,
						tooltip : {
							trigger : 'axis',
							axisPointer : { // 坐标轴指示器，坐标轴触发有效
								type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
							}
						},
						
		 				toolbox: {
		 			        show : true,
		 			        x:'850',//下载的字体显示不全
		 			        feature : {
		 			            //dataView : {show: false, readOnly: false},
		 			            magicType : {show: true, type: ['line', 'bar']},
		 			            //restore : {show: true},
		 			            saveAsImage : {show: true}
		 			        }
		 			    },
// 					 legend: {
// 						    	x: 'left',
// 						        data: ['招标代理名称']
// 							  },
						grid : {
//		 					left : '1%',
//		 					right : '10%',
//		 					bottom : '3%',
//		 					containLabel : true
							y2: 140
						},
						xAxis : {
							type : 'category',
							name : '投标人',
							data : [ '' ],
							axisLabel:{
							     interval:0,//横轴信息全部显示
							     rotate:-30,//-30度角倾斜显示
							},
							axisLine:{
		                        lineStyle:{
		                            color:'#D6BAFF',
		                            width:1,//这里是为了突出显示加上的
		                        }
		                    }
						},
						yAxis : {
							type : 'value',
							name : '单位: 次',
							splitLine: {
							    lineStyle: {
							        // 使用深浅的间隔色
							        color: ['#D6BAFF']
							    }
							},
							nameTextStyle: {
								color: ['#D6BAFF']
								},
							axisLine:{
		                        lineStyle:{
		                            color:'#D6BAFF',
		                            width:1,//这里是为了突出显示加上的
		                        }
		                    }
						},
						series: [{
							name : '投标人名称',
							type : 'bar',
							stack : '次数',
							label : {
								normal : {
									show : true,
									position: 'top'
								}
							},
							data : [ '' ],
							color:['#D6BAFF'],
							itemStyle: {
								normal: {
								barBorderRadius: 5,
								}
							},
							barWidth: 30,
						}]
					};
				myChart1.setOption(options1);
				getChartData1();
			});

			function getChartData1(data) {
				if(data == 1){
					initDate(1);
					$(".jyzx-all1").val('${firstDay}');
				}
				//获得图表的options对象  
				var newOption1 = myChart1.getOption();
				//参数
				var startDate = $("#begin1").val();
				var endDate = $("#end1").val();
				var searchType = $("#searchType1").val();
				var monthSerach = $("#monthSerach1").val();
				var type = $("#jylx-type1").val();
				if(type==null || type=="" || type=="undefine"){
		        	type = "${type}";
		        }
				var centerCode = $("#jyzx-all1").val();
				//投标人报名次数排前十的数据统计
				$.ajax({
					type : "post",
					async : false, //同步执行  
					url : "bidder!bmcsBar.do",  
					data : {
						startDate : startDate,
						endDate : endDate,
						type:type,
						centerCode:centerCode,
						monthSerach : monthSerach,
						searchType :searchType
					},
					dataType : "json", //返回数据形式为json  
					success : function(data) {
						if (data) {
							newOption1.title[0].text = data.centreName+"投标人累计报名次数排名";
							newOption1.xAxis[0].data = data.category;
							newOption1.series[0].data = data.series;
							myChart1.hideLoading();
							myChart1.setOption(newOption1);
						}
					},
					error : function(errorMsg) {
						alert("图表请求数据失败啦!");
						myChart1.hideLoading();
					}
				});
			}
			//根据查询条件加载柱图
			function showChart1() {
				getChartData1();
			}
			</script>
   </div>
</body>
</html>

后台代码，获取当前月的上个月 
	public String zbrtjfx() {
		if(StringUtils.isBlank(type)){
			setType("Ce");
		}
		// 获取当前上一个月
		Calendar calendar = Calendar.getInstance();
		calendar.setTime(new Date());
		Integer year = calendar.get(Calendar.YEAR);
		Integer month = calendar.get(Calendar.MONTH)+1;
		if (month - 1 == 0) {
			month = 12;
			year -= 1;
		}else{
			month -= 1;
		}
		setFirstDay(year + "-" + month);
		return "zbrtjfx";
	}
2016-12-15修改
文章中涉及到的样式css在
http://blog.youkuaiyun.com/wu920604/article/details/53582083
查找
CSS设计指南---页面布局
weixin_40794404的博客
06-29 1954
CSS设计指南—页面布局 教材：CSS设计指南 实现多栏布局 三种方案： 固定宽度：固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到1100像素宽。 流动： 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。 弹性：弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了
div的选中效果
06-24
div添加选中效果，及移动，改变大小鼠标形状变化
获取div下的第一个子div
qin_yulinling的博客
03-30 2664
$('.qxh-dropdown-page').children()[0] 但得到的是一个dom对象，如果要得到Jquery对象，要使用 $($('.qxh-dropdown-page').children()[0])
点击div内部默认文本被选中
qq_30351747的博客
08-08 527
点击div内部默认文本被选中
css如何选择同一个class下的第一个div?
热门推荐
css使多个相互之间有间隔的元素两端对齐显示
12-15 2万+
<div class="content"></div> <div class="content"></div> <div class="content"></div> .content:nth-child(1) {......}
v-for循环，点击更改按钮样式，默认选中第一个
陈铭杰的博客
06-19 5847
效果图 HTML activeClass为class名 <div v-for="(item,index) of 数组名" :key="index" :class="active==index ? 'activeClass' : '' "> <div @click="change(index)" ></div> </div&gt...
html和css怎么实现上一页 1 2 下一页 这样分页布局的按钮，第二页默认选中
11-09
HTML 和 CSS 可以结合使用来创建分页布局的导航栏，通常会包含 "上一页"、"1"、"2"、"下一页" 等按钮，并将第二页标记为默认选中状态。这里是一个简单的示例： 首先，在 HTML 中构建基础结构： ```html <div class...
el-row 下面的el-col-6 el-col-18 里面分别 2个div class=active 只能选中一个div
最新发布
07-12
activeIndex: null // 初始时没有选中，也可以设置默认选中一个，比如0 }; } }; ``` 样式部分（根据需求自定义active的样式）： ```css .active { /* 这里写选中状态的样式，比如边框、背景色等 */ ...
我现在有两个div的class一样的，但是我只想隐藏第一个，如何实现
03-08
因为class相同，document.getElementsByClassName或者document.querySelectorAll会返回所有匹配的元素，但如何只选中第一个呢？ 我记得，通过getElementsByClassName获取的是一个HTMLCollection，而...
html 点击按钮 实现页面内容地的隐藏与切换
08-11
其中第一个按钮被赋予了额外的“red”类，用于视觉上表示当前选中的按钮状态。 #### 内容展示区域 ```html <div class="shop_all"> <div class="shop_all_a" style="display:block;"> 1111 </div> <div class=...
默认让页面的第一个控件选中的javascript代码
12-10
当页面上面显示了一个表单后，通常焦点 并不是放在第一个控件上面，只需要一点通常的脚本就可以实现这个效果 。 document.forms[0].elements[0].focus(); 如果页面的第一个控件是隐藏字段，或是不支持focus() 上面这段javascript 可能就会出现错误 ！ 代码如下: var formutil = new Object; formutil.focusOnfirst = function() { if(document.forms.length>0){ var item = document.forms[0].elements.length; for(va
关于浏览器默认选择div内容记录
12-03 235
关于浏览器默认选择div内容记录 项目遇到这么一个问题，需要按快捷键切换选中内容大小写，发现切换一次后，选择内容丢失，随即开始研究怎么让它切换后再次选择。一开始发现大神写的代码。html代码<textarea id="t" style="width:500px; height:100px;">麦当劳wifi热点的账号密码及连接设置（全国通用）。麦当劳的免费热点是隐藏wifi，需要手动添加才
解决div布局中第一个div(display:block)的margin-top在浏览器中显示无效果问题
qq_30541261的博客
05-08 1812
外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：     子元素设置margin-top，父元素也受影响     * {         mar
javascript+div样式的自定义tab选项卡
习惯有你&的博客
01-05 1920
需求：进入页面以div样式的选项卡显示，默认显示第一个，鼠标移上事件（也可以更换为鼠标点击事件）进行切换选项卡 New Document .news{ width:324px; margin-left:8px; border:1px solid #0973b2; padding:1px; height:269px; min-height:269px
css 如何选择同一个class下的第一个div?
weixin_42365757的博客
08-25 1万+
css 如何选择同一个class下的第一个div? <div class="ms-u"></div> <div class="ms-u"></div> <div class="ms-u"></div> .ms-u:nth-child(1) {......}
默认页面设置html5,PHICOMM默认登录入口管理页面
weixin_35656580的博客
06-03 2078
要访问PHICOMM的每个型号的路由器(例如FWA-600ND A2.0，FWR-714U A1.0或K2P)，您都需要使用路由器的登录IP、用户名和路由器密码。您可以在PHICOMM路由器手册中找到这些信息。但是，如果您没有路由器的手册，或者不想阅读整个手册以查找默认的登录信息，则可以使用下面的快速指南。PHICOMM路由器登录指南1；打开您的互联网浏览器(例如Chrome，Firefox，Op...
用纯 div 实现一个选中和未选中状态
weixin_52648900的博客
09-01 853
浅浅使用 div 实现 input 选中和未选中的状态，据此可以实现一些简单的逻辑
html初始化默认加载,div可以初始化加载一个html吗？该如何处理
weixin_39728320的博客
06-08 439
div可以初始化加载一个html吗？我有一个空的div,想点链接联动。比如右边是产品，左边是产品列表，点左边的链接联动右边。。。可是初始化右边没东西，又想全部展示。。。$(document).ready(function(){$("#conright").html("坑"+"爹");});这种样子的，是可以把文字放进去。。。可是标签根本刷不出来。。。不起作用。。。#("#divId").load(...
Vue框架--表单元素默认被选中
丑小鸭变黑天鹅的博客
03-08 1489
原生VS Vue框架--表单元素默认被选中 我们都知道复选框在前端开发中的重要性，可以说，到处都在使用，最近在学习vue，看了vue的处理方式，感觉尤大大太牛了。这里总结一下表单默认被选中的操作 对于单选按钮radio，如果想默认选中“女”或者“男”，只需在data数据里操作input所绑定的v-model即可，代码如下 new Vue({ el: "#demo", data: {
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值