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加载方法,有 ...
随机推荐
- BZOJ1775[USACO 2009 Dec Gold 3.Video Game Troubles]——DP
题目描述 输入 * 第1行: 两个由空格隔开的整数: N和V * 第2到第N+1行: 第i+1行表示第i种游戏平台的价格和可以在这种游戏平台上面运行的游 戏.包含: P_i, G_i还有G_i对由空格 ...
- UVA-1572
解题思路: 之前看到的骚操作,主要思想就是把两个面合在一起看成两个点相连,最后只要找到一个环就可以无限克隆这个环使得无限延迟. 把符号变成数字如A-变为0,A+变为1,则0^1=1 ,这两个符号可以通 ...
- MT【89】三棱锥的体积公式
评:已知对棱的距离以及此对棱边长,夹角就可以求出该三棱锥的体积.这把三棱锥的放到平行六面体里的做法是非常常见的.
- 【AGC005F】简单的问题 Many Easy Problems
Description 链接 Solution 对于每个\(k\),统计任选\(k\)个点作为关键点的"最小生成树"的大小之和 正向想法是枚举或者计算大小为\(x\).叶子数目为\ ...
- luogu4849 寻找宝藏 (cdq分治+dp)
设f[i]是已经走到i号点的值. 先要给第四维离散化.然后去重 第一维排序,第二维cdq分治,第三维cdq分治,第四维树状数组,找到满足j(x,y,z,w)<=i(x,y,z,w)的j,给i统计 ...
- Luogu 1437 [HNOI2004]敲砖块 (动态规划)
Luogu 1437 [HNOI2004]敲砖块 (动态规划) Description 在一个凹槽中放置了 n 层砖块.最上面的一层有n块砖,从上到下每层依次减少一块砖.每块砖都有一个分值,敲掉这块砖 ...
- C++ 中的导致编译错误汇总
多少年来,各路英雄好汉,八方神犇大佬,在CE中饮恨退役. OI的CE,还是那样熟悉的味道. (博主只能想到这么多,欢迎大家来补充) 1.变量名和内置函数冲突?!?! C++内置函数很多很多,许多你不知 ...
- SQL: 从一个表随机读取一行或几行记录的问题
比如ms sql 2000,随机读取了一行记录: SELECT TOP 1 * FROM [tablename] ORDER BY NEWID() 遇到的问题是,如果这个表记录不多,比如几十或几百.几 ...
- 通过url传递参数如果汉字乱码采用的方法
urlCodeDeal 方法把汉字编码, 在Jsp界面通过Escape.unescape方法,将编码反编译成汉字. 下面是urlCodeDeal方法: //UrlCode 处理代码 function ...
- 2范数和F范数的区别
2范数和F范数是不同的. 2范数表示矩阵或向量的最大奇异值,max(svd(X)) 而 F范数表示矩阵所有元素平方和的开方根 sqrt(∑_(x_(i,j∈X))▒x_(i,j)^2 )