Question

我尝试使用bootstrap-table插件在表格中呈现我的json数据。数据加载成功，但插件不会将数据呈现到表中，只是说No matching records found。

我一直在关注文档中的示例，尝试使用load和refresh等方法，但根据the example I almost copy-pasted，您并不需要使用任何方法来加载和呈现数据，您只需在data-url标记中指定table属性，或在js文件中的表对象上添加url属性。我尝试了两种变体，似乎都没有效果。

以下是我如何定义我的表格：

<h1>Table</h1>
<div id="toolbar">
    <button id="remove" class="btn btn-danger" disabled="">
        <i class="glyphicon glyphicon-remove"></i>
        Delete
    </button>
</div>

<table
    id="table"
    data-url="/books/all"
    data-toolbar="#toolbar"
    data-search="true"
    data-sortable="true"
    data-show-refresh="true"
    data-show-toggle="true"
    data-show-columns="true"
    data-show-export="true"
    data-detail-view="true"
    data-detail-formatter="detailFormatter"
    data-minimum-count-columns="2"
    data-show-pagination-switch="true"
    data-pagination="true"
    data-id-field="id"
    data-page-list="[10, 25, 50, 100, ALL]"
    data-show-footer="false"
    data-side-pagination="server"
    data-response-handler="responseHandler">
</table>

/books/all返回json数据，如下所示：

[{"id":42
    "name":"whatever",
"description":"whatever"
"cover_img":"https://whatever.jpg"
"available_count":10,
"price":6.99,
"author_id":21,
"publisher_id":5,
"author_first_name":"Harper",
"author_last_name":"Lee",
"author_birthday":"1926-04-27T22:00:00.000Z",
"publisher_name":"Penguin Fiction"},...]

我在js中定义我的列：

let $table = $('#table'),
    $remove = $('#remove'),
    selections = [];

const initTable = () => {
    $table.bootstrapTable({
        url: '/books/all',
        height: getHeight(),
        columns: [
            [
                {
                    field: 'state',
                    checkbox: true,
                    rowspan: 2,
                    align: 'center',
                    valign: 'middle'
                }, {
                    title: 'Book ID',
                    field: 'id',
                    rowspan: 2,
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    footerFormatter: totalTextFormatter
                }, {
                    title: 'Book Detail',
                    colspan: 3,
                    align: 'center'
                }
            ],
            [
                {
                    field: 'name',
                    title: 'Book Name',
                    sortable: true,
                    editable: true,
                    align: 'center',
                    footerFormatter: totalNameFormatter
                }, {
                    field: 'price',
                    title: 'Book Price',
                    sortable: true,
                    align: 'center',
                    editable: {
                        type: 'text',
                        title: 'Book Price',
                        validate(value) {
                            value = $.trim(value);

                            if (!value) {
                                return 'This field is required';
                            }

                            if (!/^\$/.test(value)) {
                                return 'This field needs to start with $';
                            }

                            const data = $table.bootstrapTable('getData'),
                                  index = $(this).parents('tr').data('index');
                            console.log(data[index]);
                            return '';
                        }
                    },
                    footerFormatter: totalPriceFormatter
                }, {
                    field: 'operate',
                    title: 'Book Operate',
                    align: 'center',
                    events: operateEvents,
                    formatter: operateFormatter
                }
            ]
        ]
    });

    setTimeout(() => {
        $table.bootstrapTable('resetView');
    }, 200);

    $table.on('check.bs.table uncheck.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table',
        () => {
            $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);

            selections = getIdSelections();
    });

    $table.on('expand-row.bs.table', (e, index, row, $detail) => {
        if (index % 2 == 1) {
            $detail.html('Loading from ajax request...');
            $.get('LICENSE', res => {
                $detail.html(res.replace(/\n/g, '<br>'));
            });
        }
    });

    $table.on('all.bs.table', (e, name, args) => {
        console.log(name, args);
    });

    $remove.click(() => {
        const ids = getIdSelections();
        $table.bootstrapTable('remove', {
            field: 'id',
            values: ids
        });
        $remove.prop('disabled', true);
    });

    $(window).resize(() => {
        $table.bootstrapTable('resetView', {
            height: getHeight()
        });
    });
};


function getIdSelections() {
    return $.map($table.bootstrapTable('getSelections'), row => row.id)
}

function responseHandler(res) {
    $.each(res.rows, (i, row) => {
        row.state = $.inArray(row.id, selections) !== -1;
    });
    return res;
};

每次刷新页面或表时，load-success.bs.table事件都会收到数据。 responseHandle函数也会被触发并接收相同的有效数据。

JSON数据格式有效，如果我只是从/books/all请求复制响应并将其粘贴到bootstrapTable初始化对象中的data属性（紧跟columns属性之后），数据将正常呈现。

你能帮助我理解我做错了什么并解决了这个问题吗？

Answer 1

我认为您只是在JSON中缺少其指定行数的附加信息，并将实际数据包含在行对象中，如：

{
  "total": 2,
  "rows": [
  {
    "id":42
    "name":"whatever",
    "description":"whatever"
    "cover_img":"https://whatever.jpg"
    "available_count":10,
    "price":6.99,
    "author_id":21,
    "publisher_id":5,
    "author_first_name":"Harper",
    "author_last_name":"Lee",
    "author_birthday":"1926-04-27T22:00:00.000Z",
    "publisher_name":"Penguin Fiction"
    },
    ...]
}

Bootstrap-Table不呈现JSON数据（但成功加载）

1 个答案: