Introduction aux composants du framework JavaScript (xmlplus) (Neuf) Arbre (Arbre)

xmlplus est un framework JavaScript utilisé pour le développement rapide de projets front-end et back-end. Cet article présente principalement l'arbre de la série de conception de composants XMLplus, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Le composant arbre est un composant avec une structure hiérarchique et est largement utilisé dans divers types de scènes. Ce chapitre implémentera un composant d'arborescence simple. Bien que ses fonctionnalités soient limitées, vous pouvez l'étendre pour implémenter le composant d'arborescence dont vous avez besoin.

Source de données

La source de données du composant arbre peut être un objet de données au format JSON, ou il peut être un objet de données avec des données structurées XML ou d'autres données structurées hiérarchiquement. Ce chapitre utilisera des objets de données au format JSON suivant.

var data = {
 name: 'My Tree',
 children: [
 { name: 'hello' },
 { name: 'world' },
 {
  name: 'child folder',
  children: [
  { name: 'alice' }
  ]
 }
 ]
};

Dans la source de données ci-dessus, la valeur du nom sera affichée comme nom du nœud de l'arborescence, et le tableau contenant les enfants représente les enfants du nœud.

Conception d'une structure récursive

L'objet est composé des éléments de liste ul et li en HTML L'objet a une structure arborescente naturelle. utilisez-les comme éléments de base pour construire des composants d'arborescence. La couche la plus externe du composant tree doit être un élément ul, nous pouvons donc définir temporairement le composant tree comme suit :

Tree: {
 xml: `<ul id=&#39;tree&#39;>
   <Item id=&#39;item&#39;/>
   </ul>`
}

Le composant non défini Item ici est un composant de sous-élément qui doit être défini de manière récursive. . Les objets descendants sont générés de manière récursive en fonction des données fournies. Voici une conception possible :

Item: {
 xml: `<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;/>
   </li>`,
 map: { defer: "entries" }
}

Notez que l'objet neme ci-dessus est utilisé pour afficher l'attribut name. L'objet développer est utilisé pour développer ou fermer les entrées d'objet enfant. Les entrées d'objet enfant sont configurées pour nécessiter une instanciation paresseuse et ne seront instanciées que lorsque l'utilisateur clique sur l'objet développé pour développer l'enfant.

Chargement et rendu des données

Comme mentionné dans la section précédente, nous définissons les entrées de l'objet enfant pour qu'elles soient instanciées paresseusement. Par conséquent, l’interface de configuration des données fournie pour le sous-élément Item ne doit pas instancier les entrées immédiatement. Ci-dessous, nous donnons d'abord la fonction d'interface de données.

Item: {
 // css, xml, map 项同上
 fun: function (sys, items, opts) {
  var data;
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

Cette fonction d'interface val définit simplement le contenu lié au nœud actuel. Ensuite, nous écoutons l'événement click de l'objet expand et terminons l'instanciation des entrées de l'objet composant en temps opportun.

Item: {
 // css, xml, map 项同上
 fun: function (sys, items, opts) {
  var data, open;
  sys.expand.on("click", function () {
   open = !open;
   sys.expand.text(open ? " [-]" : " [+]");
   open ? (sys.entries.show() && load()) : sys.entries.hide();
  });
  function load() {
   if ( sys.entries.children().length == 0 )
    for ( var item of data.children )
    sys.add.before("Item").value().val(item);
  }
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

Le code ci-dessus contient un paramètre ouvert, qui enregistre si le nœud actuel est dans un état développé pour être utilisé par les écouteurs associés.

Ajouter dynamiquement des nœuds

Nous créons maintenant une petite extension au composant ci-dessus afin qu'il prenne en charge la fonction d'ajout dynamique de nœuds d'arborescence. Tout d’abord, nous ajoutons un bouton de déclenchement à l’enfant de l’objet d’entrées et le nommons add.

Item: {
 xml: "<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;>
    <li id=&#39;add&#39;>+</li>
   </ul>
   </li>",
 map: { defer: "entries" }
}

Deuxièmement, vous devez écouter l'événement click de l'objet add et terminer l'ajout de l'objet dans l'écouteur.

Item: {
 // css, xml, map 项同前
 fun: function (sys, items, opts) {
  var data, open;
  sys.item.on("click", "//*[@id='add']", function () {
   var stuff = {name: 'new stuff'};
   data.children.push(stuff);
   sys.add.before("Item").value().val(stuff);
  });
  // 其余代码同前
 }
}

Il est à noter ici que la méthode d'écoute de l'objet add ne peut pas être utilisée directement : sys.add.on("click",...), mais la méthode proxy doit être utilisée, sinon, une erreur sera signalée. Étant donné que son parent est un composant instancié paresseusement, l'objet add n'est pas visible tant que l'objet d'entrées n'est pas instancié.

Composant arbre complet

Sur la base du contenu ci-dessus, une version complète du composant arbre est maintenant donnée :

Tree: {
 css: `#tree { font-family: Menlo, Consolas, monospace; color: #444; }
   #tree, #tree ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; }`,
 xml: `<ul id=&#39;tree&#39;>
   <Item id=&#39;item&#39;/>
   </ul>`,
 fun: function (sys, items, opts) {
  return items.item;
 }
},
Item: {
 css: "#item { cursor: pointer; }",
 xml: `<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;>
    <li id=&#39;add&#39;>+</li>
   </ul>
   </li>`,
 map: { defer: "entries" },
 fun: function (sys, items, opts) {
  var data, open;
  sys.item.on("click", "//*[@id=&#39;add&#39;]", function () {
   var stuff = {name: &#39;new stuff&#39;};
   data.children.push(stuff);
   sys.add.before("Item").value().val(stuff);
  });
  sys.expand.on("click", function () {
   open = !open;
   sys.expand.text(open ? " [-]" : " [+]");
   open ? (sys.entries.show() && load()) : sys.entries.hide();
  });
  function load() {
   if ( sys.entries.children().length == 1 )
    for ( var item of data.children )
    sys.add.before("Item").value().val(item);
  }
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

Le composant arborescence dans les applications réelles aura plus de fonctions qu'ici. Vous pouvez l'améliorer encore en fonction du code ci-dessus, comme l'ajout de certaines icônes ICON, la création de sous-éléments déplaçables, etc. Cependant, il est très nécessaire d'éviter autant que possible de compliquer le code lors du processus d'amélioration. Il est nécessaire de supprimer de manière appropriée une partie du code et de l'encapsuler dans des composants.

Cette série d'articles est basée sur le framework xmlplus. Si vous ne savez pas grand-chose sur XMLplus, vous pouvez visiter www.xmlplus.cn. Une documentation détaillée de démarrage est disponible ici.

[Recommandations associées]

1 Tutoriel vidéo en ligne js gratuit

2 Manuel de référence en chinois JavaScript.

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

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!