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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 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
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php导入导出excel实例
2013/10/25 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
python分析网页上所有超链接的方法
2015/05/08 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
详解Python循环作用域与闭包
2019/03/21 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
个人求职信范文分享
2014/01/06 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
行政文员岗位职责
2015/02/04 职场文书
护士年终个人总结
2015/02/13 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP