Comment afficher une grille dans une extension du portail d’administration Azure Pack Windows

 

S’applique à : Windows Azure Pack

Une grille est le moyen de base d’afficher une liste de données à l’utilisateur. Il prend en charge la sélection multiple, la réorganisation et le tri des colonnes, l’affichage des icônes et du texte et l’actualisation automatique à partir de la source de données définie. Le modèle classique est destiné à l’extension pour afficher une grille lorsque l’utilisateur sélectionne un onglet.

Pour afficher une grille lorsque l’utilisateur sélectionne un onglet

1. Placez le code de grille suivant dans la fonction ouverte pour l’onglet :

   // This function has been set to be the opened function earlier
   // For this to work, there should be a <div> in your template for the tab with a class of "gridContainer"
   function loadTab(extension, renderArea, initData) {
     // Create a dataset so the client-side framework knows how to get the data for refreshes
     var localDataSet = Exp.Data.getLocalDataSet(DomainTenantExtension.Controller.listOwnedDomainNamesUrl),
     // Define the columns in the grid. A number of pre-defined types exist.
     columns = [
       { name: "Name", field: "Name", sortable: false },
       { name: "Status", field: "Status", type: "status", displayStatus: waz.interaction.statusIconHelper(statusIcons), filterable: false, sortable: false },
       { name: "Type", field: "Type", filterable: false, sortable: false },
       { name: "Expires", field: "ExpiryDate", filterable: false, sortable: false, formatter: dateFormatter }
     ];
   
     grid = renderArea.find(".gridContainer")
       .wazObservableGrid("destroy")
       .wazObservableGrid({
         lastSelectedRow: null,
         data: localDataSet.data,
         keyField: "name",
         columns: columns,
         gridOptions: {
           // Function to call when a row is selected. Optional.
           rowSelect: onRowSelected
         },
         // If the grid is empty, a template can be rendered instead, typically suggesting to the user that they create a new resource
         emptyListOptions: {
           extensionName: "DomainTenantExtension",
           templateName: "domainsTabEmpty",
           arrowLinkSelector: ("{0} .dm-new-domain-link").format(renderArea.selector),
           arrowLinkAction: global.DomainTenantExtension.CreateWizard.showCreateWizard
           }
         });
       }
   

Voir aussi

Exécution de tâches courantes dans une extension du portail d’administration Azure Pack Windows