Wie benutze ich die sortierbare Bibliothek, um Drag-and-Drop-Sortierung von Tabellenspalten zu implementieren, ohne die Zeilenreihenfolge zu ändern?

Verwenden Sie die sortierbare Bibliothek, um Drag & Drop -Reihenfolge der Tabellenspalten zu implementieren und die Zeilen unverändert zu halten

Wenn viele Entwickler die sortierbare Bibliothek zur Sortierung von Drag-and-Drop-Sortierungen verwenden, müssen sie die Funktion nur der Drag-and-Drop-Sortierung von Spalten implementieren, während die Zeilen unverändert bleiben. In diesem Artikel wird ausführlich erläutert, wie die sortierbare Bibliothek verwendet wird, um diese Funktion zu implementieren.

Problembeschreibung:

Unter der Annahme, dass die Tabellendaten in einem zweidimensionalen Array gespeichert sind, ist das Ziel, die Sortierung von Spalten der Drag & Drop zu implementieren, z. B. das Verschieben der Spalte "Value11" in die Position der Spalte "Value22". Der endgültige Effekt ist, dass die beiden Spalten ausgetauscht werden, die Zeilendaten jedoch unverändert bleiben. (Das Bildbeispiel wird hier weggelassen)

Lösung:

Die Kernidee besteht darin, die sortierbare Bibliothek zu verwenden, um die Spaltenindizes zu sortieren und die tabellarischen Daten gemäß der neuen Indexreihenfolge neu zu rendern. Die sortierbare Bibliothek arbeitet in der Reihenfolge der Array -Elemente. Wir arbeiten nicht direkt mit sortierbaren Moving Array -Elementen aus, sondern verwenden die von ihnen lieferten Indexsortierergebnisse, um die Daten neu zu organisieren.

Nehmen wir an, Ihre Datenstruktur lautet wie folgt:

 data = [
  ['value11', 'value12', 'value13'],
  ['value21', 'value22', 'value23'],
  ['value31', 'value32', 'value33']
];

Nehmen Sie nach der Verwendung der sortierbaren Bibliothek an, dass Sie die neue Spalte Indexreihenfolge erhalten:

 lass NewOrder = [1, 0, 2]; // Die neue Bestellung, die mit sortierbar zurückgegeben wird

Erstellen Sie die Tabellendaten nach newOrder :

 let newdata = data.map (row => row.map ((_, index) => row [NewOrder [index]]);

newData enthält nun die neu beordnten Spaltendaten, und Sie können die Tabelle mit newData neu erstellen. Denken Sie daran, dass Array -Indizes bei 0 beginnen und bei der Anzeige möglicherweise eine Tabelle zu 1 hinzugefügt werden muss. Die sortierbare Bibliothek ist nur für die Indexsortierung verantwortlich, und die Umstrukturierung von Daten muss manuell gemäß der von Sortable bereitgestellten Indexreihenfolge manuell durchgeführt werden.

Auf diese Weise können Sie die Drag & Drop -Funktion der sortierbaren Bibliothek verwenden, um die Sortierung von Tabellenspalten zu erreichen und gleichzeitig die Zeilenreihenfolge unverändert zu halten, wodurch die erwarteten Ergebnisse erzielt werden. Der Schlüssel ist zu verstehen, dass die sortierbare Bibliothek mit Indizes arbeitet, nicht mit den Daten selbst, und Entwickler müssen Daten basierend auf dem Index rekonstruieren.

Das obige ist der detaillierte Inhalt vonWie benutze ich die sortierbare Bibliothek, um Drag-and-Drop-Sortierung von Tabellenspalten zu implementieren, ohne die Zeilenreihenfolge zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!