Grid fxGrid, fxDataGrid (fx.grid.js)

Article
08/24/2015

S’applique à : Windows Azure Pack

Affichez une liste d’éléments. Il existe deux types de grilles : fxGrid pour afficher simplement une table de données (y compris la mise en forme de colonne) et fxDataGrid qui est basée sur fxGrid et inclut la prise en charge de la liaison de données, de la pagination, de la recherche dans la liste et d’autres fonctionnalités.

Windows Azure Pack fxGrid

Services pris en charge

Service	Pris en charge
Annuler/Rétablir	Non applicable
Validation	Non applicable

Widgets

$("Selector").fxGrid()

Propriétés

Nom	Type	Description
fx.fxGrid.options.columns	Array	Colonnes disponibles. Chaque colonne peut contenir l’une des opérations suivantes : nom : Nom de colonne à placer dans l’en-tête (valeur par défaut « ») champ : Propriété du contexte de données à lier à partir des données (par défaut « ») formateur : fonction responsable du rendu du contenu d’une cellule. Signature: function formatter(value, { dataItem, rowMetadata, columnDefinition, rowNumber, columnNumber, filter }) { } (valeur de retour par défaut 'return value \|\| ""'). Pour plus d’informations, consultez $.fxGridFormatter.bundle(...) et $.fxGridFormatter.default(...). sortFormatter : utilisé pour mettre en forme une valeur de cellule afin de trier sa ligne contenante. Signature : function sortFormatter(value, { dataItem, columnDefinition }). filterFormatter : utilisé pour filtrer les cellules dans la grille. Signature : function filterFormatter(value, { dataItem, columnDefinition }). cssClass : classe CSS à ajouter aux cellules, la classe est ajoutée à l’en-tête et aux cellules du corps (par défaut « »)
fx.fxGrid.options.data	Array	Tableau de données à partir duquel les lignes sont affichées.
fx.fxGrid.options.groups	Array	Groupes disponibles. Chaque groupe peut contenir l’un des éléments suivants : clé : Clé du groupe (par défaut « ») texte : Texte du groupe affiché (par défaut « ») développé : Indiquez si le groupe est développé (valeur true par défaut)
fx.fxGrid.options.maxHeight	Number	Indique que l’en-tête sera résolu, ce qui autorise uniquement les données à faire défiler. Cela crée 2 tables. La hauteur de données doit être définie en pixels. Définissez la valeur Null si ce comportement n’est pas souhaité.
fx.fxGrid.options.noRows	String	Message montrant quand aucune donnée n’est disponible dans la table.
fx.fxGrid.options.retainRowMetadata	Boolean	Indique si les métadonnées de ligne sont conservées pour les éléments de données lorsqu’ils sont supprimés du tableau « données » (tableau d’éléments de données affichés sous forme de lignes de grille).
fx.fxGrid.options.rowMetadata	Array	Métadonnées pour les éléments de données à mesure qu’ils sont rendus dans la grille. Chaque ligne peut contenir l’une des opérations suivantes : * dataItem : élément de données à afficher dans les cellules, en fonction de columns.field (valeur par défaut {}) * groupe : attacher la ligne à une clé de groupe, voir l’option groupes (par défaut « ») * cssClass : classe CSS à ajouter à la ligne (valeur par défaut « »)
fx.fxGrid.options.text	Object	Texte utilisé dans le widget.
fx.fxGrid.options.url	String	URL d’image utilisées dans ce widget.
fx.fxGrid._references.columns	Boolean
fx.fxGrid._references.data	Boolean	Références de données
fx.fxGrid._references.groups	Boolean	Références de groupes
fx.fxGrid._references.rowMetadata	Boolean	Références de métadonnées de ligne

Méthodes

Nom	Description	Retours	Paramètres
fx.fxGrid.destroy	Détruit le widget	Rien	None
fx.fxGrid.getAllRowMetadata	Obtient les métadonnées de ligne actuelles utilisées par la grille.	Object	élément (objet) : élément de données.
fx.fxGrid.refresh	Actualise la taille de l’en-tête.	Rien	None

Exemple

<!DOCTYPE HTML>

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8"/>
        <title>Simple Grid Examples</title>
        <!-- Style Links -->
        <link href="/Content/_oss/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 
        <link href="/Content/UxFxCss.css" rel="stylesheet" type="text/css" />
        <link href="/Extensions/Samples/ControlsPlayground/Styles/ControlsPlaygroundExtension.Samples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="scriptLinksContainer">
            <!-- JQuery scripts-->
            <script src="/Scripts/_oss/jquery-1.7.1.js"></script>
            <script src="/Scripts/_oss/jquery-ui-1.8.18.js"></script>

            <!-- Knockout script -->
            <script src="/Scripts/_oss/knockout-2.1.0.js"></script>

            <!-- fx shell scripts -->
            <script src="/Scripts/UxFxScript.js"></script>
        </div>

        <!-- Sample HTML Code -->
        <div id="sampleHTMLCodeContainer">
            <div id="render">
            </div>

            <div class="options">
                <button id="add">Add row</button>
                <button id="remove">Remove row</button>
            </div>
            <div class="options">
                <label><input type="checkbox" id="selectable"/> Selectable</label>
                <label><input type="checkbox" id="multiselect"/> Multiselect</label>
            </div>

            <div id="grid"></div>
        </div>

        <div id="sampleScriptCodeContainer">
            <!-- Sample Script Code -->
            <script type="text/javascript">
                //Initialize our grid
                var numbers = 10;
                publicrows = rows = [];
                for (var i = 1; i <= numbers; i++) {
                    rows.push({ type: "Type " + i, status: "Status " + i, subscription: "Subscription " + i, location: "Field " + i });
                }
                rows[3].selected = true; //Default with row selected
                rows[4].disabled = true; //disable this row

                //Add a new row
                $("#add").click(function() {
                    var rows2 = $("#grid").fxGrid("option", "data");
                    $.observable(rows2).insert(rows2.length, { type: "New Row Added", status: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus accumsan eros, volutpat laoreet ligula porta", subscription: "Subscription Just Added", location: "Location Just Added" });
                });

                //Remove a row
                $("#remove").click(function() {
                    var rows2 = $("#grid").fxGrid("option", "data");
                    $.observable(rows2).remove(rows2.length - 1, 1);
                });

                //Make the grid selectable
                $("#selectable").click(function() {
                    $("#grid").fxGrid("option", "selectable", $(this).prop("checked"));
                });

                //Enable multi-selection in the grid
                $("#multiselect").click(function() {
                    $("#grid").fxGrid("option", "multiselect", $(this).prop("checked"));
                });

                //Initialize our grid
                $("#grid")
                    .fxGrid({
                        columns: [ //list of columns to display
                            { name: "Type", field: "type" },
                            { name: "Status", field: "status" },
                            { name: "Subscription", field: "subscription" },
                            { name: "Location", field: "location" }
                        ],
                        rowSelect: function() {
                            //Bind an event when a row is selected
                        },
                        data: rows, //data for the grid
                        selectable: false, //default value
                        multiselect: false, //default value
                        maxHeight: 400 //max height in pixels
                    });
            </script>
        </div>
    </body>
</html>

Voir aussi

Windows Azure Pack Extension Common Control Services
Windows extensions d’interface utilisateur du portail d’administration Azure Pack

Partager via