JavaScript を使用してテーブルの列幅のドラッグ アンド ドロップ調整を実装するにはどうすればよいですか?

JavaScript を使用してテーブルの列幅のドラッグ アンド ドロップ調整を実装するにはどうすればよいですか?

Web テクノロジーの発展に伴い、Web ページ上に表形式で表示されるデータがますます増えています。ただし、表の列幅がニーズを満たせない場合があり、内容がオーバーフローしたり、幅が不足したりすることがあります。この問題を解決するには、JavaScript を使用してテーブルの列幅のドラッグ アンド ドロップ調整機能を実装し、ユーザーが必要に応じて列幅を自由に調整できるようにします。

テーブル列幅のドラッグ アンド ドロップ調整機能を実装するには、次の 3 つの主な手順が必要です。

1. マウス イベント監視: マウス イベント監視を追加する必要があります。ユーザーの操作行動をキャプチャするためにテーブルに追加します。
2. 列幅の動的調整: ユーザーのドラッグ操作に応じて表の列の幅を動的に調整します。
3. テーブルのステータスを記録する: ページが更新または再ロードされた後も調整結果を維持できるように、ユーザーが調整した列幅のステータスを記録します。

以下では、上記 3 つのステップの実装方法を詳細に紹介し、対応するコード例を示します。

1. マウス イベント リッスン

まず、テーブルをリッスンする mousedown イベントを追加します。ユーザーが表の列の端をクリックすると、ドラッグを開始して列の幅を調整できます。 mousedown イベント処理関数では、マウス クリックの位置を記録する必要があります。

function tableMouseDown(event) {
  // 记录鼠标点击的位置
  const startX = event.clientX;
  // ...
}

次に、mousemove イベント リスナーを document オブジェクトに追加します。 mousemove イベント ハンドラー関数では、マウスの移動距離を計算し、テーブルの列の幅を動的に変更する必要があります。

function documentMouseMove(event) {
  // 计算鼠标移动的距离
  const distanceX = event.clientX - startX;
  // 动态改变表格列的宽度
  // ...
}

最後に、document オブジェクトの mouseup イベント リスナーを追加します。ユーザーがマウスを放すと、列幅のサイズ変更が停止します。

function documentMouseUp() {
  // 停止调整列宽
  // ...
}

2. 列幅の動的調整

mousemove イベント ハンドラーで、ユーザーのドラッグ操作に応じてテーブルの列の幅を動的に調整します。 。まず、現在どの列がドラッグされているかを確認する必要があります。これは、テーブルのヘッダーの th 要素によって確認できます。次に、計算されたマウスの移動距離に基づいて表の列の幅を動的に変更します。

function documentMouseMove(event) {
  // 计算鼠标移动的距离
  const distanceX = event.clientX - startX;
  
  // 动态改变表格列的宽度
  const th = document.elementFromPoint(startX, event.clientY);
  const columnIndex = th.cellIndex;
  const table = th.parentNode.parentNode.parentNode;
  const cells = table.querySelectorAll(`tr th:nth-child(${columnIndex + 1}), tr td:nth-child(${columnIndex + 1})`);

  const newWidth = parseFloat(getComputedStyle(cells[0]).width) + distanceX;
  for (const cell of cells) {
    cell.style.width = `${newWidth}px`;
  }
}

3. テーブルのステータスを記録する

ページが更新または再ロードされた後、ユーザーが調整した列幅を維持するには、列幅のステータスを記録する必要があります。テーブル。 localStorage または cookie を使用して、永続的なデータ ストレージを実現できます。

function documentMouseUp() {
  // 停止调整列宽
  // ...

  // 记录表格的列宽状态
  const columnWidths = {};
  const table = document.querySelector('table');
  const columns = table.querySelectorAll('th');
  for (const column of columns) {
    columnWidths[column.cellIndex] = parseFloat(getComputedStyle(column).width);
  }
  
  localStorage.setItem('columnWidths', JSON.stringify(columnWidths));
}

ページが読み込まれると、保存された列幅の状態を localStorage から読み取ってテーブルに適用できます。

window.addEventListener('load', function() {
  const columnWidths = JSON.parse(localStorage.getItem('columnWidths'));
  if (columnWidths) {
    const table = document.querySelector('table');
    const columns = table.querySelectorAll('th');
    for (const [index, width] of Object.entries(columnWidths)) {
      columns[index].style.width = `${width}px`;
    }
  }
});

上記の 3 つの手順により、テーブルの列幅のドラッグ アンド ドロップ調整機能を実現できます。ユーザーはテーブルの列幅を自由に調整し、実際のニーズに応じてテーブルの表示効果を最適化できます。この記事がお役に立てば幸いです!

以上がJavaScript を使用してテーブルの列幅のドラッグ アンド ドロップ調整を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。