bootstrap-table插件数据加载方式
2018-06-13 16:01
721 查看
-
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实现从服务器加载数据进行显示
- bootstrapTable+ajax加载数据 refresh更新数据
- bootstrap的table插件动态加载表头【表头】。
- bootstrapTable post 方式请求数据 (注意POST大小写)
- Bootstrap Table表格一直加载(load)不了数据的快速解决方法
- Bootstrap-Table实现从服务器加载数据进行显示
- bootstrap-table无法加载json数据
- bootstrap table动态加载数据示例代码
- table数据如何通过ajax方式加载?
- bootstrap-table 插件 表头与内容不对齐 解决方式
- 结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程
- bootStrap table+ajax加载数据
- bootstrap table 获取数据的两种方式
- 使用bootstrap-table等自动使用ajax地址载入数据的插件的数据设计建议
- BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
- Bootstrap Data Table简单使用(动态加载数据)
- bootstrap table动态加载数据
- bootstrap-select下拉搜索插件 动态加载自己数据的二级联动