Antdesign-vue kombiniert mit sortablejs, um die Funktion zum Ziehen und Sortieren von zwei Tabellen zu erreichen

Ergebnisse erzielen

Ursprünglich wollte ich online nachsehen, ob es welche gibt, die auf Antdesign basieren, aber ich musste feststellen, dass es wirklich nur wenige sind! Und nun ohne weitere Umschweife die Bilder:

Einführung in sortablejs

Lernen wir zunächst dieses Plugin kennen: sortablejs
Sie können die API-Dokumentation sorgfältig lesen:

Hier werde ich mich auf die von mir verwendete API konzentrieren.
1. group kann Objekte übergeben, die Parameterwerte sind name , pull , put ,
Name : Wenn Sie zwischen zwei Listen ziehen möchten, muss der Wert von Name derselbe sein.
pull : pull wird verwendet, um die Einstellungen zu definieren, die aus diesem Listencontainer verschoben werden sollen, true/false/'clone'/function

• true: die Listenzellen im Listencontainer können herausgeschoben werden;
• false: die Listeneinheit im Listencontainer kann nicht herausgeschoben werden;
• Klon: Die Listeneinheit wird verschoben und das verschobene Element ist eine Kopie des Elements.
• Funktion: Eine Funktion, mit der beurteilt wird, ob gezogen werden soll. Sie kann eine komplexe Logik ausführen und in der Funktion false/true zurückgeben, um zu beurteilen, ob entfernt werden soll.

put : put wird verwendet, um die Einstellungen zum Platzieren von Listenzellen in diesem Listencontainer zu definieren, true/false/['foo','bar']/Funktion;

• true: Listencontainer können Listenzellen in andere Listencontainer einfügen;
• falsch: das Gegenteil von wahr;
• ['foo','bar']: Dies kann eine Zeichenfolge oder ein Array von Zeichenfolgen sein, die den im Gruppenkonfigurationselement definierten Namenswert darstellen.
• Funktion: Wird verwendet, um die Put-Funktion zu beurteilen, die eine komplexe Logik ausführen und in der Funktion „false“/„true“ zurückgeben kann, um zu beurteilen, ob etwas eingefügt werden soll.

2. animation ms, Zahleneinheit: ms, definiert die Zeit der Sortieranimation;
3. handle : ein String im Format eines einfachen CSS-Selektors, der das Element in der Listeneinheit, das dem Selektor entspricht, zum Ziehgriff macht. Die Listeneinheit kann nur durch Drücken des Ziehgriffs gezogen werden ( binden Sie die Klasse des Elements, das Sie ziehen möchten );
4. onStart:function(evt){} Rückrufmethode zum Starten des Ziehens;
5. onUpdate:function(evt){} Rückrufmethode zum sequenziellen Aktualisieren der Elemente in der Liste;
6. onAdd:function(evt){} Rückrufmethode zum Ziehen eines Elements von einer Liste in eine andere;
7. onRemove:function(evt){} Die Rückrufmethode zum Entfernen eines Elements aus einer Liste und zum Einfügen in eine andere Liste;
Diese Anforderung verwendet diese Die API reicht aus.

Konkrete Umsetzung

1. Der erste Schritt besteht darin, sortable Methode zu initialisieren. Da unsere Anforderung darin besteht, zwei Tabellen zu ziehen, initialisieren wir zwei Methoden.
HTML Quelltext

<s-Tabelle
 ref="Tabelle"
 Größe="Standard"
 Klasse="linke-Tabelle"
 rowKey="Schlüssel"
 :columns="Spalten"
 :data="Daten laden">
</s-Tabelle>
  
<s-Tabelle
 Klasse="Sortierungstabelle"
 ref="Tabelle2"
 Größe="Standard"
 Klasse="linke-Tabelle"
 rowKey="Schlüssel"
 :columns="Spalten"
 :data="Daten laden">
</s-Tabelle>

Spezifisch Spalten und Auf loadData muss nicht näher eingegangen werden.

JS -Code

Sortable aus „sortablejs“ importieren
Methoden:{
 // Sortierbare Datei initialisieren um Drag zu implementieren initSortable () {
 var das = dies
 var el = this.$el.querySelector('.sort-table tbody')
 Sortable.create(el, {
 Griff: ".ant-table-row",
 Animation: 150,
 Gruppe: { Name: 'Name', Pull: True, Put: True },
 beiUpdate: Funktion (evt) {
 
 },
 // Wenn das Ziehen beginnt onStart: function (evt) {
  
 },
 onAdd: Funktion (evt) {
  
 },
 onRemove: Funktion (evt) {
 
 }
 })
 },
 initSortable1 () {
 var das = dies
 var el = this.$el.querySelector('.left-table tbody')
 Sortable.create(el, {
 Griff: ".ant-table-row",
 Animation: 150,
 Gruppe: { Name: 'Name', Pull: True, Put: True },
 beiUpdate: Funktion (evt) {
 
 },
 // Wenn das Ziehen beginnt onStart: function (evt) {
  
 },
 onAdd: Funktion (evt) {
  
 },
 onRemove: Funktion (evt) {
 
 }
 })
 },
 }

Über handle Klasse, weil wir jede Zeile der Antdesign- Tabelle ziehen wollen, also müssen wir jede Zeile davon auswählen Klasse.

Bisher zwei Der Drag-Effekt kann zwischen Tabellen erzielt werden, es handelt sich jedoch lediglich um einen Drag-Effekt .
Denn nach dem Ziehen haben sich die Datenquellen auf beiden Seiten nicht geändert und auch nach dem Ziehen treten auf der Anzeigeseite der Tabelle auf der anderen Seite Fehler auf:

Die Sortierung ist für die Tabelle rechts von mir eindeutig, aber die Tabelle hier benötigt diese Sortierung nicht. Und wenn das Ziehen erfolgreich ist, warum wird dann trotzdem angezeigt, dass keine Daten vorhanden sind ? Schließlich kann CheckBox in der linken Kopfzeile nicht ausgewählt werden. Bisher gibt es lediglich einen Drag-Effekt.
2. Nach dem Ziehen ordnen Sie die Datenquellen auf der linken und rechten Seite neu zu. Dies können Sie auf zwei Arten umsetzen:

• Nach jedem Ziehen werden die Backend-Daten angefordert und nach dem Abrufen der neuen Datenquelle werden die Daten der Tabelle neu zugewiesen.
• Das Frontend verwaltet die Datenquelle selbst, sortiert sie, nachdem alle Ziehvorgänge abgeschlossen sind, und speichert sie dann im Backend.

Unter Berücksichtigung des Leistungsverbrauchs habe ich mich für die zweite Variante entschieden:
1) Definieren Sie die Datenquellen-Arrays auf der linken und rechten Seite

Daten(){
 zurückkehren {
 unMatchedList: [], // nicht übereinstimmende Daten auf der linken Seite dataList: [], // übereinstimmende Daten auf der rechten Seite pullIndex: '', // der Index des ursprünglichen Arrays drag-Element}
}

2) Aktualisieren Sie die Datenquelle jedes Mal, wenn remove oder add . Hier schreibe ich nur eine Drag-Methode für Tabellen. Die andere Methode muss nur die Datenquellenzuweisungen auf der linken und rechten Seite von that.dataList und that.unMatchedList Ich werde keinen doppelten Code einfügen.

 // Wenn das Ziehen beginnt onStart: function (evt) {
  that.pullIndex = evt.oldIndex
 },
 onAdd: Funktion (evt) {
 //evt.newIndex bewegt sich zum Index des neuen Arrays //pullIndex der Index des gezogenen Elements im ursprünglichen Array that.dataList.splice(evt.newIndex, 0, that.unMatchedList[that.pullIndex])
  dass.dataList.forEach((item, index) => {
  Artikel.Sortieren = Index + 1
  })
  //Benachrichtigen Sie die Tabellenansicht, dies zu aktualisieren.$nextTick(() => {
  das.$refs.table2 und dies.$refs.table2.refresh(true)
 		 das.$refs.table und das.$refs.table.refresh(true)
  })
 },
 onRemove: Funktion (evt) {
  that.dataList.splice(evt.alterIndex, 1)
  dass.dataList.forEach((item, index) => {
  Artikel.Sortieren = Index + 1
  })
  das.$nextTick(() => {
  das.$refs.table2 und dies.$refs.table2.refresh(true)
 		das.$refs.table und das.$refs.table.refresh(true)
  })
 }
 })

3) Implementieren Sie Drag & Drop-Sortierung in derselben Tabelle

initSortable () {
 var das = dies
 var el = this.$el.querySelector('.sort-table tbody')
 Sortable.create(el, {
 Griff: ".ant-table-row",
 Animation: 150,
 Gruppe: { Name: 'Name', Pull: True, Put: True },
 //Verwenden Sie hier nicht die Methode onEnd onUpdate: function (evt) {
  var o = evt.alterIndex
  var n = evt.neuerIndex
  wenn (o === n) {
  zurückkehren
  }
  das.sortListAndUpdate(das.dataList, o, n)
 },
 })
 },
 // Daten sortieren, dabei ist o (alterIndex) und n (neuerIndex) erforderlich, um bei 0 zu beginnen sortList (Liste, o, n) {
 var neueTableData = JSON.parse(JSON.stringify(Liste))
 var data = newTableData.splice(o, 1, null)
 newTableData.splice(o < n ? n + 1 : n, 0, Daten[0])
 newTableData.splice(o > n ? o + 1 : o, 1)
 gibt neueTabellendaten zurück
 },
 /**
 * Sortieren Sie die Daten und aktualisieren Sie die Tabelle. Dabei müssen o (alterIndex) und n (neuerIndex) bei 0 beginnen*/
 sortListAndUpdate (Liste, o, n) {
 var neueTableData = this.sortList(Liste, o, n)
 newTableData.forEach((Element, Index) => {
 Artikel.Sortieren = Index + 1
 })
 dies.$nextTick(() => {
 this.dataList = neueTabellendaten
 das.$refs.table2 und dies.$refs.table2.refresh(true)
 })
 },

Hier verwenden wir zum Sortieren die Methode onUpdate und nicht onEnd , da, solange ein Drag-Effekt vorliegt, onEnd ausgelöst wird, was nach dem Ziehen nach links und rechts zu einer anderen Sortierung führt.

Dies ist das Ende dieses Artikels über die Kombination von Antdesign-Vue mit SortableJS zur Realisierung der Funktion zum Ziehen und Sortieren von zwei Tabellen. Weitere relevante Inhalte zu Antdesign-Vue zur Realisierung von Ziehen und Sortieren finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!