Bagaimana cara menggunakan perpustakaan yang boleh disusun untuk melaksanakan penyortiran lajur meja dan drop tanpa menukar pesanan baris?

Gunakan perpustakaan yang boleh disusun untuk melaksanakan seretan dan drop pesanan lajur jadual, menjaga baris tidak berubah

Apabila banyak pemaju menggunakan perpustakaan yang boleh disusun untuk penyortiran seret dan drop, mereka perlu melaksanakan fungsi hanya penyisihan lajur seret dan drop sambil mengekalkan baris tidak berubah. Artikel ini akan menerangkan secara terperinci bagaimana menggunakan perpustakaan yang boleh disusun untuk melaksanakan fungsi ini.

Penerangan Masalah:

Dengan mengandaikan data jadual disimpan dalam array dua dimensi, matlamatnya adalah untuk melaksanakan penyortiran lajur drag-and-drop, seperti menggerakkan lajur "Value11" ke kedudukan lajur "Value22". Kesan akhir adalah bahawa kedua -dua lajur ditukar, tetapi data baris tetap tidak berubah. (Contoh gambar ditinggalkan di sini)

Penyelesaian:

Idea teras adalah menggunakan perpustakaan yang boleh disusun untuk menyusun indeks lajur, dan kemudian membuat semula data jadual mengikut urutan indeks baru. Perpustakaan Sortable beroperasi mengikut urutan elemen array. Kami tidak secara langsung beroperasi pada elemen array bergerak yang boleh disusun, tetapi gunakan hasil penyortiran indeks yang disediakan untuk menyusun semula data.

Katakan struktur data anda adalah seperti berikut:

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

Setelah menggunakan perpustakaan yang boleh disusun, anggaplah anda mendapatkan urutan indeks lajur baru:

 biarkan newOrder = [1, 0, 2]; // Pesanan baru yang dikembalikan dengan cara yang boleh diperbaiki bahawa lajur kedua kini berada di tempat pertama

Membangun semula data jadual mengikut newOrder :

 biarkan newData = data.map (row => row.map ((_, index) => row [newOrder [index]]));

newData kini mengandungi data lajur yang disusun semula, dan anda boleh membuat semula jadual dengan newData . Ingat bahawa indeks array bermula pada 0, dan jadual mungkin perlu ditambah kepada 1 semasa memaparkan. Perpustakaan Sortable hanya bertanggungjawab untuk penyortiran indeks, dan penyusunan semula data perlu dilakukan secara manual mengikut urutan indeks yang disediakan oleh Sortable.

Dengan cara ini, anda boleh menggunakan fungsi seret dan drop perpustakaan yang boleh disusun untuk mencapai penyortiran lajur jadual sambil mengekalkan perintah baris tidak berubah, dengan itu mencapai hasil yang diharapkan. Kuncinya adalah untuk memahami bahawa perpustakaan yang boleh disusun beroperasi pada indeks, bukan data itu sendiri, dan pemaju perlu membina semula data berdasarkan indeks.

Atas ialah kandungan terperinci Bagaimana cara menggunakan perpustakaan yang boleh disusun untuk melaksanakan penyortiran lajur meja dan drop tanpa menukar pesanan baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!