Bootstrap 填充Json数据的实例代码

二、html代码：

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <div> <div> <div > <div> <form role="form"> <div> <label for="date">起日期：</label><input type="text" data-options="editable:false,required:true"/> <i>&#xe613;</i> </div> <div> <label for="date">止日期：</label><input type="text" data-options="editable:false,required:true"/> <i>&#xe613;</i> </div> <div> <a href="javascript:void(0);" ><i></i>查询</a> </div> </form> <div > <div> <div>统计图表</div> <div> <img src="" title='统计图表' alt='统计图表'/> </div> </div> </div> <div> <div> <div>统计数据</div> <div> <!-- <table data-mobile-responsive="true"></table> --> <table> <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" } ] }