Comment utiliser JavaScript pour implémenter l'expansion dynamique des tables et des lignes d'ordre N?

Utilisez JavaScript pour implémenter l'expansion dynamique des tables et des lignes d'ordre N

Dans le développement frontal, il est souvent nécessaire de mettre en œuvre des fonctions d'expansion dynamique similaires à Finereport, qui prend en charge l'expansion horizontale et verticale des données de table, et peut gérer l'expansion imbriquée à n'importe quel niveau. Cet article expliquera comment implémenter cette fonctionnalité à l'aide de JavaScript.

Analyse des exigences

Nous devons créer un composant JavaScript qui peut étendre et rétrécir dynamiquement les données tabulaires, avec les fonctions suivantes:

• Extension horizontale dynamique: développez les colonnes du tableau pour afficher des données plus détaillées.
• Extension verticale dynamique: développez les lignes du tableau pour afficher les données de sous-rang.
• Nidification à n'importe quel niveau: prend en charge l'expansion de données tabulaires imbriquées multicouches.

Plan de mise en œuvre

La clé de la mise en œuvre de cette fonction réside dans la conception intelligente de la structure des données et le fonctionnement DOM.

1. Structure des données: utilisez une structure d'arbre (comme un objet JSON) pour représenter des données tabulaires à plusieurs niveaux. Chaque nœud contient ses propres données et un tableau de nœud enfant. Par exemple:

 {
  "id": 1,
  "nom": "catégorie 1",
  "enfants": [
    {
      "id": 11,
      "Nom": "Sous-catégorie 1.1",
      "enfants": [
        {"id": 111, "nom": "Item 1.1.1"}
      ]]
    },
    {
      "id": 12, "nom": "Sous-catégorie 1.2", "enfants": []}
  ]]
}

2. Opération DOM: utilisez JavaScript pour créer et manipuler dynamiquement les éléments DOM. Nous pouvons créer et ajouter des lignes de table et des cellules en utilisant des méthodes createElement et appendChild .

3. Gestion des événements: ajoutez un écouteur d'événements cliquez à une ligne de table ou à une cellule. Cliquez sur l'événement pour développer ou rétrécir l'opération et mettre à jour le DOM.

Exemple de code (version simplifiée, affichant uniquement la logique de base)

 fonction redaitable (données, parentement) {
  const Table = document.CreateElement ('Table');
  data.ForEach (item => {
    const row = table.insertrow ();
    const cell = row.insertCell ();
    Cell.TextContent = item.name;

    if (item.children && item.children.length> 0) {
      const Expancon = Document.CreateElement ('Span');
      ExpandiCon.TextContent = ''; // élargir l'icône Cell.ApendChild (Expancon);

      ExpandiCon.AddeventListener ('click', () => {
        if (row.nextelelementSibling) {// élargi, puis rétrécir Row.nextelelementSibling.Remove ();
          ExpandiCon.TextContent = '';
        } else {// Si non étendu, développez const usable = document.createElement ('table');
          Redaitable (item.children, sous-table);
          parentement.insertBefore (Subtable, Row.NextSibling);
          ExpandiCon.TextContent = '-';
        }
      });
    }
  });
  Parentement.ApendChild (tableau);
}

// Exemple de données consta data = {/ * ... (data JSON comme indiqué ci-dessus) ... * /};

// Obtenez l'élément de conteneur const Container = Document.getElementById ('Container');

// Render le tableau renderable (données.children, conteneur);

Cet exemple de code est une version simplifiée qui affiche uniquement la logique principale. Dans les applications pratiques, plus de détails peuvent devoir être pris en compte, tels que le style, la gestion des erreurs, l'optimisation des performances, etc. L'expansion horizontale nécessite des structures de données et des opérations de DOM plus complexes, et peut être considérée à l'aide de tables imbriquées ou d'autres méthodes de mise en page. Une implémentation complète nécessite plus de code, mais l'idée principale est indiquée ci-dessus.

Espérons que cette réponse améliorée peut expliquer plus clairement comment implémenter la fonction de l'élargissement des tables et des lignes d'ordre N. N'oubliez pas que ce n'est qu'un exemple simplifié, et il doit être ajusté et amélioré en fonction des besoins spécifiques dans les applications réelles.

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!