@搬砖的郝先生 2017-04-09 06:37 采纳率: 0%
浏览 1255

bootstarp动态下拉框的实现

图片说明

```<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/common/common.jsp"%>
<%@page import="java.text.SimpleDateFormat"%>


<%
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
String date = format.format(new Date());
%>




短信网关统计







渠道名称:
//name:向后台传递的数据
全部
BAM系统
积分俱乐部
移动统一门户网站
积分后台






    <div>
      <div class="col-sm-4">
        <table id="smstable" class="table table-bordered"></table>
    </div>
    <div class="col-sm-4" align="right">
    <div style="width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; position: relative; background: transparent;"
            id="querySmsGatewayStatistics">
    </div>
    </div>
    </div>

$(function() { var start = { elem : '#queryDate', //选择ID为START的input format : 'YYYY-MM-DD', //自动生成的时间格式 min : '1999-01-01', //设定最小日期为当前日期 max : laydate.now(), //最大日期 istime : true, //必须填入时间 istoday : true, //是否是当天 start : laydate.now(0, "YYYY-MM-DD") //设置开始时间为当前时间 }; laydate(start); }); /* 初始化表格 */ $(function() { var table = new smstable(); table.init(); }); var smstable = function() { var tabledemo = new Object(); tabledemo.init = function() { $('#smstable').bootstrapTable({ url : "<%=request.getContextPath()%>/SmsGatewayStatistics/SmsGatewayStatistics1.do",// 请求的HTML页的URL地址。 data : {"queryDate" : $("queryDate").val()},//(Map) :发送至服务器的 key/value 数据 type : "POST",//客户端请求的类型(JSON,XML,等等) dataType : "json", columns : [ {field : 'orgId',title : '渠道编码'}, {field : 'orgName',title : '渠道名称'}, {field : 'amount',title : '总量'} ], }); }; return tabledemo; } /* 总量echarts图 */ var myChart = echarts.init(document.getElementById('querySmsGatewayStatistics')); function initCharts(){ $.ajax({ url:"<%=request.getContextPath()%>/SmsGatewayStatistics/SmsGatewayStatistics1.do", data:{"queryDate" : $("#queryDate").val()}, type:"POST", success:function(json){ var orgId = [];//渠道编码 var orgName = [];//渠道名称 var amount = [];//总量 /* 循环除数组的数据 */ for(var i = 0;i<json.length;i++){ orgId[i] = json[i].orgId;//渠道编码 orgName[i] = json[i].orgName;//渠道名称 amount[i] = json[i].amount;//总量 } /* 柱状图 */ option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data:['总量'] //表头数据 }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['${orgName}'] //x轴现实的数据 } ], yAxis : [ { type : 'value' } ], series : [ { name:'总量', type:'bar', data:amount,//这里写变量值 markLine : { lineStyle: { normal: { type: 'dashed' } }, } } ] }; //封装以上属性 myChart.setOption(option , function (param){ var hz = param.name; alert(hz) }); //查看一个对象中拥有的属性 myChart.on("click", function (param){ var ob = eval(param); var Property=""; var hz = param.name; var hzz = param.seriesIndex; alert(hz) alert(hzz) }); } //对应success })//对应ajax }//对应function

我的实现思路是:在数据库中查询出来的数据动态的展示到下拉框里边,当用户点击这个下拉框的时候地下表格里边弹出的是点击节点工程的表格数据,


  • 写回答

1条回答 默认 最新

  • qq_34192445 2017-04-09 06:40
    关注

    下拉框的选中事件文字改变触发,然后获取其选中的值,在查询

    评论

报告相同问题?

悬赏问题

  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决