@搬砖的郝先生 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
    关注

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

    评论

报告相同问题?

悬赏问题

  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面