js向jsp页面循环放值

最新推荐文章于 2022-12-27 14:04:05 发布

FiveMillion

最新推荐文章于 2022-12-27 14:04:05 发布

阅读量1.2k

点赞数

分类专栏： jquery javaScript 文章标签： jquery JavaScript jsp

本文链接：https://blog.csdn.net/u011752272/article/details/50157435

版权

javaScript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 1 订阅

订阅专栏

</pre>今天做图表类型切换的时候，有个表格统计类型的，主要是把，从后台获取得到的数据，通过js放在jsp中，有个哥们这么写的，觉着很新鲜，用的是 highcharts，但表格和 highcharts 毫无关系，代码如下<p></p><p></p><p>jsp页面：</p><p></p><pre name="code" class="html"><!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html lang="en">
    <head>
       <link rel="stylesheet" href="${baseURL}/css/client/statistics.css" type="text/css"/>
    </head>
    <body>
     <div class="container" style="width:1265px;padding:20px 0px">
        <div class="row"> 
             <div class="col-xs-6">
               <div style="padding-bottom:6px;border-bottom:1px solid #ddd"> 
                 <div id="chart11" style="height:240px;margin-top:32px;"></div><!-- 折线图 -->
                 <div id="chart12" style="height:240px;margin-top:32px;display:none"></div><!-- 柱状图 -->
                 <div id="chart13" style="height:240px;margin-top:32px;display:none"></div><!-- 表格统计 -->
           </div> 
           
       </div>
   </div>
<script type="text/html" id="dataTemplate">
<table class="table table-bordered" style="font-size:13px;">
   <thead>
    <tr>
       <th>类别</th>
        <?for(i=0;i<data.categories.length;i++){?>
       <th><?=data.categories[i]?></th>
       <?}?>
    </tr>
  </thead>
  <tbody>
  <?for(j=0;j<data.data.length;j++){?>
    <tr>
       <td><?=data.data[j].name?></td>
       <?for(k=0;k<data.data[j].data.length;k++){?>
          <td><?=data.data[j].data[k]?></td>
       <?}?>
    </tr>
  <?}?>
  </tbody>
</table>
</script>
</body>

</html>

js:

   function datastageStat(){
    	var success = function(datas) {
	    //datas = "{"categories":['新闻', '论坛', '博客', '微博', '微信','新闻app'],"data":[{"color":"#2EC8CA","data":[1268,0,0,0,0,0],"name":"昨日"}, {"color":"#5BB0F0","data":[389,0,0,0,0,0],"name":"今日"}, {"color":"#D97A80","data":[76844,95181,487,10063,0,5027],"name":"累计"}]}"	
    	     datas = eval("(" + datas + ")");
    	     $(".chart1_loding").hide();
    	     //入库总量统计-----表格
    	     var result = {'data' : datas};
			 var htm=template.render("dataTemplate", result);
			 $("#chart13").html(htm);
    	     //入库总量统计-----柱状图
    	     $('#chart12').highcharts({
                 chart: {
                    type: 'column'
                 },
                 title: {
                    text: ''
                 },
                 exporting: {
      	            enabled:false
      	        },
                 xAxis: {
                    categories:datas.categories
                 },
                 yAxis: {
                   min: 0,
                   title: {
                    text: ''
                    }
                 },    
                plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                    }
                },
                series:datas.data
             });
    	     //入库总量统计-----折线图
    	     $('#chart11').highcharts({
    	         title: {
    	             text: '',
    	             x: -20 //center
    	         },
    	         exporting: {
      	            enabled:false
      	        },
    	         xAxis: {
    	             categories:datas.categories
    	         },
    	         yAxis: {
    	             title: {
    	                 text: ''
    	             },
    	             min: 0, 
    	             plotLines: [{
    	                 value: 0,
    	                 width: 1,
    	                 color: '#2EC8CA'
    	             }]
    	         },
    	         legend: {
    	        	 layout: 'horizontal',
      	            align: 'center',
      	            verticalAlign: 'bottom',
      	            borderWidth: 0
      	        },
    	         series:datas.data
    	     });
        };
        var error = function() {
        };
        $.baseAjax(getBaseURL() + "/client/Statistics!datastageStat.action", "POST",{}, success, error); 
     }

action 后台数据：

public void datastageStat() {
		String categories = "['新闻', '论坛', '博客', '微博', '微信','新闻app']";
		List<Integer> keyLists = new ArrayList<Integer>();
		keyLists.add(11);
		keyLists.add(13);
		keyLists.add(14);
		keyLists.add(17);
		keyLists.add(6);
		keyLists.add(7);// 按序加入
		List<ChartData<Long>> chartDataList = new ArrayList<ChartData<Long>>();

		ChartData<Long> chartDataYY = new ChartData<Long>();// 昨日
		ChartData<Long> chartDataTT = new ChartData<Long>();// 今日
		ChartData<Long> chartDataAA = new ChartData<Long>();// 累计
		chartDataYY.setName("昨日");
		chartDataTT.setName("今日");
		chartDataAA.setName("累计");
		chartDataYY.setColor("#2EC8CA");
		chartDataTT.setColor("#5BB0F0");
		chartDataAA.setColor("#D97A80");

		List<Long> listYY = new ArrayList<Long>();// 昨日
		List<Long> listTT = new ArrayList<Long>();// 今日
		List<Long> listAA = new ArrayList<Long>();// 累计
		// 依次获取某种类型资产的下的所有规则的入库数量
		if (ObjectUtil.isNotEmpty(keyLists)) {
			for (Integer key : keyLists) {// 遍历资产类型
				// 依次 获取昨天 今天 累计
				StatDatastage statDatastage = new StatDatastage();
				Long organId = getOrganId();
				if (organId != 1) {
					statDatastage.setOrganId(organId);
				}
				statDatastage.setAssetType(String.valueOf(key));
				statDatastage.setTimeRange("Y");
				List<StatDatastage> dataListY = statDatastageService
						.list(statDatastage);
				if (ObjectUtil.isNotEmpty(dataListY)) {
					long sum = 0;
					for (StatDatastage sd : dataListY) {
						sum += sd.getNum();
					}
					listYY.add(sum);// 昨日
				}

				statDatastage.setTimeRange("T");
				List<StatDatastage> dataListT = statDatastageService
						.list(statDatastage);
				if (ObjectUtil.isNotEmpty(dataListT)) {
					long sum = 0;
					for (StatDatastage sd : dataListT) {
						sum += sd.getNum();
					}
					listTT.add(sum);// 今日
				}
				statDatastage.setTimeRange("A");
				List<StatDatastage> dataListA = statDatastageService
						.list(statDatastage);
				if (ObjectUtil.isNotEmpty(dataListA)) {
					long sum = 0;
					for (StatDatastage sd : dataListA) {
						sum += sd.getNum();
					}
					listAA.add(sum);// 累计
				}
			}
		}
		chartDataYY.setData(listYY);
		chartDataTT.setData(listTT);
		chartDataAA.setData(listAA);
		chartDataList.add(chartDataYY);
		chartDataList.add(chartDataTT);
		chartDataList.add(chartDataAA);
		String jsonStr = "{\"categories\":" + categories + ",\"data\":"
				+ chartDataList.toString() + "}";
		writer(jsonStr);
	}