並べ替え可能なライブラリを使用して、列の注文を変更せずにテーブル列のドラッグアンドドロップソートを実装する方法は？

ソート可能なライブラリを使用して、テーブル列のドラッグアンドドロップ順序を実装し、行を変更せずに保持します

多くの開発者がドラッグアンドドロップソートにソート可能なライブラリを使用する場合、行を変更せずに列のドラッグアンドドロップソートのみの機能を実装する必要があります。この記事では、ソート可能なライブラリを使用してこの関数を実装する方法を詳細に説明します。

問題の説明：

テーブルデータが2次元配列に保存されていると仮定すると、目標は、「Value11」列を「Value22」列の位置に移動するなど、列のドラッグアンドドロップソートを実装することです。最終的な効果は、2つの列が交換されることですが、行データは変更されていません。 （写真の例は省略されています）

解決：

コアのアイデアは、ソート可能なライブラリを使用して列インデックスをソートし、新しいインデックス順序に従って表形式データを再レンダリングすることです。ソート可能なライブラリは、配列要素の順序で動作します。ソート可能な移動アレイ要素を直接動作するのではなく、データを再編成するために提供するインデックスソート結果を使用します。

データ構造が次のとおりであると仮定します。

データ= [[
  ['value11'、 'value12'、 'value13']、
  ['value21'、 'value22'、 'value23']、
  ['value31'、 'value32'、 'value33']
];

並べ替え可能なライブラリを使用した後、新しい列インデックスの順序が取得されていると仮定します。

 neworder = [1、0、2]; // sortableによって返された新しい注文は、2番目の列が最初にあることを意味します

newOrderに従ってテーブルデータを再構築します。

 let newData = data.map（row => row.map（（_、index）=> row [neworder [index]]））;

newDataには、並べ替えられた列データが含まれるようになり、 newDataでテーブルを再レンダリングできます。アレイインデックスは0から始まり、表示時にテーブルを1に追加する必要がある場合があることを忘れないでください。ソート可能なライブラリは、インデックスの並べ替えのみを担当し、データの再編成は、ソート可能なインデックス順序に従って手動で行う必要があります。

このようにして、並べ替え可能なライブラリのドラッグアンドドロップ関数を使用して、テーブル列の並べ替えを実現しながら、列を変化させずに、期待される結果を達成できます。重要なのは、ソート可能なライブラリがデータ自体ではなくインデックスで動作し、開発者がインデックスに基づいてデータを再構築する必要があることを理解することです。

以上が並べ替え可能なライブラリを使用して、列の注文を変更せずにテーブル列のドラッグアンドドロップソートを実装する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。