Dynamische Tabelle mit LENKER

Ich versuche zum erstellen einer dynamischen Tabelle mit handlebars.js.
Ein Beispiel für ein Objekt ich möchte in der Tabelle ist:

Object { title: "The Room", director: "Tommy Wiseau", genre: "Drama?", rating: "1"}

Den HTML würde ich gerne Aussehen:

    <thead>
    <th>Title</th>
    <th>Director</th>
    <th>Genre</th>
    <th>Rating</th>
    <th>Edited</th>
  </thead>
  <tbody>
    <tr>
      <td>The Room</td>
      <td>Tommy Wiseau</td>
      <td>Drama?</td>
      <td>1</td>
      <td>2017-05-16</td>
    </tr>
  </tbody>

Mein problem ist, dass der Benutzer können auch fügen Sie Ihre eigenen überschriften von der Tabelle, so kann ich nicht zum Beispiel nur:

<td>{{title}}</td>

Es muss getan werden, dynamisch. Ich habe mir bei: {{#each}}, sondern kann einfach nicht scheinen, um wickeln Sie meinen Kopf herum um ihn herum. Auch, wie kann ich drucken Sie den Namen der Eigenschaft, statt nur den Wert in ein Objekt (wie möchte ich in der Tabelle Header).

  <thead>
    {{#each data}}
    <th>{{@key}}</th><!--property name here-->
    {{/each}}
  </thead>
  <tbody>
    {{#each data}}
    <tr>
      <td>{{this}}</td><!--property value here-->
    </tr>
    {{/each}}
  </tbody>

Dies ist meine Vorlage. Ich fühle mich wie ich am Schluss auf die richtige Lösung, aber ich bin nicht sicher, wo ich bin, etwas falsch zu machen.

$.getJSON("php/loadItems.php?category=" + selected, function(data) {
    let source = $("#itemTemplate").html();
    let template = Handlebars.compile(source);
    delete data[0].id
    $("#tableContainer").append(template(data));
  });

Dies ist, wie ich mit den Daten in meinem JS. Jede Hilfe wird sehr geschätzt!

InformationsquelleAutor Kazura | 2017-05-16

3

Basierend auf was Sie beschreiben, ich glaube, Sie hätte keine andere Wahl, als zu erstellen eine Reihe von überschriften von der Tabelle (Objekt-Schlüssel) durch Iteration über jeder Objekt im array und herausfiltern von Duplikaten. In anderen Worten, müssen Sie erstellen ein array mit allen von der einzigartige Schlüssel von allen Ihren Daten-Objekte, und diese dienen als Spaltenüberschriften in der Tabelle. Man könnte eine vorhandene Bibliothek zu helfen, yo tun dies, wie Unterstrich die .uniq, aber ich werde ein Beispiel für die Implementierung:
```
var uniqueKeys = data.reduce(function (acc, obj) {
    return acc.concat(Object.keys(obj).filter(key => acc.indexOf(key) === -1));
}, []);
```
Als Nächstes müssen wir übergeben unsere Reihe von einzigartigen Schlüssel zu unserer Vorlage. Der eindeutige Schlüssel wird verwendet, um die Tabelle zu erstellen überschriften sowie in lookup Operationen für jedes Objekt in data.
```
template({
    uniqueKeys: uniqueKeys,
    data: data
});
```
Unserer Vorlage müssen aktualisiert werden, um die folgenden:
```
<thead>
    <tr>
        {{#each uniqueKeys}}
            <th>{{this}}</th>
        {{/each}}
    </tr>
</thead>
<tbody>
    {{#each data}}
        <tr>
            {{#each ../uniqueKeys}}
                <td>{{lookup .. this}}</td>
            {{/each}}
        </tr>
     {{/each}}
</tbody>
```
Beachten Sie, dass die Linie {{lookup .. this}} sagt: "machen Sie den Wert auf das aktuelle Objekt in data auf die Eigenschaft mit dem Namen dieses Schlüssels in uniqueKeys.

Beachten Sie auch, dass ich <tr> - tags innerhalb Ihrer <thead>. Nach MDN, diese sind nur zulässig, tags innerhalb eines <thead>.

Habe ich eine fiddle für Referenz.

InformationsquelleAutor 76484

Wäre so etwas wie diese Arbeit für das, was Sie versuchen zu erreichen?

JS:

{
  "titles": [
    "The Room",
    "Test"
  ],
  "tableObjs": [{
      "director": "Tommy Wiseau",
      "genre": "Drama?",
      "rating": "1"
    },
    {
      "director": "Tommy Wiseau",
      "genre": "Drama?",
      "rating": "1"
    }
  ]
}

HTML:

<thead>
  {{#each titles}}
  <th>{{@key}}</th>
  <!--property name here-->
  {{/each}}
</thead>
<tbody>
  {{#each tableObjs}}
  <tr>
    <td>{{this.director}}</td>
    <td>{{this.genre}}</td>
    <td>{{this.rating}}</td>
    <!--property value here-->
  </tr>
  {{/each}}
</tbody>

Ich fürchte nicht. Da kann der Benutzer selber würde ich nicht in der Lage sein, zu wissen, was die property-Namen sind. In diesem Beispiel könnten Sie fügen Sie eine andere Kategorie, sagen Sie "Notizen", wo Sie schreiben könnten, was Sie wollen. Ich hätte keine Ahnung, was der name der Eigenschaft wäre dann

InformationsquelleAutor Woodrow

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.