{"id":129053,"date":"2018-03-08T15:31:23","date_gmt":"2018-03-08T14:31:23","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/data-grids\/"},"modified":"2018-03-08T15:31:23","modified_gmt":"2018-03-08T14:31:23","slug":"data-grids","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/daten-raster","title":{"rendered":"Datenraster"},"content":{"rendered":"<p>Das Datenraster-Widget zeigt Datenstammdatens\u00e4tze in einem Rasterformat an. Datengitter werden als Zellen innerhalb eines Gitters oder einer Tabelle angezeigt. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13817\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/display-data-master-records-data-grid.png\" alt=\"display-data Stammdatens\u00e4tze Datengitter\" width=\"755\" height=\"456\"><br \/>\nBei der Erstellung Ihres Datengitters 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 Datenstamms\u00e4tzen gef\u00fcllt.  <\/p>\n<h2><a id=\"displaying-data-master-records-in-a-data-grid\"><\/a>Anzeigen von Datenstamms\u00e4tzen in einer Datentabelle<\/h2>\n<p>Lernen Sie, wie Sie mit einem Datengitter in Ihren interaktiven Prototypen Datenstamms\u00e4tze in Gitterform anzeigen k\u00f6nnen.<\/p>\n<p>Lassen Sie uns Schritt f\u00fcr Schritt vorgehen:<\/p>\n<ol>\n<li>Erstellen Sie in einem neuen Webprototyp 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:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-Data-Master.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-Data-Master.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-Data-Master.png\" alt=\"Einen Datenstamm erstellen\"><\/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\/2022\/12\/Add-record-to-a-data-master.png\" alt=\"Datengitter 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;Datenraster&#8216; und geben Sie Ihrem Datenraster einen Namen (&#8222;Kontakte-Raster&#8220; f\u00fcr unser Beispiel). W\u00e4hlen Sie Ihren Datenstamm aus dem Dropdown-Men\u00fc &#8222;Datenst\u00e4mme&#8220; 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 &#8222;OK&#8220; und positionieren Sie Ihr Datengitter in der Mitte der Arbeitsfl\u00e4che.<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\/Add-fields-to-data-grid.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Add-fields-to-data-grid.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Add-fields-to-data-grid.png\" alt=\"Felder zur Datentabelle hinzuf\u00fcgen\"><\/video><\/li>\n<li>Klicken Sie erneut auf &#8222;Simulieren&#8220;, um Ihr Data Grid 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\/2018\/03\/simulate-data-grid-1.png\" alt=\"Datengitter simulieren\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"data-grid-properties\"><\/a>Eigenschaften<\/h2>\n<p>In der Palette Eigenschaften k\u00f6nnen Sie die folgenden Eigenschaften Ihres Datengitters \u00e4ndern:<\/p>\n<ul>\n<li>Anzahl der Spalten<\/li>\n<li>Anzahl der Zellen pro Seite<\/li>\n<li>Ausrichtung &#8211; Drehen Sie Ihr Datengitter 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-grid\"><\/a>Anpassen einer Datentabelle<\/h2>\n<p>Mit Justinmind k\u00f6nnen Sie das Aussehen Ihrer Datentabelle anpassen. F\u00fchren Sie die folgenden Schritte aus, um einzelne Spalten in Ihrer Datentabelle anzupassen: <\/p>\n<ol>\n<li>Gehen Sie zur Palette Eigenschaften und \u00e4ndern Sie die Anzahl der Spalten des Datengitters auf drei.<\/li>\n<li>W\u00e4hlen Sie dann in der Ebenenpalette die Zelle &#8222;Rasterzelle 1&#8220; aus dem Datengitter.<\/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 Datentabelle anzuzeigen.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14108\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/customized-data-grid-1.png\" alt=\"angepasste Datentabelle\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"creating-a-search-filter-for-a-data-grid\"><\/a>Erstellen eines Suchfilters f\u00fcr eine Datentabelle<\/h2>\n<p>Sie k\u00f6nnen eine durchsuchbare Liste mit Hilfe eines Datengitters prototypisieren.<\/p>\n<p><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-search-filter-2.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-search-filter-2.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-search-filter-2.png\" alt=\"Einen Suchfilter erstellen\"><\/video><\/p>\n<p>Folgen Sie den nachstehenden Schritten, um zu erfahren, wie das geht:<\/p>\n<ol>\n<li>Erstellen Sie im gleichen Prototyp ein Eingabe-Textfeld auf dem Canvas \u00fcber dem Datengitter.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13828\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/12\/searchable-list-data-grid-2.png\" alt=\"durchsuchbare Liste Datengitter\" width=\"755\" height=\"450\"><\/li>\n<li>Erstellen Sie bei ausgew\u00e4hltem Eingabetextfeld ein Ereignis &#8222;On Key Up&#8220; + &#8222;Set Value&#8220;, wobei Sie das Datengitter als Ziel der Aktion ausw\u00e4hlen. Belassen Sie die Eingabe &#8218;Beliebige Taste&#8216; als Standard. Klicken Sie f\u00fcr den Wert auf das Optionsfeld &#8218;Berechnet&#8216; und dann auf den Text &#8218;Ausdruck hinzuf\u00fcgen&#8216;. Es erscheint der Calculated Expression Builder.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16419\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-GridEvent.png\" alt=\"Ausdruck f\u00fcr die Suche hinzuf\u00fcgen\" width=\"792\" height=\"573\"><\/li>\n<li>Gehen Sie im Builder wie folgt vor, um den Ausdruck zu erstellen:<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\/Search-Filter-data-grid-2.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Search-Filter-data-grid-2.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Search-Filter-data-grid-2.png\" alt=\"Suchfilter-Ereignis\"><\/video><strong>1.<\/strong> Ziehen Sie die Funktion &#8222;Filter&#8220; auf den Ausdruck.<br \/>\n 2<strong>.<\/strong> Ziehen Sie Ihren Datenstamm (von der Registerkarte Datenstamm) auf den ersten Term der neuen Filterfunktion.<br \/>\n 3<strong>.<\/strong> Ziehen Sie das Eingabetextfeld auf den zweiten Term und klicken Sie auf &#8222;OK&#8220; und dann erneut auf &#8222;OK&#8220;, um das Dialogfeld Ereignisse zu schlie\u00dfen.<\/li>\n<li>Klicken Sie auf &#8222;Simulieren&#8220; und versuchen Sie, einen Datenstammsatz in Ihrem Datengitter zu suchen.<\/li>\n<\/ol>\n<p>Sie k\u00f6nnen <a href=\"https:\/\/d2ld3he4yll0xl.cloudfront.net\/examples\/create-a-justinmind-datagrid.vp\">unser Beispiel hier herunterladen<\/a>.<\/p>\n<p><!-- \n\n<h2><a id=\"paginating-data-grids\"><\/a>Paginating Data Grids<\/h2>\n\n\nWith Justinmind, you can paginate your Data Grid. You might want to do this when if you have lots of data Records.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13832\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/paginate-data-grid.gif\" alt=\"paginate data grid\" width=\"755\" height=\"400\" \/>\nFollow the next steps to learn how to paginate your Data Grid:\n\n\n<ol>\n \t\n\n<li>Create a Data Master in a new web prototype.\n\nName it \u201cProduct\u201d. Create three Fields: Product name, Price and Image.\n\nChange the Type of the Image Field to \u201cFile Upload\u201d and click \u201cOK\u201d.<\/li>\n\n\n \t\n\n<li>Back in the Data Masters palette, right click on your Data Master and select the View and edit records option. Create six product Records. Click \u201cOK\u201d.<\/li>\n\n\n \t\n\n<li>Next, go to Toolbar - plus sign icon - Dynamic Content - click on \u2018Data Grid\u2019.\n\nIn the dialog that appears, give your Data Grid a name (\u201cProduct_Data_Grid\u201d to match our example), and move the \u201cProduct\u201d Data Master Fields from the left to the right. Click \u201cOK\u201d and position your Data Grid in the center of the canvas.<\/li>\n\n\n \t\n\n<li>Remove the \u201cProduct name\u201d, \u201cPrice\u201d and \u201cImage\u201d text elements from within the Data Grid. To select those elements, you can either double click on them or change to the \u201cDirect Selection Tool\u201d (keyboard shortcut A).<\/li>\n\n\n \t\n\n<li>Select the Data Grid in the Layers palette and go to the Properties palette.<\/li>\n\n\n \t\n\n<li>Then, change the number of Rows to one and the number of \"Cells per Page\" to three. This means that only three Records will be listed per page in your Data Grid.<\/li>\n\n\n \t\n\n<li>Next, go to Toolbar - plus sign icon - Dynamic Content - click on \u2018Index\u2019, click in the canvas and link it to your Data Grid by choosing the \u201cProduct\u201d Data Grid from the Data Grid drop-down in the Properties palette. The Index element will automatically show the number of listed pages based on the number of rows per page established (in our example, the number is four).<\/li>\n\n\n<\/ol>\n\n\nNow let's add some buttons to the prototype to allow the user to navigate to different pages within your Data Grid:\n\n\n<ol>\n \t\n\n<li>Go to the Toolbar - plus sign - Button or press B to create two buttons and label them \u201cNext\u201d, \u201cPrevious\u201d.<\/li>\n\n\n \t\n\n<li>Select the Button named \u201cNext\u201d and go to the Events palette. Add an \u2018\u201dOn Click\u201d + \u201cPaginate Data Grid\u201d event, selecting the Data Grid from the Layers palette.<\/li>\n\n\n \t\n\n<li>Below, select the \u201cNext page\u201d action from the drop-down list, and click \u201cOK\u201d.<\/li>\n\n\n \t\n\n<li>Repeat step two for the remaining Button, updating the action to \u201cPrevious Page\u201d. Click \u201cSimulate\u201d and click between the pages in your Data Grid. The Data Grid\u2019s values should change when you click the \u201cNext\u201d and \u201cPrevious\u201d buttons.<\/li>\n\n\n<\/ol>\n\n\nYou can <a href=\"https:\/\/download.justinmind.com\/examples\/create-a-justinmind-datagrid.vp\">download our example here<\/a>.\n\n--><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Datenraster-Widget zeigt Datenstammdatens\u00e4tze in einem Rasterformat an. Datengitter werden als Zellen innerhalb eines Gitters oder einer Tabelle angezeigt. Bei der Erstellung Ihres Datengitters wird 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-129053","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\/129053"}],"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=129053"}],"version-history":[{"count":0,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129053\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}