Datenraster

Das Datenraster-Widget zeigt Datenstammdatensätze in einem Rasterformat an. Datengitter werden als Zellen innerhalb eines Gitters oder einer Tabelle angezeigt. display-data Stammdatensätze Datengitter
Bei der Erstellung Ihres Datengitters wird die Zelle oben links mit den Namen Ihrer Datenstammfelder angezeigt. Die zusätzlichen Zellen werden mit einer grauen Füllung angezeigt. Wenn Sie Ihren Prototyp simulieren, werden die zusätzlichen Zellen mit Ihren Datenstammsätzen gefüllt.

Anzeigen von Datenstammsätzen in einer Datentabelle

Lernen Sie, wie Sie mit einem Datengitter in Ihren interaktiven Prototypen Datenstammsätze in Gitterform anzeigen können.

Lassen Sie uns Schritt für Schritt vorgehen:

  1. Erstellen Sie in einem neuen Webprototyp einen neuen Datenstamm, indem Sie in der Palette Datenstämme auf das Symbol ‚+‘ klicken. Geben Sie Ihrem Datenstamm in dem daraufhin angezeigten Dialog einen Namen. Für unser Beispiel nennen Sie ihn „Kontakte-Liste“.
  2. Fügen Sie Felder zu Ihrem Datenstamm hinzu, indem Sie auf das ‚+‘-Symbol auf der rechten Seite klicken. Um unserem Beispiel zu entsprechen, erstellen Sie die folgenden Felder: Name, E-Mail, Firma und Bild.
  3. Ändern Sie den Typ des Bildfeldes in „Datei-Upload“ und klicken Sie auf „OK“.
  4. Zurück in der Palette Datenmaster, klicken Sie mit der rechten Maustaste auf Ihren Datenmaster und wählen Sie in dem erscheinenden Dialog die Registerkarte Datensätze anzeigen und bearbeiten. Erstellen Sie Datensätze, indem Sie jedem einen Namen, eine E-Mail, ein Unternehmen und ein Bild zuweisen. Klicken Sie auf „OK“. Datengitter simulieren
  5. Als nächstes gehen Sie auf Symbolleiste – Plus-Symbol – Dynamischer Inhalt – klicken Sie auf ‚Datenraster‘ und geben Sie Ihrem Datenraster einen Namen („Kontakte-Raster“ für unser Beispiel). Wählen Sie Ihren Datenstamm aus dem Dropdown-Menü „Datenstämme“ aus, um alle Felder des Datenstamms in das Datengitter aufzunehmen. Um sie alle in das Auswahlfeld zu verschieben, klicken Sie auf das rechte Pfeilsymbol mit der doppelten Linie, klicken Sie auf „OK“ und positionieren Sie Ihr Datengitter in der Mitte der Arbeitsfläche.
  6. Klicken Sie erneut auf „Simulieren“, um Ihr Data Grid mit den echten Daten zu simulieren.Datengitter simulieren

Eigenschaften

In der Palette Eigenschaften können Sie die folgenden Eigenschaften Ihres Datengitters ändern:

  • Anzahl der Spalten
  • Anzahl der Zellen pro Seite
  • Ausrichtung – Drehen Sie Ihr Datengitter horizontal oder vertikal
  • Abstand – Ändern Sie die Abstände zwischen den Zellen

Anpassen einer Datentabelle

Mit Justinmind können Sie das Aussehen Ihrer Datentabelle anpassen. Führen Sie die folgenden Schritte aus, um einzelne Spalten in Ihrer Datentabelle anzupassen:

  1. Gehen Sie zur Palette Eigenschaften und ändern Sie die Anzahl der Spalten des Datengitters auf drei.
  2. Wählen Sie dann in der Ebenenpalette die Zelle „Rasterzelle 1“ aus dem Datengitter.
  3. Entfernen Sie auf der Leinwand die Textelemente „Name“, „E-Mail“, „Unternehmen“ und „Bild“, um sie an unser Beispiel anzupassen. Verteilen Sie dann die Eingabetextfelder der Zellen und passen Sie die Größe der Zellen an unser Beispiel an oder gestalten Sie sie nach Ihren Vorstellungen.
  4. Klicken Sie auf „Simulieren“, um Ihre angepasste Datentabelle anzuzeigen.angepasste Datentabelle

Erstellen eines Suchfilters für eine Datentabelle

Sie können eine durchsuchbare Liste mit Hilfe eines Datengitters prototypisieren.

Folgen Sie den nachstehenden Schritten, um zu erfahren, wie das geht:

  1. Erstellen Sie im gleichen Prototyp ein Eingabe-Textfeld auf dem Canvas über dem Datengitter.durchsuchbare Liste Datengitter
  2. Erstellen Sie bei ausgewähltem Eingabetextfeld ein Ereignis „On Key Up“ + „Set Value“, wobei Sie das Datengitter als Ziel der Aktion auswählen. Belassen Sie die Eingabe ‚Beliebige Taste‘ als Standard. Klicken Sie für den Wert auf das Optionsfeld ‚Berechnet‘ und dann auf den Text ‚Ausdruck hinzufügen‘. Es erscheint der Calculated Expression Builder. Ausdruck für die Suche hinzufügen
  3. Gehen Sie im Builder wie folgt vor, um den Ausdruck zu erstellen:1. Ziehen Sie die Funktion „Filter“ auf den Ausdruck.
    2. Ziehen Sie Ihren Datenstamm (von der Registerkarte Datenstamm) auf den ersten Term der neuen Filterfunktion.
    3. Ziehen Sie das Eingabetextfeld auf den zweiten Term und klicken Sie auf „OK“ und dann erneut auf „OK“, um das Dialogfeld Ereignisse zu schließen.
  4. Klicken Sie auf „Simulieren“ und versuchen Sie, einen Datenstammsatz in Ihrem Datengitter zu suchen.

Sie können unser Beispiel hier herunterladen.