您的位置：首页 > Web前端 > JavaScript

js向jsp页面循环放值

2015-12-03 11:24 453 查看 
</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);
}



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航