Antdesign-vue combined with sortablejs to achieve the function of dragging and sorting two tables

Achieve results

I originally wanted to look online to see if there were any based on antdesign, but I found that there were really few! Without further ado, here are the pictures:

Introduction to sortablejs

First, let’s get to know this plugin: sortablejs
You can read its API documentation carefully:

Here I will focus on the API I used.
1. group can pass in objects, parameter values ​​are name , pull , put ,
name : If you want to drag between two lists, the value of name must be the same;
pull : pull is used to define the settings to be moved out of this list container, true/false/'clone'/function

• true: the list cells in the list container can be moved out;
• false: the list unit in the list container cannot be moved out;
• clone: ​​The list unit is moved out, and the moved element is a copy of the element;
• function: a function used to judge whether to pull. It can perform complex logic and return false/true in the function to judge whether to remove.

put : put is used to define the settings for placing list cells into this list container, true/false/['foo','bar']/function;

• true: List containers can put list cells into other list containers;
• false: the opposite of true;
• ['foo','bar']: This can be a string or an array of strings, representing the name value defined in the group configuration item;
• function: used to judge the put function, which can perform complex logic and return false/true in the function to judge whether to put in;

2. animation ms, number Unit: ms, defines the time of sorting animation;
3. handle : a string in the format of a simple CSS selector, which makes the element in the list unit that matches the selector become the drag handle. The list unit can only be dragged by pressing the drag handle ( bind the class of the element you want to drag );
4. onStart:function(evt){} callback method to start dragging;
5. onUpdate:function(evt){} callback method for updating the elements in the list in sequence;
6. onAdd:function(evt){} Callback method for dragging an element from one list to another;
7. onRemove:function(evt){} The callback method for removing an element from a list and entering another list;
This requirement uses these The api is enough.

Specific implementation

1. The first step is to initialize sortable method. Because our requirement is to drag two tables, we initialize two methods.
HTML code

<s-table
 ref="table"
 size="default"
 class="left-table"
 rowKey="key"
 :columns="columns"
 :data="loadData">
</s-table>
  
<s-table
 class="sort-table"
 ref="table2"
 size="default"
 class="left-table"
 rowKey="key"
 :columns="columns"
 :data="loadData">
</s-table>

Specific columns and There is no need to elaborate on loadData.

JS code

import Sortable from 'sortablejs'
methods:{
 // Initialize sortable to implement drag initSortable () {
 var that = this
 var el = this.$el.querySelector('.sort-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 onUpdate: function (evt) {
 
 },
 // When dragging starts onStart: function (evt) {
  
 },
 onAdd: function (evt) {
  
 },
 onRemove: function (evt) {
 
 }
 })
 },
 initSortable1 () {
 var that = this
 var el = this.$el.querySelector('.left-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 onUpdate: function (evt) {
 
 },
 // When dragging starts onStart: function (evt) {
  
 },
 onAdd: function (evt) {
  
 },
 onRemove: function (evt) {
 
 }
 })
 },
 }

About handle class, because we want to drag each row of the antdesign table, so we need to select each row of it class.

So far two The drag effect can be achieved between tables, but it is only a drag effect .
Because after dragging, the data sources on both sides have not changed, and even after dragging, there will be errors in the display page of the table on the other side:

The sorting is unique to the table on my right, but the table here does not need this sorting. And if the dragging is successful, why does it still show that there is no data ? Finally, CheckBox in the left header cannot be selected. So far, there is only a drag effect.
2. After the dragging action, reassign the data sources on the left and right sides. There are two ways to implement this:

• After each drag, the backend data is requested, and after obtaining the new data source, the data is reassigned to the table.
• The front end handles the data source itself, sorts it out after all dragging is completed, and then saves it to the back end.

Considering the performance consumption, I chose the second one:
1) Define the data source arrays on the left and right sides

data(){
 return {
 unMatchedList: [], // unmatched data on the left dataList: [], // matched data on the right pullIndex: '', // the index of the original array drag element}
}

2) Update the data source every time remove or add . Here I only write a table drag method. The other method only needs to swap the data source assignments on the left and right sides of that.dataList and that.unMatchedList I won’t paste duplicate code.

 // When dragging starts onStart: function (evt) {
  that.pullIndex = evt.oldIndex
 },
 onAdd: function (evt) {
 //evt.newIndex moves to the index of the new array //pullIndex the index of the dragged element in the original array that.dataList.splice(evt.newIndex, 0, that.unMatchedList[that.pullIndex])
  that.dataList.forEach((item, index) => {
  item.sort = index + 1
  })
  //Notify the table view to update that.$nextTick(() => {
  that.$refs.table2 && this.$refs.table2.refresh(true)
 		 that.$refs.table && this.$refs.table.refresh(true)
  })
 },
 onRemove: function (evt) {
  that.dataList.splice(evt.oldIndex, 1)
  that.dataList.forEach((item, index) => {
  item.sort = index + 1
  })
  that.$nextTick(() => {
  that.$refs.table2 && this.$refs.table2.refresh(true)
 		that.$refs.table && this.$refs.table.refresh(true)
  })
 }
 })

3) Implement drag and drop sorting in the same table

initSortable () {
 var that = this
 var el = this.$el.querySelector('.sort-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 //Don't use the onEnd method here onUpdate: function (evt) {
  var o = evt.oldIndex
  var n = evt.newIndex
  if (o === n) {
  return
  }
  that.sortListAndUpdate(that.dataList, o, n)
 },
 })
 },
 // Sort the data, requiring o (oldIndex) and n (newIndex) to start from 0 sortList (list, o, n) {
 var newTableData = JSON.parse(JSON.stringify(list))
 var data = newTableData.splice(o, 1, null)
 newTableData.splice(o < n ? n + 1 : n, 0, data[0])
 newTableData.splice(o > n ? o + 1 : o, 1)
 return newTableData
 },
 /**
 * Sort the data and update the table, requiring o (oldIndex) and n (newIndex) to start from 0*/
 sortListAndUpdate (list, o, n) {
 var newTableData = this.sortList(list, o, n)
 newTableData.forEach((item, index) => {
 item.sort = index + 1
 })
 this.$nextTick(() => {
 this.dataList = newTableData
 that.$refs.table2 && this.$refs.table2.refresh(true)
 })
 },

Here we use the onUpdate method to sort, not onEnd method, because as long as you have a drag effect, onEnd method will be triggered, resulting in another sort after dragging left and right.

This is the end of this article about antdesign-vue combined with sortablejs to realize the function of dragging and sorting two tables. For more relevant content about antdesign-vue to realize drag and sort, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!