bootstrap-table插件数据加载方式

最新推荐文章于 2025-03-22 20:03:41 发布

Baymax627

最新推荐文章于 2025-03-22 20:03:41 发布

阅读量4.2w

点赞数 3

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/jl381169437/article/details/50218279

版权

前端专栏收录该内容

31 篇文章

订阅专栏

本文介绍了bootstrap-table插件的两种数据加载方式：通过data-url属性直接定义和使用load方法手动加载。data-url适用于从本地JSON文件或后台获取JSON数组数据。当后台返回JSON对象时，需要在前端解析并用load方法填充表格。还展示了使用jQuery AJAX从后台获取数据并利用load方法更新表格的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap-table插件数据加载方式##

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>

    <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>

如果后台传递的数据格式为json对象，需要在前台解析，并通过load方法将数据写入表格，load方法接收的数据格式如下：

oad方法接收的数据

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

欢迎扫码关注作者公众号