{"id":124628,"date":"2018-03-08T15:31:23","date_gmt":"2018-03-08T14:31:23","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/data-grids\/"},"modified":"2025-02-03T16:43:01","modified_gmt":"2025-02-03T15:43:01","slug":"data-grids","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/grilles-de-donnees","title":{"rendered":"Grilles de donn\u00e9es"},"content":{"rendered":"<p>Le widget Grille de donn\u00e9es affiche les enregistrements de la base de donn\u00e9es sous forme de grille. Les grilles de donn\u00e9es sont affich\u00e9es sous forme de cellules dans une grille ou un tableau. <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=\"affichage des donn\u00e9es fiches grille de donn\u00e9es\" width=\"755\" height=\"456\"><br \/>\nLors de la cr\u00e9ation de votre grille de donn\u00e9es, la cellule sup\u00e9rieure gauche affichera les noms des champs de votre base de donn\u00e9es. Les cellules suppl\u00e9mentaires seront affich\u00e9es avec un remplissage gris. Lorsque vous simulez votre prototype, les cellules suppl\u00e9mentaires sont remplies avec les enregistrements de votre base de donn\u00e9es.  <\/p>\n<h2><a id=\"displaying-data-master-records-in-a-data-grid\"><\/a>Affichage des fiches de donn\u00e9es dans une grille de donn\u00e9es<\/h2>\n<p>Apprenez \u00e0 afficher les fiches de donn\u00e9es sous forme de grille avec une grille de donn\u00e9es dans vos prototypes interactifs. Faisons-le pas \u00e0 pas :<\/p>\n<ol>\n<li>Dans un nouveau prototype Web, cr\u00e9ez une nouvelle base de donn\u00e9es en cliquant sur l&rsquo;ic\u00f4ne \u00ab\u00a0+\u00a0\u00bb dans la palette des bases de donn\u00e9es. Dans la bo\u00eete de dialogue qui s&rsquo;affiche, donnez un nom \u00e0 votre base de donn\u00e9es. Pour correspondre \u00e0 notre exemple, nommez-la \u00ab\u00a0Liste de contacts\u00a0\u00bb.  <\/li>\n<li>Ajoutez des champs \u00e0 votre base de donn\u00e9es en cliquant sur l&rsquo;ic\u00f4ne \u00ab\u00a0+\u00a0\u00bb sur le c\u00f4t\u00e9 droit. Pour correspondre \u00e0 notre exemple, cr\u00e9ez les champs suivants : Nom, Courriel, Soci\u00e9t\u00e9 et Image. <\/li>\n<li>Modifiez le type du champ d&rsquo;image en \u00ab\u00a0T\u00e9l\u00e9chargement de fichier\u00a0\u00bb et cliquez sur \u00ab\u00a0OK\u00a0\u00bb.<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=\"Cr\u00e9er une base de donn\u00e9es\"><\/video><\/li>\n<li>De retour dans la palette Ma\u00eetrise des donn\u00e9es, cliquez avec le bouton droit de la souris sur votre ma\u00eetrise des donn\u00e9es et s\u00e9lectionnez l&rsquo;onglet Afficher et modifier les enregistrements dans la bo\u00eete de dialogue qui s&rsquo;affiche. Cr\u00e9ez des enregistrements de donn\u00e9es, en attribuant \u00e0 chacun un nom, une adresse \u00e9lectronique, une soci\u00e9t\u00e9 et une image. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb.  <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=\"simuler une grille de donn\u00e9es\" width=\"755\" height=\"425\"><\/li>\n<li>Dans la bo\u00eete de dialogue qui s&rsquo;affiche, donnez un nom \u00e0 votre grille de donn\u00e9es (\u00ab\u00a0Grille de contacts\u00a0\u00bb pour correspondre \u00e0 notre exemple). S\u00e9lectionnez votre base de donn\u00e9es dans la liste d\u00e9roulante \u00ab\u00a0Data Masters\u00a0\u00bb. Nous voulons inclure tous les champs de la base de donn\u00e9es dans la grille de donn\u00e9es. Pour les d\u00e9placer tous dans la bo\u00eete de s\u00e9lection, cliquez sur l&rsquo;ic\u00f4ne de la double fl\u00e8che droite. Ensuite, cliquez sur \u00ab\u00a0OK\u00a0\u00bb et positionnez votre grille de donn\u00e9es au centre du canevas.Sur le canevas, la cellule sup\u00e9rieure gauche affichera des exemples de noms de champs.<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=\"Ajouter des champs \u00e0 la grille de donn\u00e9es\"><\/video><\/li>\n<li>Cliquez \u00e0 nouveau sur \u00ab\u00a0Simuler\u00a0\u00bb pour simuler votre grille de donn\u00e9es avec les donn\u00e9es r\u00e9elles en place.<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=\"simuler une grille de donn\u00e9es\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"data-grid-properties\"><\/a>Propri\u00e9t\u00e9s<\/h2>\n<p>Dans la palette Propri\u00e9t\u00e9s, vous pouvez modifier les propri\u00e9t\u00e9s suivantes de votre grille de donn\u00e9es :<\/p>\n<ul>\n<li>Nombre de colonnes<\/li>\n<li>Nombre de cellules par page<\/li>\n<li>Orientation &#8211; Faites pivoter votre grille de donn\u00e9es horizontalement ou verticalement.<\/li>\n<li>Espacement &#8211; modifie l&rsquo;espacement entre les cellules<\/li>\n<\/ul>\n<h2><a id=\"customizing-a-data-grid\"><\/a>Personnaliser une grille de donn\u00e9es<\/h2>\n<p>Avec Justinmind, vous pouvez personnaliser l&rsquo;apparence de votre grille de donn\u00e9es. Suivez les \u00e9tapes ci-dessous pour personnaliser les colonnes individuelles de votre grille de donn\u00e9es : <\/p>\n<ol>\n<li>Allez dans la palette Propri\u00e9t\u00e9s et changez le nombre de colonnes de la grille de donn\u00e9es en trois.<\/li>\n<li>Ensuite, dans la palette Calques, s\u00e9lectionnez la cellule \u00ab\u00a0Grid cell 1\u00a0\u00bb dans la grille de donn\u00e9es.<\/li>\n<li>Sur le canevas, supprimez les \u00e9l\u00e9ments de texte \u00ab\u00a0Nom\u00a0\u00bb, \u00ab\u00a0Courriel\u00a0\u00bb, \u00ab\u00a0Soci\u00e9t\u00e9\u00a0\u00bb et \u00ab\u00a0Image\u00a0\u00bb pour qu&rsquo;ils correspondent \u00e0 notre exemple. Distribuez ensuite les champs de texte d&rsquo;entr\u00e9e des cellules et redimensionnez les cellules pour qu&rsquo;elles correspondent \u00e0 notre exemple ou pour qu&rsquo;elles correspondent \u00e0 votre propre exemple. <\/li>\n<li>Cliquez sur \u00ab\u00a0Simuler\u00a0\u00bb pour afficher votre grille de donn\u00e9es personnalis\u00e9e.<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=\"grille de donn\u00e9es personnalis\u00e9e\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"creating-a-search-filter-for-a-data-grid\"><\/a>Cr\u00e9er un filtre de recherche pour une grille de donn\u00e9es<\/h2>\n<p>Vous pouvez prototyper une liste consultable \u00e0 l&rsquo;aide d&rsquo;une grille de donn\u00e9es.<\/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=\"Cr\u00e9er un filtre de recherche\"><\/video><\/p>\n<p>Suivez les \u00e9tapes ci-dessous pour savoir comment proc\u00e9der :<\/p>\n<ol>\n<li>Dans le m\u00eame prototype, cr\u00e9ez un champ de texte d&rsquo;entr\u00e9e sur le canevas au-dessus de la grille de donn\u00e9es.<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=\"liste consultable grille de donn\u00e9es\" width=\"755\" height=\"450\"><\/li>\n<li>Le champ de texte d&rsquo;entr\u00e9e \u00e9tant s\u00e9lectionn\u00e9, cr\u00e9ez un \u00e9v\u00e9nement \u00ab\u00a0On Key Up\u00a0\u00bb + \u00ab\u00a0Set Value\u00a0\u00bb, en s\u00e9lectionnant la grille de donn\u00e9es comme cible de l&rsquo;action. Laissez l&rsquo;entr\u00e9e \u00ab\u00a0Any Key\u00a0\u00bb par d\u00e9faut. Pour la valeur, cliquez sur le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb, puis sur le texte \u00ab\u00a0Ajouter une expression\u00a0\u00bb. Vous verrez appara\u00eetre le constructeur de l&rsquo;expression calcul\u00e9e.   <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=\"Ajouter une expression pour la recherche\" width=\"792\" height=\"573\"><\/li>\n<li>Dans le constructeur, proc\u00e9dez comme suit pour cr\u00e9er l&rsquo;expression :<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=\"Filtre de recherche\"><\/video><strong>1.<\/strong> Faites glisser la fonction \u00ab\u00a0Filtre\u00a0\u00bb vers l&rsquo;expression.<br \/>\n 2<strong>.<\/strong> Faites glisser votre base de donn\u00e9es (\u00e0 partir de l&rsquo;onglet Data Masters) vers le premier terme de la nouvelle fonction Filtre.<br \/>\n 3<strong>.<\/strong> Faites glisser le champ de texte d&rsquo;entr\u00e9e vers le deuxi\u00e8me terme et cliquez sur \u00ab\u00a0OK\u00a0\u00bb, puis \u00e0 nouveau sur \u00ab\u00a0OK\u00a0\u00bb pour fermer la bo\u00eete de dialogue Ev\u00e9nements.<\/li>\n<li>Cliquez sur \u00ab\u00a0Simuler\u00a0\u00bb et essayez de rechercher une fiche de donn\u00e9es dans votre grille de donn\u00e9es.<\/li>\n<\/ol>\n<p>Vous pouvez <a href=\"https:\/\/d2ld3he4yll0xl.cloudfront.net\/examples\/create-a-justinmind-datagrid.vp\">t\u00e9l\u00e9charger notre exemple ici.<\/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>Le widget Grille de donn\u00e9es affiche les enregistrements de la base de donn\u00e9es sous forme de grille. Les grilles de donn\u00e9es sont affich\u00e9es sous forme de&#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":[8416,8423],"tags":[],"class_list":["post-124628","post","type-post","status-publish","format-standard","hentry","category-formation","category-formulaires-et-donnees"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124628"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124628"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124628\/revisions"}],"predecessor-version":[{"id":126118,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124628\/revisions\/126118"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}