bootstrap table行拖拽排序并获取数据

测试bootstrap table及拖拽功能的时候遇到一个问题

在此将解决方案分享出来。

前提准备

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

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

问题

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

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

解决方法

官方原文（ 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
            });
        });

源代码如下

    

    

    

    

    

    

    





    


        


            


                


                    
Item ID

                    
Item Name

                    
Item Price

                

            

            


                


                    
1

                    
Item 1

                    
$1

                

                


                    
2

                    
Item 2

                    
$2

                

            

        

    

    


        

            新增

        

        

            获取数据