Feature/reorder rows (#4722)

* Added search supported for reorder-rows extension

* Added cardView supported for reorder-rows extension

site/docs/extensions/reorder-rows.md

@@ -41,7 +41,7 @@ if you want you can include the bootstrap-table-reorder-rows.css file to use the
 
 - **Detail:**
 
-   This is the style that is assigned to the row during drag. There are limitations to the styles that can be associated with a row (such as you can't assign a border�well you can, but it won't be displayed).
+   This is the style that is assigned to the row during drag. There are limitations to the styles that can be associated with a row (such as you can't assign a border well you can, but it won't be displayed).
 
 - **Default:** `null`
 
@@ -73,7 +73,7 @@ if you want you can include the bootstrap-table-reorder-rows.css file to use the
 
    This is the cursor to use
 
-- **Default:** `null`
+- **Default:** `>tbody>tr>td`
 
 ### useRowAttrFunc
 
@@ -91,7 +91,7 @@ if you want you can include the bootstrap-table-reorder-rows.css file to use the
 
 - **Detail:**
 
-   Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the table and the row which the user has started to drag.
+   Pass a function that will be called when the user starts dragging. The function takes 1 parameter: the row which the user has started to drag.
 
 - **Default:** `empty function`
 
@@ -101,7 +101,7 @@ if you want you can include the bootstrap-table-reorder-rows.css file to use the
 
 - **Detail:**
 
-   Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table and the row that was dropped.
+   Pass a function that will be called when the row is dropped. The function takes 1 parameter:  the row that was dropped.
 
 - **Default:** `empty function`
 
@@ -109,8 +109,4 @@ if you want you can include the bootstrap-table-reorder-rows.css file to use the
 
 ### onReorderRow(reorder-row.bs.table)
 
-Fired when the row was dropped, receive as parameter the new data order
-
-## The existing problems
-
-* After search if the user reorder the rows the data is not shown properly after that.
+Fired when the row was dropped, receive as parameter the new data order.

src/extensions/reorder-rows/bootstrap-table-reorder-rows.js

@@ -1,11 +1,9 @@
 /**
  * @author: Dennis Hernández
  * @webSite: http://djhvscf.github.io/Blog
- * @version: v1.0.1
+ * @update zhixin wen <wenzhixin2010@gmail.com>
  */
 
-const isSearch = false
-
 const rowAttr = (row, index) => ({
   id: `customId_${index}`
 })
@@ -15,12 +13,12 @@ $.extend($.fn.bootstrapTable.defaults, {
   onDragStyle: null,
   onDropStyle: null,
   onDragClass: 'reorder_rows_onDragClass',
-  dragHandle: null,
+  dragHandle: '>tbody>tr>td',
   useRowAttrFunc: false,
-  onReorderRowsDrag (table, row) {
+  onReorderRowsDrag (row) {
     return false
   },
-  onReorderRowsDrop (table, row) {
+  onReorderRowsDrop (row) {
     return false
   },
   onReorderRow (newData) {
@@ -32,80 +30,66 @@ $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
   'reorder-row.bs.table': 'onReorderRow'
 })
 
-const BootstrapTable = $.fn.bootstrapTable.Constructor
-const _init = BootstrapTable.prototype.init
-const _initSearch = BootstrapTable.prototype.initSearch
-
-BootstrapTable.prototype.init = function (...args) {
-
-  if (!this.options.reorderableRows) {
-    _init.apply(this, Array.prototype.slice.apply(args))
-    return
-  }
-
-  const that = this
-  if (this.options.useRowAttrFunc) {
-    this.options.rowAttributes = rowAttr
+$.BootstrapTable = class extends $.BootstrapTable {
+  init (...args) {
+    if (!this.options.reorderableRows) {
+      super.init(...args)
+      return
+    }
+
+    if (this.options.useRowAttrFunc) {
+      this.options.rowAttributes = rowAttr
+    }
+
+    const onPostBody = this.options.onPostBody
+    this.options.onPostBody = () => {
+      setTimeout(() => {
+        this.makeRowsReorderable()
+        onPostBody.apply()
+      }, 1)
+    }
+
+    super.init(...args)
   }
 
-  const onPostBody = this.options.onPostBody
-  this.options.onPostBody = () => {
-    setTimeout(() => {
-      that.makeRowsReorderable()
-      onPostBody.apply()
-    }, 1)
-  }
-
-  _init.apply(this, Array.prototype.slice.apply(args))
-}
-
-BootstrapTable.prototype.initSearch = function (...args) {
-  _initSearch.apply(this, Array.prototype.slice.apply(args))
-
-  if (!this.options.reorderableRows) {
-    return
+  makeRowsReorderable () {
+    this.$el.tableDnD({
+      onDragStyle: this.options.onDragStyle,
+      onDropStyle: this.options.onDropStyle,
+      onDragClass: this.options.onDragClass,
+      onDragStart: (table, droppedRow) => this.onDropStart(table, droppedRow),
+      onDrop: (table, droppedRow) => this.onDrop(table, droppedRow),
+      dragHandle: this.options.dragHandle
+    })
   }
 
-  // Known issue after search if you reorder the rows the data is not display properly
-  // isSearch = true;
-}
-
-BootstrapTable.prototype.makeRowsReorderable = function () {
-  if (this.options.cardView) {
-    return
+  onDropStart (table, draggingTd) {
+    this.$draggingTd = $(draggingTd).css('cursor', 'move')
+    this.draggingIndex = $(this.$draggingTd.parent()).data('index')
+    // Call the user defined function
+    this.options.onReorderRowsDrag(this.data[this.draggingIndex])
   }
 
-  const that = this
-  this.$el.tableDnD({
-    onDragStyle: that.options.onDragStyle,
-    onDropStyle: that.options.onDropStyle,
-    onDragClass: that.options.onDragClass,
-    onDrop: that.onDrop,
-    onDragStart: that.options.onReorderRowsDrag,
-    dragHandle: that.options.dragHandle
-  })
-}
-
-BootstrapTable.prototype.onDrop = (table, droppedRow) => {
-  const tableBs = $(table)
-  const tableBsData = tableBs.data('bootstrap.table')
-  const tableBsOptions = tableBs.data('bootstrap.table').options
-  let row = null
-  const newData = []
-
-  for (let i = 0; i < table.tBodies[0].rows.length; i++) {
-    row = $(table.tBodies[0].rows[i])
-    newData.push(tableBsOptions.data[row.data('index')])
-    row.data('index', i).attr('data-index', i)
+  onDrop (table) {
+    this.$draggingTd.css('cursor', '')
+    const newData = []
+    for (let i = 0; i < table.tBodies[0].rows.length; i++) {
+      const $tr = $(table.tBodies[0].rows[i])
+      newData.push(this.data[$tr.data('index')])
+      $tr.data('index', i)
+    }
+
+    const draggingRow = this.data[this.draggingIndex]
+    const droppedIndex = newData.indexOf(this.data[this.draggingIndex])
+    const droppedRow = this.data[droppedIndex]
+    const index = this.options.data.indexOf(this.data[droppedIndex])
+    this.options.data.splice(this.options.data.indexOf(draggingRow), 1)
+    this.options.data.splice(index, 0, draggingRow)
+
+    // Call the user defined function
+    this.options.onReorderRowsDrop(droppedRow)
+
+    // Call the event reorder-row
+    this.trigger('reorder-row', newData)
   }
-
-  tableBsOptions.data = tableBsOptions.data.slice(0, tableBsData.pageFrom - 1)
-    .concat(newData)
-    .concat(tableBsOptions.data.slice(tableBsData.pageTo))
-
-  // Call the user defined function
-  tableBsOptions.onReorderRowsDrop.apply(table, [table, droppedRow])
-
-  // Call the event reorder-row
-  tableBsData.trigger('reorder-row', newData)
 }