Introduction aux composants du framework JavaScript (xmlplus) (10) Grille (DataGrid)

xmlplus est un JavaScriptframework pour le développement rapide de projets front-end et back-end. Cet article présente principalement la grille xmlplus dans 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 à

Dans ce chapitre, nous allons implémenter un composant de grille en plus du composant. fonction d'affichage des données la plus basique, il fournit également des fonctions de tri et de filtrage des données.

Source de données

Afin de tester que nous sommes sur le point d'écrire le composant de grille, nous utilisons les données source au format suivant. Cette source de données contient deux parties, à savoir l'en-tête ensemble de données et l'ensemble de données du corps du tableau. Le nombre final de colonnes dans l'instance du composant de grille est déterminé par la longueur de l'ensemble de données d'en-tête.

var data = {
 gridColumns: ['name', 'power'],
 gridData: [
 { name: 'Chuck Norris', power: Infinity },
 { name: 'Bruce Lee', power: 9000 },
 { name: 'Jackie Chan', power: 7000 },
 { name: 'Jet Li', power: 8000 }
 ]
};

Conception de haut niveau

Visuellement, nous divisons naturellement les composants de la grille en en-têtes de tableau et en corps de tableau. Ce composant de grille a trois fonctions, il doit donc fournir trois interfaces dynamiques. Mais nous avons remarqué que la fonction de tri est effectuée en cliquant sur l'en-tête du tableau, et que l'en-tête du tableau fait partie du composant grille, cette fonction doit donc être intégrée. Par conséquent, en fait, notre composant grille n'expose que deux interfaces dynamiques au monde extérieur : une pour le filtrage et l'autre pour la réception des sources de données. Nous pouvons donc obtenir une conception de haut niveau comme suit.

DataGrid: {
 xml: `<table id=&#39;table&#39;>
  <Thead id=&#39;thead&#39;/>
  <Tbody id=&#39;tbody&#39;/>
  </table>`,
 fun: function (sys, items, opts) {
 function setValue(data) {
  items.thead.val(data.gridColumns);
  items.tbody.val(data.gridColumns, data.gridData);
 }
 function filter(filterKey) {
  // 过滤函数
 }
 return { val: setValue, filter: filter };
 }
}

En-tête du tableau de conception

L'en-tête du tableau n'a qu'une seule ligne, vous pouvez donc lui fournir directement un élément tr. Le nombre d'éléments enfants de l'élément tr dépend de la longueur de l'ensemble de données d'en-tête, il doit donc être créé dynamiquement. Étant donné que le ème élément contient la fonction de tri, il doit être encapsulé séparément. Vous trouverez ci-dessous la conception de l'en-tête que nous avons donné.

Thead: {
 xml: `<thead id=&#39;thead&#39;>
  <tr id=&#39;tr&#39;/>
  </thead>`,
 fun: function (sys, items, opts) {
 function setValue(value) {
  sys.tr.children().call("remove");
  data.forEach(item => sys.tr.append("Th").value().val(item));
 }
 return { val: setValue };
 }
}

Le composant d'élément de données d'en-tête fournit une interface de configuration de texte. Le composant lui-même n'est pas responsable du tri. Il effectue uniquement le changement de sa propre vue statut et l'envoi des commandes de tri. L'envoi des commandes de tri doit transporter deux éléments de données : l'un est le mot-clé de tri, qui est le texte d'en-tête ; l'autre est le sens de tri, ascendant ou décroissant ;

Th: {
 css: "#active { color: #fff; } #active #arrow { opacity: 1; } #active #key { color: #fff; }\
  #arrow { display: inline-block; vertical-align: middle; width: 0; height: 0; margin-left: 5px; opacity: 0.66; }\
  #asc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #fff;}\
  #dsc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; }",
 xml: "<th id=&#39;th&#39;>\
  <span id=&#39;key&#39;/><span id=&#39;arrow&#39;/>\
  </th>",
 fun: function (sys, items, opts) {
 var order = "#asc";
 this.watch("sort", function (e, key, order) {
  sys.key.text().toLowerCase() == key || sys.th.removeClass("#active");
 });
 this.on("click", function (e) {
  sys.th.addClass("#active");
  sys.arrow.removeClass(order);
  order = order == "#asc" ? "#dsc" : "#asc";
  sys.arrow.addClass(order).notify("sort", [sys.key.text().toLowerCase(), order]);
 });
 sys.arrow.addClass("#asc");
 return { val: sys.key.text };
 }
}

Conception du corps du tableau

Le corps du tableau peut avoir plusieurs lignes, mais le corps du tableau est uniquement responsable de l'affichage des données, il est donc plus simple à mettre en œuvre que l'en-tête du tableau.

Tbody: {
 xml: `<tbody id=&#39;tbody&#39;/>`,
 fun: function (sys, items, opts) {
 function setValue(gridColumns, gridData) {
  sys.tbody.children().call("remove");
  gridData.forEach(data => 
  tr = sys.tbody.append("tr");
  gridColumns.forEach(key => tr.append("td").text(data[key]));
  ));
 }
 return { val: setValue };
 }
}

Ajouter une fonction de tri

Afin de faciliter la gestion, nous encapsulons séparément la fonction de tri dans un composant, qui fournit une interface de tri et détecte Écoutez un message trié. Une fois le message de tri reçu, les mots-clés et le sens de tri sont enregistrés et une commande d'actualisation de table est émise.

Sort: {
 fun: function (sys, items, opts) {
 var sortKey, sortOrder;
 this.watch("sort", function (e, key, order) {
  sortKey = key, sortOrder = order;
  this.trigger("update");
 });
 return function (data) {
  return sortKey ? data.slice().sort(function (a, b) {
  a = a[sortKey], b = b[sortKey];
  return (a === b ? 0 : a > b ? 1 : -1) * (sortOrder == "#asc" ? 1 : -1);
  }) : data;
 };
 }
}

Pour réaliser pleinement la fonction de tri, apportez quelques modifications au composant DataGrid, principalement pour intégrer le composant de fonction de tri ci-dessus et écouter la commande d'actualisation du corps de la table. Une fois la commande d'actualisation reçue, les données du corps de la table sont triées et le corps de la table est actualisé.

DataGrid: {
 xml: `<table id=&#39;table&#39;>
  <Thead id=&#39;thead&#39;/>
  <Tbody id=&#39;tbody&#39;/>
  <Sort id=&#39;sort&#39;/>
  </table>`,
 fun: function (sys, items, opts) {
 var data = {gridColumns: [], gridData: []};
 function setValue(value) {
  data = value;
  items.thead.val(data.gridColumns);
  items.tbody.val(data.gridColumns, data.gridData);
 }
 function filter(filterKey) {
  // 过滤函数
 }
 this.on("update", function() {
  items.tbody.val(items.sort(data.gridData));
 });
 return { val: setValue, filter: filter };
 }
}

Ajouter une fonction de filtrage

Similaire au processus d'ajout d'une fonction de tri, nous encapsulons la fonction de filtrage dans un composant séparé, qui fournit un filtre interface tout en écoutant un message filtré. Une fois le message reçu, le mot-clé du filtre est enregistré et une commande d'actualisation du corps de la table est envoyée.

Filter: {
 fun: function (sys, items, opts) {
 var filterKey = "";
 this.watch("filter", function (e, key) {
  filterKey = key.toLowerCase();
  this.trigger("update");
 });
 return function (data) {
  return data.filter(function (row) {
  return Object.keys(row).some(function (key) {
   return String(row[key]).toLowerCase().indexOf(filterKey) > -1;
  });
  });
 };
 }
}

De plus, certaines modifications doivent être apportées au composant DataGrid. Le contenu de la modification est similaire à l'ajout de la fonction de tri mentionnée ci-dessus. La différence est que l'interface de filtre est en outre améliorée et. la portée du message est restreinte. Vous trouverez ci-dessous notre dernier composant de grille.

DataGrid: {
 css: `#table { border: 2px solid #42b983; border-radius: 3px; background-color: #fff; }
  #table th { background-color: #42b983; color: rgba(255,255,255,0.66); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  #table td { background-color: #f9f9f9; }
  #table th, #table td { min-width: 120px; padding: 10px 20px; }`,
 xml: `<table id=&#39;table&#39;>
  <Thead id=&#39;thead&#39;/>
  <Tbody id=&#39;tbody&#39;/>
  <Sort id=&#39;sort&#39;/>
  <Filter id=&#39;filter&#39;/>
  </table>`,
 map: { msgscope: true },
 fun: function (sys, items, opts) {
 var data = {gridColumns: [], gridData: []};
 function setValue(value) {
  data = value;
  items.thead.val(data.gridColumns);
  items.tbody.val(data.gridColumns, data.gridData);
 }
 function filter(filterKey) {
  sys.table.notify("filter", filterKey);
 }
 this.on("update", function() {
  items.tbody.val(items.filter(items.sort(data.gridData)));
 });
 return { val: setValue, filter: filter };
 }
}

Il est à noter que l'option permettant de limiter la portée du message doit être configurée dans l'élément de mappage. Sinon, lorsque plusieurs composants de grille sont instanciés dans une application, les messages interféreront les uns avec les autres.

Test

Enfin, testons les composants que nous avons complétés. Les principales fonctions du test sont les trois mentionnées au début : affichage des données, tri et. filtre.

Index: {
 css: "#index { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444; }\
  #search { margin: 8px 0; }",
 xml: "<p id=&#39;index&#39;>\
  Search <input id=&#39;search&#39;/>\
  <Table id=&#39;table&#39;/>\
  </p>",
 fun: function (sys, items, opts) {
 items.table.val(data);
 sys.search.on("input", e => items.table.filter(sys.search.prop("value")));
 }
}

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!