bootstrap-table插件数据加载方式

时间：2021-10-18 00:42:04

  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方法接收的数据格式如下：

bootstrap-table插件数据加载方式

下面是通过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("错误");

            }

        }

    )

相关文章