Comment utiliser JavaScript pour réaliser la fonction d'ajustement par glisser-déposer de la largeur des colonnes du tableau ?

Comment utiliser JavaScript pour implémenter l'ajustement par glisser-déposer de la largeur des colonnes du tableau ?

Avec le développement de la technologie web, de plus en plus de données sont affichées sur les pages web sous forme de tableaux. Cependant, il arrive parfois que la largeur des colonnes du tableau ne puisse pas répondre à nos besoins et que le contenu puisse déborder ou que la largeur soit insuffisante. Afin de résoudre ce problème, nous pouvons utiliser JavaScript pour implémenter la fonction d'ajustement par glisser-déposer de la largeur des colonnes du tableau, afin que les utilisateurs puissent ajuster librement la largeur des colonnes en fonction de leurs besoins.

Pour implémenter la fonction d'ajustement par glisser-déposer de la largeur des colonnes du tableau, les trois étapes principales suivantes sont requises :

1. Surveillance des événements de souris : Il est nécessaire d'ajouter la surveillance des événements de souris au tableau pour capturer le comportement de fonctionnement de l'utilisateur.
2. Ajustement dynamique de la largeur des colonnes : ajustez dynamiquement la largeur des colonnes du tableau en fonction de l'opération de glissement de l'utilisateur.
3. Enregistrer l'état de la table : enregistrez l'état de la largeur de colonne ajusté par l'utilisateur afin que les résultats de l'ajustement puissent être conservés après l'actualisation ou le rechargement de la page.

La méthode de mise en œuvre des trois étapes ci-dessus sera présentée en détail ci-dessous et des exemples de code correspondants seront donnés.

1. Écoute d'événement de souris

Tout d'abord, ajoutez l'événement mousedown écoutant la table. Lorsque l'utilisateur clique sur le bord d'une colonne de tableau, il peut commencer à faire glisser pour ajuster la largeur de la colonne. Dans le gestionnaire d'événements mousedown, la position du clic de souris doit être enregistrée. 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`;
    }
  }
});

Ensuite, ajoutez l'écouteur d'événement mousemove pour l'objet document. Dans le gestionnaire d'événements mousemove, vous devez calculer la distance déplacée par la souris et modifier dynamiquement la largeur de la colonne du tableau.

rrreee

Enfin, ajoutez l'écouteur d'événement mouseup pour l'objet document. Lorsque l'utilisateur relâche la souris, arrêtez de redimensionner la largeur de la colonne. 🎜rrreee

🎜Ajustement dynamique des largeurs de colonnes🎜🎜🎜Dans le gestionnaire d'événements mousemove, ajustez dynamiquement la largeur des colonnes du tableau en fonction de l'opération de glisser de l'utilisateur. Tout d'abord, vous devez déterminer quelle colonne est actuellement déplacée, ce qui peut être déterminé via l'élément th en tête du tableau. Ensuite, modifiez dynamiquement la largeur de la colonne du tableau en fonction de la distance de mouvement calculée de la souris. 🎜rrreee
🎜Enregistrer l'état du tableau🎜🎜🎜Afin de maintenir la largeur de colonne ajustée par l'utilisateur après l'actualisation ou le rechargement de la page, nous devons enregistrer l'état de la largeur de colonne du tableau. Vous pouvez utiliser localStorage ou cookie pour obtenir un stockage de données persistant. 🎜rrreee🎜Au chargement de la page, l'état de largeur de colonne enregistré peut être lu à partir de localStorage et appliqué à la table. 🎜rrreee🎜Grâce aux trois étapes ci-dessus, nous pouvons réaliser la fonction d'ajustement par glisser-déposer de la largeur des colonnes du tableau. Les utilisateurs peuvent ajuster librement la largeur des colonnes du tableau et optimiser l'effet d'affichage du tableau en fonction des besoins réels. J'espère que cet article vous sera utile ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!