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加载方法,有 ...
随机推荐
- poj2632 【模拟】
In a modernized warehouse, robots are used to fetch the goods. Careful planning is needed to ensure ...
- OCIEnvCreate 失败,返回代码为 -1,但错误消息文本不可用
解决方案:oracle 版本太低,请装11G或以上版本..
- 【BZOJ4000】【LOJ2104】【TJOI2015】棋盘 (状压dp + 矩阵快速幂)
Description 有一个\(~n~\)行\(~m~\)列的棋盘,棋盘上可以放很多棋子,每个棋子的攻击范围有\(~3~\)行\(~p~\)列.用一个\(~3 \times p~\)的矩阵给出了 ...
- 自学Linux Shell3.2-切换目录命令cd
点击返回 自学Linux命令行与Shell脚本之路 3.2-切换目录命令cd 当登录系统并获得shell命令提示符后,你通常位于自己的主目录中. 使用pwd命令验证: pwd命令以绝对路径的方式显示用 ...
- 一个数学不好的菜鸡的快速沃尔什变换(FWT)学习笔记
一个数学不好的菜鸡的快速沃尔什变换(FWT)学习笔记 曾经某个下午我以为我会了FWT,结果现在一丁点也想不起来了--看来"学"完新东西不经常做题不写博客,就白学了 = = 我没啥智 ...
- BZOJ 2434 阿狸的打字机 | AC自动机
题目戳这里 AC自动机上有神奇的东西叫做fail指针--所有fail指针连起来恰好构成一棵以1为根的树! 而这道题问x在y中出现过多少次,就是问Trie树上根到y的结束节点的路径上有多少节点能通过跳f ...
- BZOJ2150 部落战争 【带上下界最小流】
题目链接 BZOJ2150 题解 复习: 带上下界网络流两种写法: 不建\(T->S\)的\(INF\)的边,即不考虑源汇点,先求出此时超级源汇的最大流,即无源汇下最大的自我调整,再加入该边,求 ...
- 监控(1)-企业常用服务监控shell
-----------------企业监控------------------------主动探测监控(“监控机”主动探测“被监控机”)HTTP服务器监控#!/bin/shLANG=C#被监控服务器. ...
- Unity3d-AngryBots实例解读
最近粗略研究了下Unity3d自带的例子AngryBots,记录一下,部分内容摘自http://oulehui.blog.163.com/blog/static/7961469820125251051 ...
- DIVCNT2&&3 - Counting Divisors
DIVCNT2 - Counting Divisors (square) DIVCNT3 - Counting Divisors (cube) 杜教筛 [学习笔记]杜教筛 (其实不算是杜教筛,类似杜教 ...