问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

bootstrap table接收json问题

头像
凌晨消失の夏日
    88511224

    文档中是直接拿json

    <table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

    但是我的json格式如下

    {   "code": "0",
    "data": {"messages":[{"id":1,"name":"Mark","price":"10"},....]}
}

    请问该如何修改?

    javascriptbootstrap-tablebootstrapjson
    阅读 6.4k
    3 个回答
    得票最新
    头像
    snowy
      184915
      头像
      凌晨消失の夏日
        88511224

        html：

        <table data-toggle="table" >
     <thead>
         <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
    <tbody>
       <tr ng-repeat = "td in itemList.data.messages">
            <td data-field="id">{{li.id}}</td>
            <td data-field="name">{{li.name}}</td>
            <td data-field="price">{{li.price}}</td>
        </tr>
    </tbody>
</table>

        js:

        itemList:{   
    "code": "0", 
    "data": {
        "messages":[
        {"id":1,"name":"Mark","price":"10"},....]
        }
    }
        头像
        侃哥
          17158

          bootstrap-table参数中有responseHandler: function(res){ return res; }函数。

          此函数的作用就是可以先对获取到的服务器数据先进行处理、格式化数据之后再进行表格的渲染。
          以你取到的数据为例,初始化配置中添加如下参数：

          responseHandler: function (res) {
    return res.data.messages;
}

          就可以了

          头像
          李世昌
            32
            新手上路，请多包涵

            <!DOCTYPE html>
            <html lang="en">
            <head>

            <meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap-table.css">
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap-table.min.css">

            </head>
            <body>

            </body> <script type="text/javascript" src="jquery/jquery.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap-table.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap-table-zh-CN.js"></script> <script type="text/javascript"> $(function () { var oTable = new TableInit(); oTable.Init(); }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tb_departments').bootstrapTable({ url: 'data.json', method: 'get', toolbar: '#toolbar', striped: true, cache: false, uniqueId: "id", columns: [{ field: 'id', title: 'Item ID', align:'center' }, { field: 'name', title: 'Item Name', align:'center' },{ field: 'price', title: 'Item Price', align:'center' }],responseHandler:function(data){ return data.data.messages } }); }; // //得到查询的参数 // oTableInit.queryParams = function (params) { // var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 // limit: params.limit, //页面大小 // offset: params.offset, //页码 // departmentname: $("#txt_search_departmentname").val(), // statu: $("#txt_search_statu").val() // }; // return temp; // }; return oTableInit; } </script> </html>图片描述 [1]: /img/bVWX3l
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题