本文介绍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">n</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" } ] }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
问题内容: 建议使用JQuery数据表。现在,我需要用从控制器发送的一堆json对象填充网格。我如何从JS在网格上发送此数据 更新 我已经找到了这些链接,但是我不知道如何实现它。 问题答案: 您应该使用JQuery DataTable sAjaxSource属性来指定ajaxsource,在这种情况下,它将是/ HomeReturnJsonData 以下是一个例子
series(string $value,[ string $categories]) string $value $config = ['path' => './tests']; $fileObject = new \Vtiful\Kernel\Excel($config); $fileObject = $fileObject->fileName('tutorial.xlsx'); $
factory 辅助函数 必须 使用 factory 方法来做数据填充,因为是框架提倡的,并且可以同时为测试代码服务。 运行效率 开发数据填充时,必须 特别注意 php artisan db:seed 的运行效率,否则随着项目的代码量越来越大,db:seed 的运行时间会变得越来越长,有些项目多达几分钟甚至几十分钟。 原则是: Keep it lighting speed. 只有当 db:seed
所以我用Java处理这些数据: 我需要将其转换为JSON: 但是我不知道怎么做。 目前我认为这是最好的方法: 但我不确定如何使用Hashmap实现这一点。我知道是这样的: 但确切的语法,以及如何将其与其他数据一起添加,我无法计算。有什么想法吗?
问题内容: 我有一个JSON请求,该请求从youtube返回一个响应,其中包含对特定视频的评论。我目前有3种文本视图:一种用于名称/上载器,一种用于内容,一种用于发布日期- 然后用我的JSON响应中的数据填充。 我的问题是-仅出现第一个评论,发布日期和上传者。 我相信我将需要用列表视图替换我的textviews并将其解析为3个字段-我只是不知道如何。 爪哇 公共类Player扩展了YouTubeB
本文向大家介绍BootStrap中的table实现数据填充与分页应用小结,包括了BootStrap中的table实现数据填充与分页应用小结的使用技巧和注意事项,需要的朋友参考一下 BootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化。最近后台使用此插件做了一个表格应用,做个总结。 1.使用方法 可以通过又拍云提供的CD