{"id":124665,"date":"2022-11-16T17:41:25","date_gmt":"2022-11-16T16:41:25","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-selectable-row-list\/"},"modified":"2025-02-03T16:44:50","modified_gmt":"2025-02-03T15:44:50","slug":"how-to-create-a-selectable-row-list","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/comment-concevoir-liste-lignes-selectionnables","title":{"rendered":"Comment concevoir une liste de lignes s\u00e9lectionnables ?"},"content":{"rendered":"<p>Dans cet exemple, vous apprendrez \u00e0 cr\u00e9er une liste de donn\u00e9es dans laquelle vous pourrez modifier la couleur de la ligne pour lui donner un effet de s\u00e9lection.<\/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;\">Comment le construire :<\/span><\/p>\n<h3><strong>Voir<\/strong><\/h3>\n<ul>\n<li>Allez dans la palette des ma\u00eetres de donn\u00e9es et cr\u00e9ez un nouveau \u00ab\u00a0ma\u00eetre de donn\u00e9es\u00a0\u00bb, nommez-le \u00ab\u00a0Test\u00a0\u00bb et cr\u00e9ez trois attributs : \u00ab\u00a0Colonne A\u00a0\u00bb, \u00ab\u00a0Colonne B\u00a0\u00bb et \u00ab\u00a0Colonne C\u00a0\u00bb, puis appuyez sur \u00ab\u00a0Ok\u00a0\u00bb.<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=\"Ajouter des champs \u00e0 la liste de donn\u00e9es\" width=\"600\" height=\"349\"><\/li>\n<li>Cliquez avec le bouton droit de la souris sur la \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb que vous venez de cr\u00e9er et s\u00e9lectionnez \u00ab\u00a0Afficher et modifier les enregistrements\u00a0\u00bb, \u00e9crivez vos donn\u00e9es d&rsquo;exemple \u00e0 cet endroit et appuyez sur \u00ab\u00a0Ok\u00a0\u00bb.<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=\"Ajouter des champs \u00e0 la liste de donn\u00e9es\" width=\"600\" height=\"349\"><\/li>\n<li>S\u00e9lectionnez \u00ab\u00a0Liste de donn\u00e9es\u00a0\u00bb dans la section \u00ab\u00a0Contenu dynamique\u00a0\u00bb et placez-la sur le canevas ; la fen\u00eatre \u00ab\u00a0Nouvelle liste de donn\u00e9es\u00a0\u00bb sera activ\u00e9e ; donnez un nom \u00e0 votre liste, choisissez ensuite la \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb que vous avez cr\u00e9\u00e9e pr\u00e9c\u00e9demment et s\u00e9lectionnez tous les attributs.<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=\"Cr\u00e9er une liste de donn\u00e9es\">Cr\u00e9er une liste de donn\u00e9es<\/source><\/video><\/li>\n<\/ul>\n<h3><strong>Ev\u00e9nements<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Placez le curseur de la souris \u00e0 gauche de la ligne jusqu&rsquo;\u00e0 ce qu&rsquo;il se transforme en une fl\u00e8che pointant vers la droite et cliquez pour s\u00e9lectionner toute la ligne, allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.&nbsp;<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans la section \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Changer de style\u00a0\u00bb et cliquez sur la \u00ab\u00a0Liste de donn\u00e9es\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Choisissez la couleur d&rsquo;arri\u00e8re-plan paire et impaire par d\u00e9faut. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. <\/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\">Acc\u00e9dez \u00e0 nouveau \u00e0 la palette \u00c9v\u00e9nements et cliquez sur le \u00ab\u00a0+\u00a0\u00bb pour ajouter un nouvel \u00e9v\u00e9nement.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Change style\u00a0\u00bb et s\u00e9lectionnez la ligne actuelle dans la \u00ab\u00a0Data list\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Choisissez un style de couleur d&rsquo;arri\u00e8re-plan et d\u00e9finissez la couleur bleue.  <\/span>Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.\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\">Simulez votre prototype.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet exemple, vous apprendrez \u00e0 cr\u00e9er une liste de donn\u00e9es dans laquelle vous pourrez modifier la couleur de la ligne pour lui donner un effet&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8426,8428],"tags":[],"class_list":["post-124665","post","type-post","status-publish","format-standard","hentry","category-comment-faire","category-formulaires-et-donnees-fr"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124665"}],"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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124665"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124665\/revisions"}],"predecessor-version":[{"id":126205,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124665\/revisions\/126205"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}