1. data-url

    直接使用data-url在table标签中定义

  2. 使用load方法加载数据 
    $(“#finishingTask”).bootstrapTable(‘load’,data); 
    //data为json数组

  3. 几个实例


通过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插件数据加载方式的更多相关文章

  1. bootstrap table插件动态加载表头

    这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...

  2. Bootstrap Table表格一直加载(load)不了数据-解决办法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...

  3. 浅谈Entity Framework中的数据加载方式

    如果你还没有接触过或者根本不了解什么是Entity Framework,那么请看这里http://www.entityframeworktutorial.net/EntityFramework-Arc ...

  4. [转]bootstrap的table插件动态加载表头

    原文地址:https://blog.csdn.net/abubu123/article/details/78060321 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表 ...

  5. TouTiao开源项目 分析笔记8 图解分析数据加载方式

    1.整体构架 1.1.以一个段子页面为例,列出用到的主要的类,以图片的方式展示. 1.2.基础类 这里最基础的接口有:   IBaseView<T>==>定义了5个方法. 然后最基础 ...

  6. EF的三种数据加载方式

    EF的关联实体加载有三种方式:Lazy Loading,Eager Loading,Explicit Loading,其中Lazy Loading和Explicit Loading都是延迟加载. (一 ...

  7. iOS App中数据加载的6种方式

    我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...

  8. APP中数据加载的6种方式-b

    我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...

  9. MPP 二、Greenplum数据加载

    Loading external data into greenplum database table using different ways... Greenplum 有常规的COPY加载方法,有 ...

随机推荐

  1. Luogu5155 USACO18DEC Balance Beam(概率期望+凸包)

    假设已经求出了在每个点的最优期望收益,显然最优策略是仅当移动一次后的期望收益>当前点收益时移动.对于初始点,其两边各存在一个最近的不满足上述条件的位置,因此从初始点开始随机游走,直到移动到这两个 ...

  2. BZOJ2001 HNOI2010城市建设(线段树分治+LCT)

    一个很显然的思路是把边按时间段拆开线段树分治一下,用lct维护MST.理论上复杂度是O((M+Q)logNlogQ),实际常数爆炸T成狗.正解写不动了. #include<iostream> ...

  3. day9 集合操作

    去重 s = set(python_1) # 用set会变成集合,集合自带去重能力 print(s) python_1 = list(s) # 在用list还原成列表.但是会打乱顺序 print(py ...

  4. 删除linux下的指定文件

    要求:删除linux下2天前的指定文件 find 文件问题:在 tmp 目录下有大量包含 picture_* 的临时文件,每天晚上 2:00 对一天前的文件进行清理.之前在 crontab 下跑如下脚 ...

  5. iOS 【终极方案】精准获取webView内容高度,自适应高度

    前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能 ...

  6. 自学Linux Shell10.1-使用编辑器vim

    点击返回 自学Linux命令行与Shell脚本之路 10.1-使用编辑器vim 所有的 Unix系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在.但是目前我们使用比较多的是 vim 编辑 ...

  7. CAN总线疑惑与解答

    1    CAN总线2根数据线是怎么表示数据信息1和0的? Can总线采用差分数据表示方法,平时2个数据线为2.5V,表示隐性(1).当用数据0(显性)需要发送时1跟数据线上升到3.5V另一个下降到1 ...

  8. C# 推箱子游戏&对战游戏

    推箱子游戏提纲,只有向右向上的操作,向左向下同理,后期需完善. namespace 推箱子 { class Program { static void Main(string[] args) { // ...

  9. c基础:函数参数是 struct(结构),传的是引用,还是值?

    比如函数形式:void func(struct a data1, struct b data2); 答案: 只要不是指针或者数组都是传值,其实指针也是传递的地址值. 追问但是如果这个结构体里面有数组这 ...

  10. mui dtpicker 时间的设置 以及MUI的弹窗

    1)引入mui.min.css,然后引入mui.picker.min.css            注意这个mui.picker.min.css  与 mui.picker.css  不一样 2)引入 ...