Jelajahi Sumber

修复拖拽行数据错位问题

Ricky 3 tahun lalu
induk
melakukan
0224f58e52

+ 16 - 0
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js

@@ -93,10 +93,26 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.options.data.splice(this.options.data.indexOf(draggingRow), 1)
     this.options.data.splice(index, 0, draggingRow)
 
+    this.initSearch()
+
     // Call the user defined function
     this.options.onReorderRowsDrop(droppedRow)
 
     // Call the event reorder-row
     this.trigger('reorder-row', newData, draggingRow, droppedRow)
   }
+
+  initSearch () {
+    this.ignoreInitSort = true
+    super.initSearch()
+  }
+
+  initSort () {
+    if (this.ignoreInitSort) {
+      this.ignoreInitSort = false
+      return
+    }
+
+    super.initSort()
+  }
 }

+ 14 - 1
ruoyi-admin/src/main/resources/templates/demo/table/reorderRows.html

@@ -5,6 +5,11 @@
 </head>
 <body class="gray-bg">
      <div class="container-div">
+        <div class="btn-group-sm" id="toolbar" role="group">
+            <a class="btn btn-primary" onclick="getData()">
+                <i class="fa fa-search"></i> 查询所有数据
+            </a>
+        </div>
 		<div class="row">
 			<div class="col-sm-12 select-table table-striped">
 			    <p class="select-title">按住表格行拖拽</p>
@@ -29,7 +34,9 @@
 		        showColumns: false,
 		        onReorderRow: function (data) {
 		        	 //当拖拽结束后,data为整个表格的数据
-		            console.log('拖拽结束' + JSON.stringify(data))
+		            console.table(data)
+		            // 当sidePagination: "server"时,拖拽行后顺序错乱,需要重新调用加载数据方法
+		            $("#" + table.options.id).bootstrapTable('load', data);
 		            return false;
 		        },
                 columns: [{
@@ -70,6 +77,12 @@
             };
             $.table.init(options);
         });
+        
+        /* 查询表格所有数据值 */
+        function getData(){
+            var data = $("#" + table.options.id).bootstrapTable('getData');
+            alert(JSON.stringify(data.map( item => { return item.userId })))
+        }
     </script>
 </body>
 </html>