一进入页面选中第一个按钮，并展示按钮下的数据
来源：互联网 发布：减肥晚上吃什么 知乎 编辑：程序博客网 时间：2024/05/22 03:22
页面是按钮的排布，一进入页面默认选中第一个按钮，并且展示第一个按钮下的数据，然后点击哪个按钮显示哪个按钮下的数据。
<%@ 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"> The Bidder Trading Statistics</span></div> <div class="sj-info"> <form action="#"> <ul class="fx-category"><li val="panel1"><input name="fx-category" type="radio"id="xmhyfl"><label for="xmhyfl">报名次数排名</label></li><li val="panel2"><input name="fx-category" type="radio"id="lxfl"><label for="lxfl">中标次数排名</label></li><li val="panel3"><input name="fx-category" type="radio"id="zjly"><label for="zjly">中标金额排名</label></li><li val="panel4"><input name="fx-category" type="radio"id="jyxs"><label for="jyxs">有效投标率排名</label></li><li val="panel5"><input name="fx-category" type="radio"id="szqy"><label for="szqy">价格区间排名</label></li></ul> </form> <div class="panel" id="panel1"> <div class="searchDiv"> <div class="search-title">交易中心:</div> <select class="jyzx-all" id="jyzx-all1" style="width: 210px;"> <option value="">全省</option> </select> <div class="search-title">开始:</div> <input id="begin1" class="datas" value="${firstDay}" style="width: 135px;"> <div class="search-title">结束:</div> <input id="end1" class="datas" value="${lastDay}" style="width: 135px;"> <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 class="searchBtn" onclick="getChartData1()">查询</div> </div> <br/> <div id="mychart1" style="height: 400px;border:1px solid #ddd;padding: 40px;"></div> </div><script type="text/javascript">$(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) {}});$(".panel").hide();$("#panel1").show();$("#xmhyfl").attr('checked',true);$(".fx-category li").on("click", function() {//$(".jyzx-all").val('');//清空数据//$(".jylx-all").val('');//$(".datas").val('');var id = $(this).attr("val");$(".panel").hide();$("#" + id).show();if(id=="panel2"){getChartData2();}else if(id=="panel3"){getChartData3();}else if(id=="panel4"){getChartData4();}else if(id=="panel5"){getChartData5();}})});var myChart1;$(function() {document.getElementById("begin1").flatpickr(); document.getElementById("end1").flatpickr();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 : truey2: 140},xAxis : {type : 'category',name : '投标人',data : [ '' ],axisLabel:{ interval:0,//横轴信息全部显示 rotate:-30,//-30度角倾斜显示},axisLine:{ lineStyle:{ color:'#0087ED', width:1,//这里是为了突出显示加上的 } }},yAxis : {type : 'value',name : '单位: 次',splitLine: { lineStyle: { // 使用深浅的间隔色 color: ['#0087ED'] }},nameTextStyle: {color: ['#0087ED']},axisLine:{ lineStyle:{ color:'#0087ED', width:1,//这里是为了突出显示加上的 } }},series: [{name : '投标人名称',type : 'bar',stack : '次数',label : {normal : {show : true,position: 'top'}},data : [ '' ],color:['#0087ED'],itemStyle: {normal: {barBorderRadius: 5,}},barWidth: 30,}]};myChart1.setOption(options1);getChartData1();});function getChartData1() {//获得图表的options对象 var newOption1 = myChart1.getOption();//参数var startDate = $("#begin1").val();var endDate = $("#end1").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},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>2016-12-15修改
css样式 style.css
* { padding: 0; margin: 0;}body, h1, h2, h3, h4, a, span, div, p, img, input, select, button, textarea, ul, li, ol, dl, dt, dd { box-sizing: content-box;}ul, li { list-style: none;}html, body { font-size: 14px; color: #38474f; font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", '\5b8b\4f53', sans-serif; background-color: #eceff1;}.clearfix { *zoom: 1;}.clearfix:before, .clearfix:after { display: table; line-height: 0; content: "";}.clearfix:after { clear: both;}div, ul, li { margin: 0; padding: 0; border: 0;}ul, li { list-style-type: none; text-transform: capitalize;}textarea { resize: none;}a:link { text-decoration: none; color: #666;}a:hover { text-decoration: underline; color: #2c82ec;}a:active { color: #666;}a:visited { color: #666;}::-webkit-input-placeholder { color: black;}::-moz-placeholder { color: #fff;}:-ms-input-placeholder { color: #fff;}.pages { height: 80px; overflow: hidden; position: relative; text-align: center; top: 15px; width: 100%;}.pages .pages-list { float: right; position: relative;}.pages .pages-list li { background: #fff none repeat scroll 0 0; border: 1px solid #e6e6e6; cursor: pointer; float: left; height: 30px; line-height: 30px; margin: 10px 5px; padding: 0 12px; position: relative; text-align: center;}.pages .pages-list li a { color: #666; font-size: 13px; line-height: 30px;}.pages .pages-list li:hover, .pages .pages-list li.selected { background: #52a3ef none repeat scroll 0 0; border: 1px solid #52a3ef;}.header { position: relative; width: 100%; height: 51px; background-color: #37474e; margin-bottom: 30px;}.header-main { width: 1200px; height: 100%; text-align: center; font-size: 14px; color: #fff;}.footer { width: 100%; background-color: #37474e; padding-top: 20px; color: #fff;}.footer-main { width: 1200px; line-height: 30px; margin: 0 auto 30px auto; text-align: center; font-size: 14px;}.header-main { width: 1200px; margin: 0 auto; height: 100%;}.header-title { float: left; width: 350px; text-align: left; margin-top: 10px; font-weight: bold;}.header-logo { font-size: 18px; margin-bottom: 5px;}.header-logo2 { font-size: 14px; margin-bottom: 5px;}.menubar { float: right; margin-right: 74px; height: 100%;}.menubar li { float: left; margin-left: 95px; height: 100%;}.menubar li a { font-size: 15px; color: #9ba1a3; text-decoration: none; height: 96px; line-height: 50px; display: inline-block;}.menubar li:hover a { font-size: 20px; color: #fff; text-decoration: none;}.content { width: 1200px; position: relative; margin: 10px auto;}.content-title { color: #38474f; font-size: 20px; margin: 10px 0;}.today { background-color: #fff; padding: 40px; overflow: hidden;}.today-detail { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #ddd; margin-bottom: 40px; color: #fff;}.today-detail > div { padding: 20px 25px;}.today-detail > div > .name { border-bottom: 1px solid #fff; line-height: 20px; overflow: hidden;}.today-detail > div > .number { text-align: center; font-size: 26px;}.today-detail > div > .name > .name1 { float: left; width: 200px; text-align: center;}.today-detail > div > .name > .name2 { float: right; width: 60px; text-align: right;}.today1 { width: 200px; height: 50px; margin-right: 40px; background-color: #48c3d3; float: left;}.today2 { float: left; width: 200px; height: 50px; margin-right: 40px; background-color: #58b4dd;}.today3 { float: left; width: 200px; height: 50px; margin-right: 40px; background-color: #63cba6;}.today4 { float: left; width: 200px; height: 50px; background-color: #b99cca;}.frsj { float: left; width: 500px; height: 430px; margin: 20px 0 80px; padding: 20px; border: 1px solid #ddd;}.frsj-1 { float: left; font-size: 20px; line-height: 55px; height: 55px;}.frsj-2 { float: right; overflow: hidden; margin-top: 20px;}.frsj-2 li { background-color: #d6d6d6; float: left; padding: 2px 5px; border-radius: 2px; margin-right: 10px; cursor: pointer;}.frsj-2 li:hover { color: #fff; background-color: #3a89c4; float: left; padding: 2px 5px; border-radius: 2px; margin-right: 10px; cursor: pointer;}.frsj-2 li.on { color: #fff; background-color: #3a89c4; float: left; padding: 2px 5px; border-radius: 2px; margin-right: 10px; cursor: pointer;}.frsj-3 { border-top: 1px solid #3989c4; float: left; width: 500px; height: 390px; overflow: hidden;}.newfr { float: right; width: 540px; height: 470px; overflow: hidden; border: 1px solid #ddd; margin: 20px 0 80px;}.newfr li { border-bottom: 1px solid #ddd; overflow: hidden;}.newfr-title { height: 50px; line-height: 50px; text-indent: 20px; width: 350px; float: left;}.newfr-more { float: right; height: 50px; line-height: 50px; width: 160px; text-align: right; margin-right: 20px;}.fr-name { float: left; width: 350px; text-indent: 20px; height: 60px; line-height: 60px;}.fr-time { float: right; width: 160px; height: 60px; line-height: 60px; text-align: right; margin-right: 20px;}.qydyfx { height: 555px; overflow: hidden; background-color: #fff; padding: 40px;}.qydyfx_1 { float: left; margin: 20px 0; }.qydyfx_2 { float: right; margin: 20px 0; }.zczbj { height: 420px; overflow: hidden; width: 100%;}.zczbj-1 { float: left; width: 555px; height: 420px;}.zczbj-2 { float: right; width: 555px; height: 420px;}.maod { position: fixed; height: 186px; padding: 0 10px; right: 10px; border-radius: 15px; top: 150px; background: url("../img/line.png") no-repeat 10px 0;}.maod ul li { height: 25px; background: url("../img/miao-01.png") no-repeat 0px 5px; margin-top: 28px; padding-left: 40px; line-height: 25px; border-radius: 15px;}.maod ul li a { text-decoration: none;}.maod ul li.on { height: 25px; background: url("../img/miao-02.png") no-repeat 0px 5px;; margin-top: 28px; padding-left: 40px; line-height: 25px; border-radius: 15px;}.fx-category { overflow: hidden; border-bottom: 1px solid #ddd; padding-bottom: 10px;}.fx-category li { float: left; margin-right: 20px;}.searchDiv { overflow: hidden; padding-top: 20px;}.search-title { float: left; line-height: 35px; height: 35px; text-align: right; padding-right: 10px;}.searchDiv .jyzx-all { line-height: 35px; height: 30px; float: left; border: 1px solid #ddd; width: 180px; padding: 0 10px; background: url("../img/btn_03.png") no-repeat right; appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance: none; /*for chrome*/ margin-right: 40px;}.searchDiv .jyzx-all1 { line-height: 35px; height: 30px; float: left; border: 1px solid #ddd; width: 180px; padding: 0 10px; background: url("../img/btn_03.png") no-repeat right; appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance: none; /*for chrome*/ margin-right: 40px;}/* 修改样式 2016-11-29*/.searchDiv .jyzx-all_ { line-height: 35px; height: 35px; float: left; border: 1px solid #ddd; width: 147px; padding: 0 9px; background: url("../img/btn_03.png") no-repeat right; appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance: none; /*for chrome*/ margin-right: 35px;}/* 修改样式 2016-11-29*/.searchDiv .datas_ { line-height: 35px; height: 35px; float: left; border: 1px solid #ddd; width: 150px; background: url("../img/btn_05.png") no-repeat right; margin-right: 35px;}.searchDiv .jylx-all { line-height: 35px; height: 30px; float: left; border: 1px solid #ddd; width: 100px; padding: 0 10px; background: url("../img/btn_03.png") no-repeat right; appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance: none; /*for chrome*/ margin-right: 40px;}.searchDiv .datas { line-height: 35px; height: 30px; float: left; border: 1px solid #ddd; width: 160px; background: url("../img/btn_05.png") no-repeat right; margin-right: 40px;}.searchBtn { float: right !important; border: 1px solid #ddd; background-color: #4387b8; color: #fff; width: 82px; height: 30px; line-height: 30px; text-align: center; cursor: pointer;}.searchBtn1 { float: left !important; border: 1px solid #ddd; background-color: #4387b8; color: #fff; width: 30px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; margin-right: 15px;}.sj-info { overflow: hidden; background-color: #fff; padding: 40px;}.sort { overflow: hidden; margin-top: 1px;}.sort > div { width: 160px; height: 40px;line-height:40px;text-align:center; float: left; font-size: 15px; cursor: pointer;}.sort-def {background-color: #4387b8; color: #fff; border-bottom: 4px solid transparent;border-right: 1px solid #c5d0dc;}.mine.sort2 { background: url("../img/imgbtn-3.png") #f3f3f3 25px 25px no-repeat; border-bottom: 4px solid transparent}.sort2:hover { background: url("../img/imgbtn-3.png") #fff 25px 25px no-repeat; border-bottom: 4px solid #0087ed}.sort3 { background: url("../img/imgbtn-2.png") #f3f3f3 25px 25px no-repeat; border-bottom: 4px solid transparent}.sort3:hover { background: url("../img/imgbtn-2.png") #fff 25px 25px no-repeat; border-bottom: 4px solid #0087ed}.sort4 { background: url("../img/imgbtn-4.png") #f3f3f3 25px 25px no-repeat; border-bottom: 4px solid transparent}.sort4:hover { background: url("../img/imgbtn-4.png") #fff 25px 25px no-repeat; border-bottom: 4px solid #0087ed}.jysj { width: 210px; height: 50px; margin-right: 60px; margin-left: 100px; background-color: #48c3d3; float: left;}.jyje { float: left; width: 210px; height: 50px; margin-right: 60px; background-color: #58b4dd;}.zzje { float: left; width: 210px; height: 50px; margin-right: 40px; background-color: #63cba6;}.sort-select {background-color: #fff; color: #4387b8; border-bottom: 4px solid transparent;border-right: 1px solid #c5d0dc;border-bottom: 4px solid #4387b8;} 0 0
- 一进入页面选中第一个按钮，并展示按钮下的数据
- 一进入页面，默认选中table的第一个tr
- 页面布局div，一进入页面默认选中第一个div
- 大数据下的日志-前台展示：无按钮浏览（无按钮，自动滚屏）
- IOS app中有两个UITabBarController，即在第一个页面有4个按钮，进入子页面底部也有几个按钮
- 页面初始化是让单选按钮选中该选中的
- 空格键和enter键的事件处理（页面存在多个按钮，登陆按钮不是页面的第一个按钮）
- ListView分页展示数据功能一（按钮方式）
- QT之在多个按钮中任选一个按钮，执行被选中的按钮功能
- 我的第一个按钮程序
- 点击按钮进入一个只能选择的页面
- 连点两次按钮进入两次页面的解决方案
- JS判断页面上的单选按钮是否选中
- radio 默认选中， 第二次点击选中的按钮 改变为不选中，并获取值
- 微信小程序--多个按钮选中的联动效果
- 表单中有一个搜索框，有两个radio条件选择，选中第一个时点击提交按钮时就跳转到zs_search.jsp搜索页面，
- .Net 点击按钮实现动态添加行并保持页面的数据不变
- 按钮返回并刷新页面
- java的编译和运行
- JavaScript 求两个时间的天数差
- POJ1190
- madplay 命令
- 【学习笔记】centos6.5svn服务器搭建
- 一进入页面选中第一个按钮，并展示按钮下的数据
- Android初级开发第九讲--Intent最全用法（打开文件跳转页面等）
- Python错误、调试及测试相关备忘
- SpringMVC + security模块 框架整合详解
- 十个值得一试的开源深度学习框架
- Android自定义一个属于自己的时间钟表
- windows 如何安装pip
- setFirstDayOfWeek 不起作用,疑惑?
- mysql查询语句select-（null，not null，is null和is not null）
