Bootstrap 填充Json數(shù)據(jù)的實例代碼

更新時間：2017年01月11日 16:29:15 作者：CharlinGod

本篇文章主要介紹了Bootstrap 填充Json數(shù)據(jù)的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹Bootstrap 填充Json數(shù)據(jù)，具體如下：

一、如圖：

二、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">&#xe613;</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">&#xe613;</i>
        </div> 
        <div class="form-group">
          <a href="javascript:void(0);" class="button bPrimary" id="iconsearch" ><i class="iconfont"></i>查詢</a>
        </div>
      </form>
      <div class="col-xs-6 nospace" >
      <div class="panel panel-default">
         <div class="panel-heading">統(tǒng)計圖表</div>
         <div class="panel-body" style="border:0px;">
          <img id="JPGE_pdId" src="" title='統(tǒng)計圖表' alt='統(tǒng)計圖表'/> 
         </div>
      </div>
      </div>
      <div class="col-xs-6 nospace"> 
      <div class="panel panel-default">
         <div class="panel-heading">統(tǒng)計數(shù)據(jù)</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">數(shù)據(jù)類型</th>
                <th data-field="item1">流程名稱</th>
                <th data-field="item2">數(shù)值</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數(shù)據(jù)格式:

{
  "state": 200,
  "mess": "",
  "startDate": "2016-10-04",
  "endDate": "2016-11-03",
  "imgUrl": "/workflow/reportChart/201611/03/5e39452448594fe8a8579d1993029759.jpg",
  "dataGrid": [
    {
      "item0": "開單數(shù)",
      "item1": "申請1",
      "item2": "1"
    },
    {
      "item0": "開單數(shù)",
      "item1": "申請2",
      "item2": "15"
    }
  ]
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: