Einführung in die Komponenten des JavaScript-Frameworks (xmlplus) (10) Grid (DataGrid)

xmlplus ist ein JavaScriptFramework für die schnelle Entwicklung von Front-End- und Back-End-Projekten. In diesem Artikel wird hauptsächlich das xmlplus-Raster in der xmlplus-Komponentendesignreihe vorgestellt, auf das sich interessierte Freunde beziehen können.

In diesem Kapitel werden wir eine Rasterkomponente implementieren Neben der grundlegendsten Datenanzeigefunktion bietet es auch Sortier- und Datenfilterungsfunktionen.

Datenquelle

Um zu testen, ob wir dabei sind, die Rasterkomponente zu schreiben, verwenden wir die Daten Quelle im folgenden Format. Diese Datenquelle enthält zwei Teile, nämlich den Header--Datensatz und den Tabellenkörper-Datensatz. Die endgültige Anzahl der Spalten in der Rasterkomponenteninstanz wird durch die Länge des Kopfdatensatzes bestimmt.

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 }
 ]
};

Design auf höchstem Niveau

Optisch unterteilen wir die Rasterkomponenten natürlich in Tabellenköpfe und Tabellenkörper. Diese Rasterkomponente hat drei Funktionen und sollte daher drei dynamische Schnittstellen bereitstellen. Wir haben jedoch festgestellt, dass die Sortierfunktion durch Klicken auf den Tabellenkopf ausgeführt wird und der Tabellenkopf Teil der Rasterkomponente ist. Daher sollte diese Funktion integriert sein. Daher stellt unsere Grid-Komponente der Außenwelt tatsächlich nur zwei dynamische Schnittstellen zur Verfügung: eine zum Filtern und die andere zum Empfangen von Datenquellen. So können wir wie folgt ein Top-Level-Design erhalten.

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 };
 }
}

Tabellenkopf entwerfen

Der Tabellenkopf hat nur eine Zeile, sodass Sie ihn direkt mit einem tr-Element versehen können. Die Anzahl der untergeordneten Elemente des tr-Elements hängt von der Länge des Header-Datensatzes ab und muss daher dynamisch erstellt werden. Da das te-Element die Sortierfunktion enthält, muss es separat gekapselt werden. Unten sehen Sie das Design des Headers, den wir gegeben haben.

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 };
 }
}

Die Kopfdatenelementkomponente bietet eine Texteinstellungsschnittstelle. Die Komponente selbst ist nicht für die Sortierung verantwortlich. Sie führt lediglich die Änderung ihres eigenen Ansichts Status und den Versand von Sortierbefehlen durch. Der Versand des Sortierbefehls muss zwei Daten enthalten: eines ist das Sortierschlüsselwort, das den Kopftext darstellt, und das andere ist die Sortierrichtung, aufsteigend oder absteigend.

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 };
 }
}

Entwerfen des Tabellenkörpers

Der Tabellenkörper kann mehrere Zeilen haben, aber der Tabellenkörper ist nur für die Anzeige von Daten verantwortlich, also ist er es auch einfacher zu implementieren als der Tabellenkopf Viel.

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 };
 }
}

Sortierfunktion hinzufügen

Um die Verwaltung zu erleichtern, kapseln wir die Sortierfunktion separat in eine Komponente, die eine Sortierschnittstelle bereitstellt und erkennt Hören Sie sich eine sortierte Nachricht an. Sobald die Sortiernachricht empfangen wird, werden die Schlüsselwörter und die Sortierrichtung aufgezeichnet und ein Befehl zur Tabellenaktualisierung ausgegeben.

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;
 };
 }
}

Um die Sortierfunktion vollständig zu realisieren, nehmen Sie einige Änderungen an der Komponente DataGrid vor, hauptsächlich um die obige Sortierfunktionskomponente einzubauen und den Befehl zum Aktualisieren des Tabellenkörpers abzuhören. Sobald der Aktualisierungsbefehl empfangen wird, werden die Daten des Tabellenkörpers sortiert und der Tabellenkörper aktualisiert.

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 };
 }
}

Filterfunktion hinzufügen

Ähnlich wie beim Hinzufügen einer Sortierfunktion kapseln wir die Filterfunktion in eine separate Komponente, die einen Filter bereitstellt Schnittstelle, während auf eine gefilterte Nachricht gewartet wird. Sobald die Nachricht empfangen wurde, wird das Filterschlüsselwort aufgezeichnet und ein Befehl zur Aktualisierung des Tabellenkörpers gesendet.

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;
  });
  });
 };
 }
}

Darüber hinaus müssen einige Änderungen an der Komponente DataGrid vorgenommen werden. Der Änderungsinhalt ähnelt dem Hinzufügen der oben genannten Sortierfunktion. Der Unterschied besteht darin, dass die Filterschnittstelle zusätzlich verbessert wird Der Nachrichtenumfang ist eingeschränkt. Unten finden Sie unsere letzte Rasterkomponente.

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 };
 }
}

Es ist zu beachten, dass die Option zur Einschränkung des Nachrichtenumfangs im Mapping-Element konfiguriert werden muss. Andernfalls kommt es bei der Instanziierung mehrerer Grid-Komponenten in einer Anwendung zu gegenseitigen Störungen der Nachrichten.

Testen

Abschließend testen wir die von uns abgeschlossenen Komponenten. Die Hauptfunktionen des Tests sind die drei eingangs genannten: Datenanzeige, Sortierung und Filter.

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")));
 }
}

Diese Artikelserie basiert auf dem xmlplus-Framework. Wenn Sie nicht viel über xmlplus wissen, können Sie www.xmlplus.cn besuchen. Eine ausführliche Dokumentation zu den ersten Schritten finden Sie hier.

[Verwandte Empfehlungen]

1. Kostenloses JS-Online-Video-Tutorial

2. JavaScript-Referenzhandbuch für Chinesisch

3. php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEinführung in die Komponenten des JavaScript-Frameworks (xmlplus) (10) Grid (DataGrid). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!