前提准备

bootstrap table 好用的多功能表格中文官网 github

bootstrap-table-reorder-rows 上述表格的一个扩展，支持行拖拽 github

问题

以上的原表格，拖动行更换位置后如下图

使用bootstrap table的getData方法获取表格内容，仍为拖拽前的数据

解决方法

$\color{red}{表格初始化时将bootstrap-table-reorder-rows的useRowAttrFunc属性设为true}$
官方原文（ This function must be use if your tr elements won't have the id attribute. If your tr elements don't have the id attribute this plugin don't fire the onDrop event.）

        $(document).ready(function () {
            $("#tabletest").bootstrapTable({
                reorderableRows: true,
                striped: true,
                search: true,
                toolbar: '#toolbar',
                useRowAttrFunc: true
            });
        });

源代码如下


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/bootstrap-table/1.12.2/bootstrap-table.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/bootstrap-table/1.12.2/extensions/reorder-rows/bootstrap-table-reorder-rows.css" rel="stylesheet">

</head>

<body>

    <div style="width:1000px">

        <table id="tabletest">

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

                    <td>1</td>

                    <td>Item 1</td>

                    <td>$1</td>

                </tr>

                <tr>

                    <td>2</td>

                    <td>Item 2</td>

                    <td>$2</td>

                </tr>

            </tbody>

        </table>

    </div>

    <div id="toolbar" class="btn-group">

        <button id="btn_add" type="button" class="btn btn-info btn-sm rightSize">

            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增

        </button>

        <button id="getdata" type="button" class="btn btn-info btn-sm rightSize">

            获取数据

        </button>

    </div>

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/bootstrap-table.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/locale/bootstrap-table-zh-CN.js"></script>

    <script src="https://cdn.bootcss.com/TableDnD/1.0.3/jquery.tablednd.min.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#tabletest").bootstrapTable({

                reorderableRows: true,

                striped: true,

                search: true,

                toolbar: '#toolbar',

                useRowAttrFunc: true,

                // onReorderRow: function (newdata) {

                //    console.log(newdata);

                // }

            });

        });

        $("#btn_add").click(function () {

            $('#tabletest').bootstrapTable('append', { 'id': 'aa', 'name': 'bb', 'price': '1' });

        });

        $("#getdata").click(function () {

            alert(JSON.stringify($('#tabletest').bootstrapTable('getData')));

        });

    </script>

</body>

</html>