{"id":129115,"date":"2019-06-14T19:52:46","date_gmt":"2019-06-14T17:52:46","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/exercises-data\/"},"modified":"2019-06-14T19:52:46","modified_gmt":"2019-06-14T17:52:46","slug":"exercises-data","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/uebungen-daten","title":{"rendered":"Datenlisten"},"content":{"rendered":"<p>Das Widget Datenliste zeigt Datenstamms\u00e4tze in einem Listen-\/Tabellenformat an.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13817\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/display-data-master-records-data-list.png\" alt=\"Daten anzeigen Stamms\u00e4tze Datenliste\" width=\"755\" height=\"456\"><br \/>\nBei der Erstellung Ihrer Datenliste wird die Zelle oben links mit den Namen Ihrer Datenstammfelder angezeigt. Die zus\u00e4tzlichen Zellen werden mit einer grauen F\u00fcllung angezeigt. Wenn Sie Ihren Prototyp simulieren, werden die zus\u00e4tzlichen Zellen mit Ihren Datenstammdatens\u00e4tzen gef\u00fcllt.  <\/p>\n<h2><a id=\"displaying-data-master-records-in-a-data-list\"><\/a>Anzeigen von Datenstamms\u00e4tzen in einer Datenliste<\/h2>\n<p>Lernen Sie, wie Sie Datenstamms\u00e4tze in Listenform mit einer Datenliste in Ihren interaktiven Prototypen anzeigen k\u00f6nnen.<\/p>\n<p>Lassen Sie uns Schritt f\u00fcr Schritt vorgehen:<\/p>\n<ol>\n<li>Erstellen Sie in einem neuen Web-Prototyp einen neuen Datenstamm, indem Sie in der Palette Datenst\u00e4mme auf das Symbol &#8218;+&#8216; klicken. Geben Sie Ihrem Datenstamm in dem daraufhin angezeigten Dialog einen Namen. F\u00fcr unser Beispiel nennen Sie ihn &#8222;Kontakte-Liste&#8220;.  <\/li>\n<li>F\u00fcgen Sie Felder zu Ihrem Datenstamm hinzu, indem Sie auf das &#8218;+&#8216;-Symbol auf der rechten Seite klicken. Um unserem Beispiel zu entsprechen, erstellen Sie die folgenden Felder: Name, E-Mail, Firma und Bild. <\/li>\n<li>\u00c4ndern Sie den Typ des Bildfeldes in &#8222;Datei-Upload&#8220; und klicken Sie auf &#8222;OK&#8220;.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-new-Data-Master.png\"><source src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-new-Data-Master.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-new-Data-Master.png\" alt=\"Einen Datenstamm erstellen\"><\/source><\/video><\/li>\n<li>Zur\u00fcck in der Palette Datenmaster, klicken Sie mit der rechten Maustaste auf Ihren Datenmaster und w\u00e4hlen Sie in dem erscheinenden Dialog die Registerkarte Datens\u00e4tze anzeigen und bearbeiten. Erstellen Sie Datens\u00e4tze, indem Sie jedem einen Namen, eine E-Mail, ein Unternehmen und ein Bild zuweisen. Klicken Sie auf &#8222;OK&#8220;.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14109\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Add-datamaster-record.png\" alt=\"Datenliste simulieren\" width=\"755\" height=\"425\"><\/li>\n<li>Als n\u00e4chstes gehen Sie auf Symbolleiste &#8211; Plus-Symbol &#8211; Dynamischer Inhalt &#8211; klicken Sie auf &#8218;Datenliste&#8216; und geben Sie Ihrer Datenliste in dem daraufhin angezeigten Dialog einen Namen (in unserem Beispiel &#8222;Kontaktliste&#8220;). W\u00e4hlen Sie Ihren Datenstamm aus dem Dropdown-Men\u00fc &#8222;Datenst\u00e4mme&#8220; aus, um alle Felder des Datenstamms in die Datenliste aufzunehmen. Klicken Sie dann auf &#8222;OK&#8220; und positionieren Sie Ihre Datenliste in der Mitte des Canvas. Auf dem Canvas werden in der Zelle oben links Beispielfeldnamen angezeigt.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-data-list.png\"><source src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-data-list.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-data-list.png\" alt=\"Felder zur Datenliste hinzuf\u00fcgen\"><\/source><\/video><\/li>\n<li>Klicken Sie erneut auf &#8222;Simulieren&#8220;, um Ihre Datenliste mit den echten Daten zu simulieren.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14109\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Simulate-a-data-grid.png\" alt=\"Datenliste simulieren\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"data-list-properties\"><\/a>Eigenschaften<\/h2>\n<p>In der Palette Eigenschaften k\u00f6nnen Sie die folgenden Eigenschaften Ihrer Datenliste \u00e4ndern:<\/p>\n<ul>\n<li>Anzahl der Spalten<\/li>\n<li>Anzahl der Zellen pro Seite<\/li>\n<li>Ausrichtung &#8211; Drehen Sie Ihre Datenliste horizontal oder vertikal.<\/li>\n<li>Abstand &#8211; \u00c4ndern Sie die Abst\u00e4nde zwischen den Zellen<\/li>\n<\/ul>\n<h2><a id=\"customizing-a-data-list\"><\/a>Anpassen einer Datenliste<\/h2>\n<p>Mit Justinmind k\u00f6nnen Sie das Aussehen Ihrer Datenliste anpassen. F\u00fchren Sie die folgenden Schritte aus, um einzelne Spalten in Ihrer Datenliste anzupassen: <\/p>\n<ol>\n<li>Gehen Sie zur Palette Eigenschaften und \u00e4ndern Sie die Anzahl der Spalten in der Liste Daten auf drei.<\/li>\n<li>W\u00e4hlen Sie dann in der Ebenen-Palette die Zelle &#8222;Listenzelle 1&#8220; aus der Liste Daten.<\/li>\n<li>Entfernen Sie auf der Leinwand die Textelemente &#8222;Name&#8220;, &#8222;E-Mail&#8220;, &#8222;Unternehmen&#8220; und &#8222;Bild&#8220;, um sie an unser Beispiel anzupassen. Verteilen Sie dann die Eingabetextfelder der Zellen und passen Sie die Gr\u00f6\u00dfe der Zellen an unser Beispiel an oder gestalten Sie sie nach Ihren Vorstellungen. <\/li>\n<li>Klicken Sie auf &#8222;Simulieren&#8220;, um Ihre angepasste Datenliste anzuzeigen.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14108\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Customize-a-data-list.png\" alt=\"angepasste Datenliste\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"exercise-2-sort-columns\"><\/a>Spalten sortieren<\/h2>\n<p>Jetzt werden wir lernen, wie man die Spalten einer Datenliste von der gr\u00f6\u00dften zur kleinsten Spalte sortiert. Dies w\u00fcrde auch f\u00fcr eine Datenliste funktionieren, aber in diesem Fall f\u00fcgen wir dies nur der Datenliste hinzu.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-Sort-Example.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-Sort-Example.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-Sort-Example.png\" alt=\"Beispiel f\u00fcr eine Sortierspalte erstellen\"><\/source><\/video><\/p>\n<ol>\n<li>Navigieren Sie im gleichen Prototyp zum Bildschirm &#8218;List Dashboard&#8216;. Erinnern Sie sich, dass wir im letzten Tutorial beschlossen haben, das Feld &#8218;Einkommen&#8216; nicht in diese Datenliste aufzunehmen. In diesem Beispiel f\u00fcgen wir es wieder ein und verwenden es, um die Daten nach Einkommen zu sortieren. Klicken Sie mit der rechten Maustaste auf &#8218;Kunden&#8216; (Datenliste) und w\u00e4hlen Sie &#8218;Neue Spalte&#8216;.   <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/create-a-new-column.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/create-a-new-column.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/create-a-new-column.png\" alt=\"Erstellen Sie eine neue Sortierspalte\"><\/source><\/video>Bewegen Sie den Mauszeiger \u00fcber die Spalte und Sie sehen ein wei\u00dfes Pfeilsymbol erscheinen. Kopieren Sie die Text\u00fcberschrift &#8218;Verwaltet von&#8216; und f\u00fcgen Sie sie in die neue Spalten\u00fcberschrift ein, indem Sie sie in &#8218;Einkommen&#8216; umbenennen. Kopieren Sie das Feld &#8218;[Clients .Managedby:]&#8216; in Aktuelle_Zeile_1 und f\u00fcgen Sie es in die neue Spaltenzelle ein. Suchen Sie in der Palette Eigenschaften das Dropdown-Men\u00fc &#8218;Datenfeld&#8216; und \u00e4ndern Sie es in [Clients .Income]. Jetzt zeigt dieses Feld die Daten aus dem Feld &#8218;Einkommen&#8216; in unserem Datenstamm an. [Clients .Income] f\u00fcgen Sie au\u00dferdem ein Textelement hinzu und beschriften es mit &#8218;$&#8216;.  <\/li>\n<li>Ziehen Sie zwei &#8222;Pfeil&#8220;-Symbole in die Kopfzeile neben &#8222;Einkommen&#8220;. Wir verwenden diese, um die Daten vom h\u00f6chsten zum niedrigsten Einkommen zu sortieren. Unsere stammen aus der Widget-Bibliothek &#8218;Web Components&#8216;, aber jedes beliebige Symbol funktioniert.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16427\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/SortArrows.png\" alt=\"Sortierpfeile hinzuf\u00fcgen\" width=\"1023\" height=\"701\"><\/li>\n<li>Klicken Sie auf das Symbol &#8217;nach oben&#8216; und erstellen Sie ein Ereignis &#8222;Bei Klick&#8220; + &#8222;Wert setzen&#8220;, wobei Sie die Datenliste als Ziel der Aktion ausw\u00e4hlen. Klicken Sie f\u00fcr den Wert auf die Optionsschaltfl\u00e4che &#8218;Berechnet&#8216; und den Text &#8218;Ausdruck hinzuf\u00fcgen&#8216;. Es erscheint der Calculated Expression Builder.  <\/li>\n<li>Ziehen Sie im Builder die Funktion &#8218;Sortieren&#8216; auf den freien Platz im Ausdruck und \u00e4ndern Sie die Sortierrichtung in &#8218;absteigend&#8216;. Ziehen Sie den Datenstamm auf das erste freie Feld auf der linken Seite. Ziehen Sie das Attribut &#8218;Einkommen&#8216; auf das Feld auf der rechten Seite.  <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Sort-Descendant.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Sort-Descendant.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Sort-Descendant.png\" alt=\"Ausdruck \"Nachkomme sortieren\"><\/source><\/video>Wie der Suchfilter hat auch die Funktion Sortieren eine \u00e4hnliche Struktur &#8211; das erste Feld definiert, was wir sortieren wollen, und das zweite Feld definiert, nach welchen Parametern wir sortieren. In diesem Fall sortieren wir nach den Einkommenszahlen. <\/li>\n<li>Wiederholen Sie die Schritte 3 und 4 f\u00fcr das Symbol &#8218;Abw\u00e4rts&#8216; und vergessen Sie nicht, die Sortierrichtung auf &#8218;Aufsteigend&#8216; zu \u00e4ndern.<\/li>\n<\/ol>\n<div><strong>Hinweis:<\/strong> Stellen Sie sicher, dass die Einkommensnummern im Datenstamm keine Kommas, Punkte oder Symbole enthalten &#8211; die Funktion &#8218;Sortieren&#8216; kann diese nicht unterscheiden.<\/div>\n<p>Sie k\u00f6nnen <a href=\"https:\/\/download.justinmind.com\/examples\/create-a-justinmind-datamaster-search-and-sort.vp\">unser Beispiel hier herunterladen<\/a>.<\/p>\n<p><!-- \n\n<h2><a id=\"exercise-3-paginate-data\"><\/a>Exercise 3: Paginate data<\/h2>\n\n\nIn our last exercise, we\u2019ll learn how to paginate the Data List and Data List in our prototype.\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16431\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/PaginateExample.gif\" alt=\"Paginate data example\" width=\"800\" height=\"503\" \/>\n\n\n<ol>\n \t\n\n<li>Still on the List Dashboard screen, select the Data List. Look to the Properties palette and change the number of Rows per page to 10.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16432\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows.png\" alt=\"Change data list rows\" width=\"936\" height=\"526\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows.png 936w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows-300x169.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows-768x432.png 768w\" sizes=\"(max-width: 936px) 100vw, 936px\" \/><\/li>\n\n\n \t\n\n<li>Drag an Index widget from the Dynamic Content section of the widgets palette to the Canvas below the Data List. In the Properties palette, choose \u2018Client List\u2019 from the \u2018Data List\u2019 dropdown. We\u2019ll use this element to show what page of the Data List records we\u2019re on.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16433\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/IndexWidget.png\" alt=\"Add index widget\" width=\"903\" height=\"473\" \/><\/li>\n\n\n \t\n\n<li>Place two \u2018arrow\u2019 icons next to the Index element. We\u2019ll use these to switch between the pages in the Data List.<\/li>\n\n\n \t\n\n<li>Select the right facing arrow and create an \u201cOn Click\u201d + \u201cPaginate Data List\u201d event, selecting the Data List as the target of the action. For the pagination, select \u2018Next Page\u2019.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16435\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage.png\" alt=\"Next page event\" width=\"792\" height=\"538\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage.png 792w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage-300x204.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage-768x522.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/li>\n\n\n \t\n\n<li>Select the left facing arrow and create an \u201cOn Click\u201d + \u201cPaginate Data List\u201d event, selecting the Data List as the target of the action. For the pagination, select \u2018Previous Page\u2019.<\/li>\n\n\n \t\n\n<li>Repeat these steps on the Card Dashboard screen.<\/li>\n\n\n<\/ol>\n\n\nYou can <a href=\"https:\/\/download.justinmind.com\/examples\/create-a-justinmind-datamaster-search-and-sort.vp\">download our example here<\/a>.\n\n--><\/p>\n<h2><a id=\"filter\"><\/a>Zeilen filtern<\/h2>\n<p><span style=\"font-weight: 400;\">In diesem Beispiel lernen Sie, wie Sie die Filterfunktion verwenden, um die Werte in einer Datenliste mithilfe einer Auswahlliste in der Kopfzeile zu filtern.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73228195\/index.html\" width=\"820px\" height=\"420px\" frameborder=\"0\"><\/iframe><\/p>\n<p>So bauen Sie es auf:<\/p>\n<h3><strong>Siehe<\/strong><\/h3>\n<ul>\n<li>Gehen Sie zur Palette &#8222;Datenst\u00e4mme&#8220; und erstellen Sie einen neuen &#8222;Datenstamm&#8220;, nennen Sie ihn &#8222;Autos&#8220;, erstellen Sie drei Attribute: &#8222;Hersteller&#8220;, &#8222;Jahr&#8220; und &#8222;Farbe&#8220;, und dr\u00fccken Sie dann auf &#8222;Ok&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-1.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li>Klicken Sie mit der rechten Maustaste auf den soeben erstellten &#8222;Datenstamm&#8220; und w\u00e4hlen Sie &#8222;Datens\u00e4tze anzeigen und bearbeiten&#8220;, schreiben Sie Ihre Beispielautos dorthin und dr\u00fccken Sie dann auf &#8222;Ok&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-2.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li>W\u00e4hlen Sie &#8222;Datenliste&#8220; aus dem Bereich &#8222;Dynamischer Inhalt&#8220; und platzieren Sie sie auf der Arbeitsfl\u00e4che. Das Fenster &#8222;Neue Datenliste&#8220; wird aktiviert; geben Sie Ihrer Liste einen Namen, w\u00e4hlen Sie als n\u00e4chstes den zuvor erstellten &#8222;Datenstamm&#8220; und w\u00e4hlen Sie alle Attribute aus.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-3.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-3.png\" alt=\"Erstellen Sie eine Datenliste\">Erstellen Sie eine Datenliste<\/source><\/video><\/li>\n<\/ul>\n<ul>\n<li>Platzieren Sie ein &#8222;Ausw\u00e4hlen&#8220; aus dem Abschnitt &#8222;Interaktive Eingabefelder&#8220; in der Kopfzeile der Spalte, die Sie filtern m\u00f6chten; dr\u00fccken Sie die Befehlstaste (Mac) oder die Strg-Taste (Windows), w\u00e4hrend Sie das Element hineinziehen.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-4.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-4.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-4.png\" alt=\"Einf\u00fcgen einer Auswahl\">Einf\u00fcgen einer Auswahl<\/source><\/video><\/li>\n<li>Klicken Sie auf &#8222;Ausw\u00e4hlen&#8220; und bearbeiten Sie die Werte in der Eigenschaften-Palette, damit sie mit der Option in Ihrer Spalte \u00fcbereinstimmen.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-5.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<\/ul>\n<h3><strong>Ereignisse<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Wenn Sie &#8222;Ausw\u00e4hlen&#8220; gew\u00e4hlt haben, gehen Sie zur Palette &#8222;Ereignisse&#8220; und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-6.png\" alt=\"\" width=\"794\" height=\"340\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Klicken Sie in dem Dialogfenster auf &#8222;Ausl\u00f6ser w\u00e4hlen&#8220; und w\u00e4hlen Sie &#8222;bei \u00c4nderung&#8220;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie unter &#8222;Aktion w\u00e4hlen&#8220; die Option &#8222;Wert auf ein Element setzen&#8220; und klicken Sie auf die &#8222;Datenliste&#8220;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie das Optionsfeld &#8222;Berechnet&#8220; f\u00fcr den Wert und klicken Sie auf &#8222;Ausdruck hinzuf\u00fcgen&#8220;.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-7.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Ziehen Sie im ersten Feld des Value Expression Builders die Funktion &#8222;Filter&#8220; und w\u00e4hlen Sie auf der Registerkarte Data Masters Ihren &#8222;Datenstamm&#8220; f\u00fcr das zweite Feld aus. Ziehen Sie als n\u00e4chstes die Funktion &#8222;Hat&#8220; und w\u00e4hlen Sie auf der Registerkarte Datenstamm den Bereich aus, den Sie filtern m\u00f6chten; ziehen Sie dann die Funktion &#8222;Ausw\u00e4hlen&#8220; und platzieren Sie sie im letzten Feld. Klicken Sie auf &#8222;Ok&#8220; und &#8222;Ok&#8220;, um die Erstellung Ihres Ereignisses abzuschlie\u00dfen.  <\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767991222\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<div> <strong> Hinweis: <\/strong>Sie k\u00f6nnen die Aktionen f\u00fcr jede Spalte, die Sie filtern m\u00f6chten, wiederholen.<\/div>\n<p><span style=\"font-weight: 400;\">Simulieren Sie Ihren Prototyp.<\/span><\/p>\n<h2><a id=\"select-rows\"><\/a>Zeilen ausw\u00e4hlen<\/h2>\n<p>In diesem Beispiel lernen Sie, wie Sie eine Datenliste erstellen, bei der Sie die Farbe der Zeile \u00e4ndern k\u00f6nnen, um ihr einen Auswahleffekt zu verleihen.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73208725\/index.html\" width=\"820px\" height=\"320px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Wie man es baut:<\/span><\/p>\n<h3><strong>Siehe<\/strong><\/h3>\n<ul>\n<li>Gehen Sie zur Palette &#8222;Datenst\u00e4mme&#8220; und erstellen Sie einen neuen &#8222;Datenstamm&#8220;, nennen Sie ihn &#8222;Test&#8220; und legen Sie drei Attribute an: &#8222;Spalte A&#8220;, &#8222;Spalte B&#8220; und &#8222;Spalte C&#8220;, und dr\u00fccken Sie dann auf &#8222;Ok&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44165\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-1.png\" alt=\"Hinzuf\u00fcgen von Feldern zur Datenliste\" width=\"600\" height=\"349\"><\/li>\n<li>Klicken Sie mit der rechten Maustaste auf den soeben erstellten &#8222;Datenstamm&#8220; und w\u00e4hlen Sie &#8222;Datens\u00e4tze anzeigen und bearbeiten&#8220;, schreiben Sie Ihre Beispieldaten dorthin und dr\u00fccken Sie &#8222;Ok&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44165\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-2.png\" alt=\"Hinzuf\u00fcgen von Feldern zur Datenliste\" width=\"600\" height=\"349\"><\/li>\n<li>W\u00e4hlen Sie &#8222;Datenliste&#8220; aus dem Bereich &#8222;Dynamischer Inhalt&#8220; und platzieren Sie sie auf der Arbeitsfl\u00e4che. Das Fenster &#8222;Neue Datenliste&#8220; wird aktiviert; geben Sie Ihrer Liste einen Namen, w\u00e4hlen Sie als n\u00e4chstes den zuvor erstellten &#8222;Datenstamm&#8220; und w\u00e4hlen Sie alle Attribute aus.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-3.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-3.png\" alt=\"Erstellen Sie eine Datenliste\">Erstellen Sie eine Datenliste<\/source><\/video><\/li>\n<\/ul>\n<h3><strong>Ereignisse<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Platzieren Sie den Mauszeiger links von der Zeile, bis er sich in einen Pfeil verwandelt, der nach rechts zeigt, und klicken Sie, um die gesamte Zeile auszuw\u00e4hlen. Gehen Sie zur Palette Ereignisse und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;.&nbsp;<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Klicken Sie in dem Dialogfenster auf &#8222;Ausl\u00f6ser w\u00e4hlen&#8220;, bewegen Sie den Mauszeiger \u00fcber den Abschnitt &#8222;Maus&#8220; und w\u00e4hlen Sie &#8222;bei Klick&#8220;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie im Feld &#8222;Aktion w\u00e4hlen&#8220; die Option &#8222;Stil \u00e4ndern&#8220; und klicken Sie auf die &#8222;Datenliste&#8220;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">W\u00e4hlen Sie die Hintergrundfarbe ungerade und gerade als Standard. Klicken Sie auf &#8222;Ok&#8220;, um die Erstellung des Ereignisses abzuschlie\u00dfen.<\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767361891\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Gehen Sie erneut zur Palette Ereignisse und klicken Sie auf das &#8222;+&#8220;, um ein neues Ereignis hinzuzuf\u00fcgen.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Klicken Sie in dem Dialogfenster auf &#8222;Ausl\u00f6ser w\u00e4hlen&#8220;, bewegen Sie den Mauszeiger \u00fcber den Abschnitt &#8222;Maus&#8220; und w\u00e4hlen Sie &#8222;bei Klick&#8220;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie unter &#8222;Aktion w\u00e4hlen&#8220; die Option &#8222;Stil \u00e4ndern&#8220; und markieren Sie die aktuelle Zeile in der &#8222;Datenliste&#8220;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie eine Hintergrundfarbe f\u00fcr den Stil und legen Sie die Farbe Blau fest.  <\/span>Klicken Sie auf &#8222;Ok&#8220;, um die Erstellung des Ereignisses abzuschlie\u00dfen.\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767361928\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Simulieren Sie Ihren Prototyp.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Widget Datenliste zeigt Datenstamms\u00e4tze in einem Listen-\/Tabellenformat an. Bei der Erstellung Ihrer Datenliste wird die Zelle oben links mit den Namen Ihrer Datenstammfelder angezeigt. Die&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8554,8558],"tags":[],"class_list":["post-129115","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-formulare-und-daten-de"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129115"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129115"}],"version-history":[{"count":0,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129115\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}