bootstrap-table插件數據加載方式

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("錯誤"); } } )