Bootstrap 填充Json数据的实例代码


Posted in Javascript onJanuary 11, 2017

本文介绍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"
    }
  ]
}

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

Javascript 相关文章推荐
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
WebSocket实现简单客服聊天系统
May 12 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
vuex操作state对象的实例代码
Apr 25 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
原生js实现放大镜效果
Jan 11 #Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 #Javascript
微信小程序开发经验总结(推荐)
Jan 11 #Javascript
bootstrap手风琴制作方法详解
Jan 11 #Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 #Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 #Javascript
js仿iphone秒表功能 计算平均数
Jan 11 #Javascript
You might like
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
浅谈Node.js 沙箱环境
2018/05/15 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
Python中的枚举类型示例介绍
2019/01/09 Python
Python列表与元组的异同详解
2019/07/02 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
Java面试题:为什么要用Java
2012/05/11 面试题
高职助产应届生自荐信
2013/09/24 职场文书
自我鉴定范文200字
2013/10/02 职场文书
物业保安员岗位职责
2014/03/14 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Oracle锁表解决方法的详细记录
2022/06/05 Oracle