1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | const rowAttr = (row, index) => ({
|
7 | id: `customId_${index}`
|
8 | })
|
9 |
|
10 | Object.assign($.fn.bootstrapTable.defaults, {
|
11 | reorderableRows: false,
|
12 | onDragStyle: null,
|
13 | onDropStyle: null,
|
14 | onDragClass: 'reorder-rows-on-drag-class',
|
15 | dragHandle: '>tbody>tr>td:not(.bs-checkbox)',
|
16 | useRowAttrFunc: false,
|
17 |
|
18 | onReorderRowsDrag (row) {
|
19 | return false
|
20 | },
|
21 |
|
22 | onReorderRowsDrop (row) {
|
23 | return false
|
24 | },
|
25 |
|
26 | onReorderRow (newData) {
|
27 | return false
|
28 | },
|
29 | onDragStop () {},
|
30 | onAllowDrop () {
|
31 | return true
|
32 | }
|
33 | })
|
34 |
|
35 | Object.assign($.fn.bootstrapTable.events, {
|
36 | 'reorder-row.bs.table': 'onReorderRow'
|
37 | })
|
38 |
|
39 | $.BootstrapTable = class extends $.BootstrapTable {
|
40 | init (...args) {
|
41 | if (!this.options.reorderableRows) {
|
42 | super.init(...args)
|
43 | return
|
44 | }
|
45 |
|
46 | if (this.options.useRowAttrFunc) {
|
47 | this.options.rowAttributes = rowAttr
|
48 | }
|
49 |
|
50 | const onPostBody = this.options.onPostBody
|
51 |
|
52 | this.options.onPostBody = () => {
|
53 | setTimeout(() => {
|
54 | this.makeRowsReorderable()
|
55 | onPostBody.call(this.options, this.options.data)
|
56 | }, 1)
|
57 | }
|
58 |
|
59 | super.init(...args)
|
60 | }
|
61 |
|
62 | makeRowsReorderable () {
|
63 | this.$el.tableDnD({
|
64 | onDragStyle: this.options.onDragStyle,
|
65 | onDropStyle: this.options.onDropStyle,
|
66 | onDragClass: this.options.onDragClass,
|
67 | onAllowDrop: (hoveredRow, draggedRow) => this.onAllowDrop(hoveredRow, draggedRow),
|
68 | onDragStop: (table, draggedRow) => this.onDragStop(table, draggedRow),
|
69 | onDragStart: (table, droppedRow) => this.onDropStart(table, droppedRow),
|
70 | onDrop: (table, droppedRow) => this.onDrop(table, droppedRow),
|
71 | dragHandle: this.options.dragHandle
|
72 | })
|
73 | }
|
74 |
|
75 | onDropStart (table, draggingTd) {
|
76 | this.$draggingTd = $(draggingTd).css('cursor', 'move')
|
77 | this.draggingIndex = $(this.$draggingTd.parent()).data('index')
|
78 |
|
79 | this.options.onReorderRowsDrag(this.data[this.draggingIndex])
|
80 | }
|
81 |
|
82 | onDragStop (table, draggedRow) {
|
83 | const rowIndexDraggedRow = $(draggedRow).data('index')
|
84 | const draggedRowItem = this.data[rowIndexDraggedRow]
|
85 |
|
86 | this.options.onDragStop(table, draggedRowItem, draggedRow)
|
87 | }
|
88 |
|
89 | onAllowDrop (hoveredRow, draggedRow) {
|
90 | const rowIndexDraggedRow = $(draggedRow).data('index')
|
91 | const rowIndexHoveredRow = $(hoveredRow).data('index')
|
92 | const draggedRowItem = this.data[rowIndexDraggedRow]
|
93 | const hoveredRowItem = this.data[rowIndexHoveredRow]
|
94 |
|
95 | return this.options.onAllowDrop(hoveredRowItem, draggedRowItem, hoveredRow, draggedRow)
|
96 | }
|
97 |
|
98 | onDrop (table) {
|
99 | this.$draggingTd.css('cursor', '')
|
100 | const newData = []
|
101 |
|
102 | for (let i = 0; i < table.tBodies[0].rows.length; i++) {
|
103 | const $tr = $(table.tBodies[0].rows[i])
|
104 |
|
105 | newData.push(this.data[$tr.data('index')])
|
106 | $tr.data('index', i)
|
107 | }
|
108 |
|
109 | const draggingRow = this.data[this.draggingIndex]
|
110 | const droppedIndex = newData.indexOf(this.data[this.draggingIndex])
|
111 | const droppedRow = this.data[droppedIndex]
|
112 | const index = this.options.data.indexOf(this.data[droppedIndex])
|
113 |
|
114 | this.options.data.splice(this.options.data.indexOf(draggingRow), 1)
|
115 | this.options.data.splice(index, 0, draggingRow)
|
116 |
|
117 | this.initSearch()
|
118 |
|
119 |
|
120 | this.options.onReorderRowsDrop(droppedRow)
|
121 |
|
122 |
|
123 | this.trigger('reorder-row', newData, draggingRow, droppedRow)
|
124 | }
|
125 |
|
126 | initSearch () {
|
127 | this.ignoreInitSort = true
|
128 | super.initSearch()
|
129 | }
|
130 |
|
131 | initSort () {
|
132 | if (this.ignoreInitSort) {
|
133 | this.ignoreInitSort = false
|
134 | return
|
135 | }
|
136 |
|
137 | super.initSort()
|
138 | }
|
139 | }
|