Partager via

Comment regrouper des éléments dans un contrôle ListView (HTML)

  • Article

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Découvrez comment regrouper des éléments dans un contrôle ListView. Pour afficher les informations relatives au groupe, tels que les en-têtes et les limites, votre contrôle ListView doit utiliser une disposition en grille. Pour que le regroupement fonctionne, la propriété loadingBehavior du contrôle ListView doit être définie avec la valeur "randomaccess" (qui est la valeur par défaut).

Ce que vous devez savoir

Technologies

Prérequis

Instructions

Étape 1: Créer vos données

Le regroupement nécessite deux sources de données : un objet IListDataSource contenant les éléments et un objet IListDataSource contenant les groupes. Dans les éléments IListDataSource, chaque élément contient une propriété groupKey qui le relie au groupe auquel il appartient dans le groupe IListDataSource.

  1. Ajoutez un nouveau fichier JavaScript dans le projet qui contiendra vos données. Nommez-le "data.js".

  2. Dans le fichier data.js que vous venez de créer, créez la source de données sous-jacente qui doit alimenter le contrôle ListView en données.

    L’un des moyens de créer un objet IListDataSource consiste à créer un objet WinJS.Binding.List. Chaque objet WinJS.Binding.List a une propriété dataSource qui retourne un objet IListDataSource contenant vos données.

    L’exemple suivant crée un objet WinJS.Binding.List à partir d’un tableau d’objets JSON (myData) :

    
// Start of data.js
(function () {
    "use strict";



    var myData = [
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Green Mint", text: "Gelato", picture: "images/60Mint.png" }
    ];

    // Create a WinJS.Binding.List from the array. 
    var itemsList = new WinJS.Binding.List(myData);

    Remarque  Ces données font référence à plusieurs images. Pour obtenir ces dernières, téléchargez l’Exemple de groupement de ListView et de SemanticZoom, puis copiez-les de l’exemple dans votre projet. Vous pouvez aussi faire appel à vos propres images — assurez-vous alors de bien mettre à jour la valeur de la propriété picture dans vos données.

     

    Astuce  

    Vous n’êtes pas limité à l’utilisation d’un objet WinJS.Binding.List : vous pouvez également utiliser un objet VirtualizedDataSource personnalisé. (StorageDataSource ne prend pas en charge le groupement.) Pour plus d’informations sur la création d’une source de données personnalisée, voir Comment créer une source de données personnalisée.

     

  3. Créez une version de votre source de données qui contient des informations de groupe. Si vous utilisez un objet WinJS.Binding.List, vous pouvez appeler sa méthode createGrouped pour créer une version groupée de l’objet List.

    La méthode createGrouped nécessite trois paramètres :

    • getGroupKey : une fonction qui, selon l’élément sélectionné dans la liste, retourne la clé du groupe auquel l’élément appartient.
    • getGroupData : fonction qui retourne l’objet de données représentant le groupe auquel appartient un élément spécifique de la liste.
    • compareGroups : fonction permettant de trier les groupes pour que le groupe A soit avant le groupe B. Cette fonction requiert les informations de deux clés de groupe, elle compare les deux groupes et retourne une valeur inférieure à zéro si le premier groupe est plus petit que le second, zéro si les groupes sont les mêmes et une valeur positive si le premier groupe est plus grand que le second groupe.

    La méthode createGrouped retourne un objet WinJS.Binding.List qui contient deux projections des données à partir de la liste non groupée d’origine. Les projections sont dynamiques, ainsi, si vous modifiez la liste, vous modifiez la liste d’origine.

    Cet exemple utilise la méthode List.createGrouped pour créer une version groupée de l’objet List. Il définit les groupes en fonction de la première lettre du titre de chaque élément.

        // Sorts the groups
    function compareGroups(leftKey, rightKey) {
        return leftKey.charCodeAt(0) - rightKey.charCodeAt(0);
    }

    // Returns the group key that an item belongs to
    function getGroupKey(dataItem) {
        return dataItem.title.toUpperCase().charAt(0);
    }

    // Returns the title for a group
    function getGroupData(dataItem) {
        return {
            title: dataItem.title.toUpperCase().charAt(0)
        };
    }

    // Create the groups for the ListView from the item data and the grouping functions
    var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups);

  4. Rendez vos données accessibles dans l’étendue globale. De cette manière, lorsque vous créez votre contrôle ListView, vous pouvez accéder aux données de façon déclarative (nous allons vous montrer comment procéder à l’étape 2.3).

    Cet exemple utilise la fonction WinJS.Namespace.define pour rendre la liste groupée accessible publiquement.

        WinJS.Namespace.define("myData",
        {
            groupedItemsList: groupedItemsList
        }); 


})(); // End of data.js

Étape 2: Créer un contrôle ListView avec une présentation en grille.

Créez ensuite un contrôle ListView et connectez-le à vos données.

  1. Dans la section head de votre page HTML qui doit contenir le contrôle ListView, ajoutez une référence au fichier de données que vous avez créé à l’étape précédente.

    

    <!-- Your data file. -->
    <script src="/js/data.js"></script>

  2. Dans la section body de votre fichier HTML, créez un contrôle ListView. Définissez sa propriété layout sur GridLayout.

    
<div id="groupedListView"
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{layout: {type: WinJS.UI.GridLayout}}"
></div>

  3. Définissez la propriété itemDataSource du contrôle ListView sur la source de données des éléments groupés.

    À l’étape 1, vous avez créé un membre d’espace de noms qui contient les éléments groupés à afficher : myData.groupedItemsList. L’appel de ce champ retourne un objet WinJS.Binding.List. Pour obtenir un objet IListDataSource utilisable par le contrôle ListView, appelez sa propriété dataSource : myData.groupedItemsList.dataSource.

    
<div id="groupedListView"
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource: myData.groupedItemsList.dataSource, 
        layout: {type: WinJS.UI.GridLayout}}"
></div>

  4. Définissez ensuite la propriété groupDataSource du contrôle ListView sur la source de données qui contient les données du groupe. Utilisez la propriété groups de l’objet List pour obtenir un autre objet List qui contient les informations du groupe. Pour obtenir un objet IListDataSource, appelez myData.groupedItemsList.groups.dataSource.

    
<div id="groupedListView"
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource: myData.groupedItemsList.dataSource, 
        groupDataSource: myData.groupedItemsList.groups.dataSource,
        layout: {type: WinJS.UI.GridLayout}}">
</div>

Exécutez l’application. Comme vous n’avez pas spécifié de modèles d’éléments, les données ne sont pas mises en forme :

Méthode ListView affichant les données brutes d’un groupe.

Étape 3: Créer un modèle d’élément et un modèle d’en-tête de groupe

Sur votre page HTML, avant de définir votre contrôle ListView, créez un élément WinJS.UI.Template nommé "mediumListIconTextTemplate" et attribuez à la propriété itemTemplate du contrôle ListView le nom de ce modèle.


<div id="mediumListIconTextTemplate" 
    data-win-control="WinJS.Binding.Template" 
    style="display: none">
    <div class="mediumListIconTextItem">
        <img class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="mediumListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<div id="groupedListView"
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource: myData.groupedItemsList.dataSource, 
        itemTemplate: select('#mediumListIconTextTemplate'),
        groupDataSource: myData.groupedItemsList.groups.dataSource,
        layout: {type: WinJS.UI.GridLayout}}">
</div>

(Notez que le modèle spécifie plusieurs styles. Vous les définirez ultérieurement.)

Exécutez l’application. Les éléments, mais pas les en-têtes du groupe, sont mis en forme.

Méthode ListView affichant les données brutes d’un groupe.

Étape 4: Créer un modèle d’en-tête de groupe

Définissez un objet WinJS.UI.Template pour l’en-tête du groupe et attribuez-lui l’ID "headerTemplate". Définissez la propriété groupHeaderTemplate du contrôle ListView sur ce modèle.


<div id="headerTemplate" data-win-control="WinJS.Binding.Template" 
    style="display: none">
    <div class="simpleHeaderItem">
        <h1 data-win-bind="innerText: title"></h1>
    </div>
</div>

<div id="mediumListIconTextTemplate" 
    data-win-control="WinJS.Binding.Template" 
    style="display: none">
    <div class="mediumListIconTextItem">
        <img class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="mediumListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<div id="groupedListView"
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource: myData.groupedItemsList.dataSource, 
        itemTemplate: select('#mediumListIconTextTemplate'),
        groupDataSource: myData.groupedItemsList.groups.dataSource,
        groupHeaderTemplate: select('#headerTemplate'),
        layout: {type: WinJS.UI.GridLayout}}">
</div>

Exécutez l’application. Les éléments et les en-têtes de groupe sont mis en forme.

Contrôle ListView avec données groupées

Étape 5: Appliquer des styles à vos modèles

Si vous souhaitez personnaliser l’apparence de vos éléments et en-têtes, vous pouvez appliquer vos propres styles CSS à votre feuille de style. Le code CSS de cet exemple applique certains styles aux éléments et en-têtes, ainsi qu’au contrôle ListView.


/* CSS for the ListView */
#groupedListView
{
    width: 600px;
    height: 300px;
    border: solid 2px rgba(0, 0, 0, 0.13);
}

/* Template for headers */
.simpleHeaderItem
{
    width: 50px;
    height: 50px;
    padding: 8px;
}   

/* Template for items */  
.mediumListIconTextItem
{
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-grid;
}

    .mediumListIconTextItem img.mediumListIconTextItem-Image 
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        -ms-grid-column: 1;
    }

    .mediumListIconTextItem .mediumListIconTextItem-Detail
    {
        margin: 5px;
        -ms-grid-column: 2;
    }

Lorsque vous exécutez l’application, vos éléments sont divisés en deux groupes :

ListView avec éléments groupés

Vous pouvez également utiliser les classes CSS win-groupheader et win-container pour appliquer un style à vos groupes et éléments. Pour plus d’informations, voir Stylisation de l’objet ListView et de ses éléments.

Remarques

Tri et filtrage d’éléments et de groupes

WinJS.Binding.List peut trier et filtrer vos éléments et vos groupes. Pour plus d’informations, voir les méthodes createSorted et createFiltered.

Créer un affichage en zoom arrière de vos groupes

Maintenant que vous savez comment créer un contrôle ListView groupé, il vous reste peu de choses à savoir pour utiliser le contrôle SemanticZoom pour la création d’un affichage en zoom arrière de vos groupes.

Affichage en zoom arrière et avant d’un contrôle SemanticZoom

Pour obtenir des instructions sur l’utilisation du contrôle SemanticZoom, voir Démarrage rapide : ajout de contrôles SemanticZoom.

Contrôles ListView groupés contenant des en-têtes interactifs

Lorsque votre ListView contrôle groupé contient des en-têtes interactifs, nous vous recommandons de prendre en charge le raccourci clavier Ctrl+Alt+G et de l’utiliser pour déplacer l’utilisateur dans le groupe dans lequel il navigue actuellement. Vous devriez obtenir le même comportement que lorsque vous cliquez ou appuyez sur l’en-tête de groupe lui-même.

Suppression de groupes et défilement

Lorsqu’un groupe est supprimé, il se peut que le contrôle ListView défile vers un emplacement inattendu, par conséquent appelez la méthode ensureVisible pour défiler vers une position qui a du sens pour votre application.

Terminer l’exemple

Pour obtenir un exemple complet décrivant la procédure de création d’un contrôle ListView groupé, voir l’exemple Groupement d’un contrôle ListView et SemanticZoom.

Rubriques associées

Groupement d’un contrôle ListView et SemanticZoom

Démarrage rapide : ajout de contrôles SemanticZoom