bootstrap-table插件数据加载方式
2024-09-09 05:54:49
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("错误");
}
}
)
最新文章
- [leetcode] 题型整理之二叉树
- Spring 官方下载地址(非Maven)
- Web Application的目录结构
- WPF中的三维空间(1)
- IOS 多于UIImageView 当加载较大的高清闪存管理
- redis3.05安装
- Servlet学习应该注意的几点
- three.js 3d三维网页代码加密的实现方法
- Android使用属性动画ValueAnimator动态改变SurfaceView的背景颜色
- vuex数据持久化存储
- input输入框只能输入数字而且开头不能为零
- attenuation
- WebApi的过滤器
- .NET Core1.1+VS2017RC+MySQL+EF搭建多层Web应用程序
- JDBC进行简单的增删改查
- CCKS 2018 | 最佳论文:南京大学提出DSKG,将多层RNN用于知识图谱补全
- 卸载JLink驱动弹出“could not open INSTALL.LOG file”的解决方法
- ASP.NET CORE 学习之自定义异常处理
- SGU 206. Roads
- 单纯用JS做的分页插件
热门文章
- Laravel框架简单的用户管理[CURD]操作
- Educational Codeforces Round 8 B. New Skateboard
- 使用FreeRTOS在SD卡驱动使用非系统延时导致上电重启不工作的情况
- ZJOI 2019 一试记
- 洛谷 P3962 [TJOI2013]数字根 解题报告
- 洛谷 P2466 Sue的小球 解题报告
- “由于下列错误,Parallel port driver 服务启动失败”,注意了
- c++11并发之std::thread
- c语言输入字符注意
- mysql存储过程和常用流程控制