Bagaimana untuk menggunakan JavaScript untuk melaksanakan pelarasan drag-and-drop lebar lajur jadual?

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi pelarasan seret dan lepas lebar lajur jadual?

Dengan perkembangan teknologi Web, semakin banyak data dipaparkan di halaman web dalam bentuk jadual. Walau bagaimanapun, kadangkala lebar lajur jadual tidak dapat memenuhi keperluan kami dan kandungan mungkin melimpah atau lebar mungkin tidak mencukupi. Untuk menyelesaikan masalah ini, kami boleh menggunakan JavaScript untuk melaksanakan fungsi pelarasan drag-and-drop lebar lajur jadual, supaya pengguna bebas melaraskan lebar lajur mengikut keperluan mereka.

Untuk melaksanakan fungsi pelarasan seret dan lepas lebar lajur jadual, tiga langkah utama berikut diperlukan:

1. Pemantauan acara tetikus: Anda perlu menambah acara tetikus pemantauan ke jadual untuk menangkap tingkah laku operasi Pengguna.
2. Pelarasan dinamik lebar lajur: Laraskan lebar lajur jadual secara dinamik mengikut operasi seretan pengguna.
3. Rekod status jadual: Rekod status lebar lajur yang dilaraskan oleh pengguna supaya hasil pelarasan dapat dikekalkan selepas halaman dimuat semula atau dimuat semula.

Berikut akan memperkenalkan kaedah pelaksanaan tiga langkah di atas secara terperinci dan memberikan contoh kod yang sepadan.

1. Mendengar acara tetikus

Pertama, tambahkan acara turun tetikus pada jadual. Apabila pengguna mengklik pada tepi lajur jadual, mereka boleh mula menyeret untuk melaraskan lebar lajur. Dalam pengendali acara mousedown, kedudukan klik tetikus perlu direkodkan. mousedown 事件监听。当用户点击表格列边缘时，可以开始拖拽调整列宽。在 mousedown 事件处理函数中，需要记录鼠标点击的位置。

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

接着，为 document 对象添加 mousemove 事件监听。在 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`;
    }
  }
});

Seterusnya, tambahkan pendengar acara mousemove untuk objek document. Dalam fungsi pengendali acara mousemove, anda perlu mengira jarak yang digerakkan oleh tetikus dan menukar lebar lajur jadual secara dinamik.

rrreee

Akhir sekali, tambahkan pendengar acara mouseup untuk objek document. Apabila pengguna melepaskan tetikus, hentikan saiz semula lebar lajur. #🎜🎜#rrreee

#🎜🎜#Pelarasan dinamik lebar lajur#🎜🎜##🎜🎜##🎜🎜#Dalam fungsi pengendalian acara mousemove, mengikut pengguna Seret dan lepas untuk melaraskan lebar lajur jadual secara dinamik. Mula-mula, anda perlu menentukan lajur yang sedang diseret, yang boleh ditentukan melalui elemen th dalam pengepala jadual. Kemudian, tukar lebar lajur jadual secara dinamik berdasarkan jarak pergerakan tetikus yang dikira. #🎜🎜#rrreee
#🎜🎜#Rekod status jadual#🎜🎜##🎜🎜##🎜🎜#Untuk mengekalkan lebar lajur yang dilaraskan pengguna selepas muat semula halaman atau muat semula, kami memerlukan ke Status lebar lajur jadual direkodkan. Anda boleh menggunakan localStorage atau cookie untuk mencapai storan data yang berterusan. #🎜🎜#rrreee#🎜🎜#Pada pemuatan halaman, keadaan lebar lajur yang disimpan boleh dibaca daripada localStorage dan digunakan pada jadual. #🎜🎜#rrreee#🎜🎜#Melalui tiga langkah di atas, kita boleh merealisasikan fungsi pelarasan seret dan lepas lebar lajur jadual. Pengguna boleh melaraskan lebar lajur jadual secara bebas dan mengoptimumkan kesan paparan jadual mengikut keperluan sebenar. Semoga artikel ini dapat membantu anda! #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk melaksanakan pelarasan drag-and-drop lebar lajur jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!