bootstrap-table插件数据加载方式
data-url
直接使用data-url在table标签中定义
使用load方法加载数据
$(“#finishingTask”).bootstrapTable(‘load’,data);
//data为json数组几个实例
通过data-url从本地json文件取值,也可以直接从后台取值,后台返回值格式必须为json数组形式,如下:
[{"FormID":"402899814d9e4fea014d9e500ffc0001","FormCode":"10000000","CreateByName":"chen","RequestByName"
:"b","ReceiveByName":"f","ReimburseAmount":"5.00","CreateDate":"2015-07-03"},{"FormID":"402899814daa65d0014daa65e26e0001"
,"FormCode":"10000001","CreateByName":"chen","RequestByName":"b","ReceiveByName":"g","ReimburseAmount"
:"3.00","CreateDate":"2015-06-07"},{"FormID":"402899814dce2120014dce2125f80001","FormCode":"10000002"
,"CreateByName":"chen","RequestByName":"b","ReceiveByName":"f","ReimburseAmount":"10.00","CreateDate"
:"2015-06-07"},{"FormID":"402899814de68b77014de68b7c1d0001","FormCode":"10000003","CreateByName":"chen"
,"RequestByName":"cjj","ReceiveByName":"2","ReimburseAmount":"33.00","CreateDate":"2015-06-13"},{"FormID"
:"402899814e541ffc014e542036030001","FormCode":"10000004","CreateByName":"chen","RequestByName":"44"
,"ReceiveByName":"","ReimburseAmount":".00","CreateDate":"2015-07-03"},{"FormID":"402899814e542774014e5428b1c90001"
,"FormCode":"10000005","CreateByName":"chen","RequestByName":"2","ReceiveByName":"","ReimburseAmount"
:".00","CreateDate":"2015-07-03"}]
<table id="finishingTask" data-toggle="table"
data-url="../data/checkingTask.json"
data-click-to-select="true" data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-toolbar="#toolbar"
data-query-params="queryParams"
data-pagination="true"
data-halign="center">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-align="center" data-field="superviseID" class="col-sm-1">ID</th>
<th data-field="superviseName">未完成任务</th>
<th data-formatter="operateBtn" data-events="operateEvents" class="col-md-2">评价</th>
</tr>
</thead>
</table>
| ID | 未完成任务 | 评价 |
|---|
如果后台传递的数据格式为json对象,需要在前台解析,并通过load方法将数据写入表格,load方法接收的数据格式如下:
下面是通过ajax从后台获取数据,并通过load方法给table赋值的例子,后台使用spring框架
@RequestMapping(value = "/getAllSuperviseInformjson",method=RequestMethod.GET)
public @ResponseBody Object getAllSuperviseInformjson(ModelMap model) {
List<MaritimeSupervise> list = new ArrayList<MaritimeSupervise>();
list = mpli.getAllSupervise();
System.out.println("getAllAdministratCoercionInformjson:"+JSONArray.fromObject(list).toString());
model.addAttribute("msg",list);
return model;
}
jquery.ajax取值
$.ajax(
{
type:"GET",
url:"http://localhost:8080/maritime/rest/getAllSuperviseInformjson",
contentType: 'application/json',
dataType:"json",
success:function(json){
var data = json.msg;//要传入table的数据值
//bootstrap-Table获取数据
//finishingTask为table的id $("#finishingTask").bootstrapTable('load',data);
},
error:function(){
alert("错误");
}
}
)
bootstrap-table插件数据加载方式的更多相关文章
- bootstrap table插件动态加载表头
这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...
- Bootstrap Table表格一直加载(load)不了数据-解决办法
bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...
- 浅谈Entity Framework中的数据加载方式
如果你还没有接触过或者根本不了解什么是Entity Framework,那么请看这里http://www.entityframeworktutorial.net/EntityFramework-Arc ...
- [转]bootstrap的table插件动态加载表头
原文地址:https://blog.csdn.net/abubu123/article/details/78060321 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表 ...
- TouTiao开源项目 分析笔记8 图解分析数据加载方式
1.整体构架 1.1.以一个段子页面为例,列出用到的主要的类,以图片的方式展示. 1.2.基础类 这里最基础的接口有: IBaseView<T>==>定义了5个方法. 然后最基础 ...
- EF的三种数据加载方式
EF的关联实体加载有三种方式:Lazy Loading,Eager Loading,Explicit Loading,其中Lazy Loading和Explicit Loading都是延迟加载. (一 ...
- iOS App中数据加载的6种方式
我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...
- APP中数据加载的6种方式-b
我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...
- MPP 二、Greenplum数据加载
Loading external data into greenplum database table using different ways... Greenplum 有常规的COPY加载方法,有 ...
随机推荐
- ceph 搭建nginx负载3个对象网关
nginx.conf user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid ...
- Leonardo's Notebook UVALive - 3641(置换)
题意: 给出26个大写字母的置换B,问是否存在一个置换A,使得A2 = B 解析: 两个长度为n的相同循环相乘,1.当n为奇数时结果也是一个长度为n的循环:2. 当n为偶数时分裂为两个长度为n/2 ( ...
- LOJ #6202. 叶氏筛法(min_25 筛)
题意 求 \([L, R]\) 之间的素数之和 . \(L≤10^{10},2×10^{10} \le R \le 10^{11}\) 题解 一个有点裸的 min_25筛 ? 现在我只会筛素数的前缀和 ...
- 获取外网出口ip
curl ifconfig.me 或 curl cip.cc
- [luogu4403][bzoj1271][BJWC2008]秦腾与教学评估
题目描述 在秦腾进入北京大学学习的第一个学期,就不幸遇到了前所未有的教学评估.在教学评估期间,同学们被要求八点起床,十一点回宿舍睡觉,不准旷课,上课不准迟到,上课不准睡觉--甚至连著名的北大三角地也在 ...
- 洛谷 P3225 [HNOI2012]矿场搭建 解题报告
P3225 [HNOI2012]矿场搭建 题目描述 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤 ...
- 1. vim 的安装及配置
简介 vim是什么 vim是一款功能强大.支持各种插件.配置极为灵活的编辑器,且支持多种主流OS(linux.Unix.mac.windows),可用来各种编程预言的coding和文件编辑,用习惯了v ...
- redis中的数据类型
redis不是一个纯文本kv存储,实际上,它是一个数据结构服务,支持不同类型的value. 包含以下类型: 1.Binary-safe strings. 二进制安全的字符串 2.Lists: coll ...
- P1339 热浪 最短路径模板题
这么naive的题面一看就是最短路模板题~~~ ok.首先是floyd算法,tts,记得把k放在最外面就行了. #include <cstdio> #include <cstring ...
- 使用electron为贪吃蛇游戏创建全局快捷键
上图就是我们的简体版贪吃蛇游戏,我们可以看到使用键盘上面的上下左右可以对贪吃蛇进行控制. The picture above is our simplified version of Snake Ea ...