Bootstrap 填充Json数据的实例代码
发布于 2017-06-15 03:58:36 | 166 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Bootstrap v3教程，程序狗速度看过来！
Bootstrap Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
本篇文章主要介绍了Bootstrap 填充Json数据的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍Bootstrap 填充Json数据，具体如下：
一、如图：
二、html代码：
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<div class="content">
<div class="table-responsive">
<div class="container-fluid" >
<div class="row-fluid">
<form class="form-inline well well-sm" id="monitor_form" role="form">
<div class="form-group pdate">
<label for="date">起日期：</label><input type="text" id="startDate" name="startDate" class="form-control layer-date" data-options="editable:false,required:true"/>
<i class="iconfont"></i>
</div>
<div class="form-group pdate">
<label for="date">止日期：</label><input type="text" id="endDate" name="endDate" class="form-control layer-date" data-options="editable:false,required:true"/>
<i class="iconfont"></i>
</div>
<div class="form-group">
<a href="javascript:void(0);" class="button bPrimary" id="iconsearch" ><i class="iconfont">n</i>查询</a>
</div>
</form>
<div class="col-xs-6 nospace" >
<div class="panel panel-default">
<div class="panel-heading">统计图表</div>
<div class="panel-body" style="border:0px;">
<img id="JPGE_pdId" src="" title='统计图表' alt='统计图表'/>
</div>
</div>
</div>
<div class="col-xs-6 nospace">
<div class="panel panel-default">
<div class="panel-heading">统计数据</div>
<div class="panel-body noborder" style="border:0px;">
<!-- <table id="monitor-table" class="table-striped table-hover" data-mobile-responsive="true"></table> -->
<table id="monitor-table" class="table table-striped table-hover ">
<thead>
<tr>
<th data-field="item0">数据类型</th>
<th data-field="item1">流程名称</th>
<th data-field="item2">数值</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
三、js代码：
<script>
var $table = $("#monitor-table");
$(function(){
refFlushChart();
$("#iconsearch").click(function(){
refFlushChart();
});
});
function refFlushChart(){
var params = $("monitor_form").serialize();
var url = "${ctx}/workflow/central!monitorJPEG.action";
submitForm(params,url, function(data){
if( data.mess!=null&&data.mess.length > 0 ){
Comfirm.show("提示", data.mess);
}
$("#JPGE_pdId").attr("src",data.imgUrl);
//var dataObj = eval("(" + JSON.stringify(data.dataGrid) + ")");
var dataObj = data.dataGrid;
alert(dataObj.length);
//$table.bootstrapTable('load', jQuery.parseJSON(data.dataGrid));
$.each(dataObj,function(index,item){
var $tr = $('<tr>');
$.each(item,function(name,val){
var $td = $('<td>').html(val);
$tr.append($td);
});
$table.append($tr);
});
});
}
四、json数据格式:
{
"state": 200,
"mess": "",
"startDate": "2016-10-04",
"endDate": "2016-11-03",
"imgUrl": "/workflow/reportChart/201611/03/5e39452448594fe8a8579d1993029759.jpg",
"dataGrid": [
{
"item0": "开单数",
"item1": "申请1",
"item2": "1"
},
{
"item0": "开单数",
"item1": "申请2",
"item2": "15"
}
]
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phperz。
推荐阅读
最新资讯