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"></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"
    }
  ]
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • ASP.NET中实现把Json数据转换为ADO.NET DataSet对象

    Json数据转换为ADO.NET DataSet其实方法有很多,Newtonsoft.Json也提供了DataSet的Converter用以转换Json数据.但是有些情况下DataSet Converter并不管用,而且也不一定能够满足项目需要.这里介绍另一种简单有效的方法,能够方便快速地将Json数据转为ADO.NET DataSet. 设计 事实上Newtonsoft.Json已经提供了一套完整的Json数据文档结构,Newtonsoft.Json.Linq命名空间下提供了这种文档结构的对象

  • js遍历json的key和value的实例

    原生js遍历json对象 遍历json对象: 无规律: <script> var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}]; for(var i=0,l=json.length;i<l;i++){ for(var key in json[i]){ alert(key+':'+json[i][key]); } } </script> 有规律: packJson = [ {"name":&q

  • 微信小程序通过api接口将json数据展现到小程序示例

    实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上. 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上. 1.用到的知识点 <1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识 2.实现原理 首先,先看一下这个请求函数 wx.request({ url: '******',

  • js实现将json数组显示前台table中

    在最近的学习中遇到一个小问题,如何把JSON数组显示在前台的table中,经过一番借鉴和学习之后终于解决了这个问题.具体的代码如下: (前提:利用ajax获取过来的JSON字符串必须是规范的,这样才能解析正确.后台获取数据库中数据的代码省略了) 1.前台JS代码(使用之前引入JQuery的js库文件) $.ajax({ type: "GET", url: "UserList.ashx?Action=List",//利用ajax请求后台的并返回值 // data: &

  • .Net基于MVC4 Web Api输出Json格式实例

    本文实例讲述了.Net基于MVC4 Web Api输出Json格式的方法,分享给大家供大家参考.具体实现方法如下: 1.Global 中增加json输出 复制代码 代码如下: GlobalConfiguration.Configuration.Formatters.JsonFormatter.MediaTypeMappings.Add(new QueryStringMapping("json", "true", "application/json"

  • Asp.net配合easyui实现返回json数据实例

    本文实例讲述了Asp.net配合easyui实现返回json数据的实现方法.分享给大家供大家参考.具体如下: 最近想用asp.net配合easyui开发一个小框架,然后再用到easyui的combobox的时候出现了一个问题,总所周知,easyui的文档上给出的combobox的格式是 复制代码 代码如下: <input class="easyui-combobox"               name="language"              dat

  • ASP.NET中MVC使用AJAX调用JsonResult方法并返回自定义错误信息

    一.如何用AJAX调用JsonResult方法 比如FuckController中添加有个返回JsonResult类型的方法FuckJson(): 复制代码 代码如下: <span class="kwd">public<span class="pln"> <span class="typ">JsonResult<span class="pln"> <span class=&

  • 简单谈谈MySQL5.7 JSON格式检索

    MySQL5.7版本开始支持JSON格式,在创建表时,可以指定列表的数据类型为JSON,但是如何在JSON格式上创建索引呢?? 本人做了一个简单测试. 第一步:建立一个包含JSON类型的表: CREATE TABLE json_test` ( id` int (8) NOT NULL AUTO_INCREMENT, content` json NOT NULL , PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 第二步:初始化数据

  • JSON在ASP.NET中使用方法

    Json.NET的简单介绍 首先介绍一个为方便在.NET中使用JSON的API,Json.NET.它方便我们读取从浏览器流向服务器的JSON对象,也方便在响应流中写入JSON对象. Json.NET只提供了服务器端的方法,主要有实现JSON文本与XML互相转换的类,有自定义读写JSON的JsonReader类和JsonWriter类,还有一个非自定义读写JSON的JavaScriptSerializer类. ASP.NET AJAX中,服务器端由JavaScriptSerializer类的几个方

  • 浅谈C#.NET、JavaScript和JSON

    写在前面 全部手打,没有多余的话,全部干货,基本上用到的我就记录了. 一.什么是JSON JSON:JavaScript Object Notation,是一种轻量级的数据交互格式,主要用于数据传输. 二.JSON语法规则 1.数据由键值对(映射)关系表示,使用 ":" 表示:   例子:"name" : "赵大". 2.数据之间使用 "," 分隔: 例子:"name" : "赵大",

随机推荐