Grid fxGrid, fxDataGrid (fx.grid.js)

Artikel
08/24/2015

Van toepassing op: Windows Azure Pack

Een lijst met items weergeven. Er zijn twee soorten rasters: fxGrid voor het weergeven van een tabel met gegevens (inclusief kolomopmaak) en fxDataGrid die is gebouwd op fxGrid en ondersteuning biedt voor gegevensbinding, paginering, zoeken in de lijst en andere functies.

Windows Azure Pack fxGrid

Ondersteunde services

Service	Ondersteund
Ongedaan maken/opnieuw uitvoeren	Niet van toepassing
Validatie	Niet van toepassing

Widgets

$("Selector").fxGrid()

Eigenschappen

Naam	Type	Description
fx.fxGrid.options.columns	Matrix	Beschikbare kolommen. Elke kolom kan een van de volgende items bevatten: naam : Kolomnaam die moet worden geplaatst in de koptekst (standaard "") veld: Eigenschap van de gegevenscontext die moet worden gekoppeld aan de gegevens (standaard "") formatter: Functie die verantwoordelijk is voor het weergeven van de inhoud van een cel. Handtekening: functieopmaak(waarde, { dataItem, rowMetadata, columnDefinition, rowNumber, columnNumber, filter }) { } (standaardfunctiewaarde \|\| ""'). Zie $.fxGridFormatter.bundle(...) en $.fxGridFormatter.default(...)voor meer informatie. sortFormatter: Wordt gebruikt om een celwaarde op te maken om de rij te sorteren. Handtekening: function sortFormatter(value, { dataItem, columnDefinition }). filterFormatter: wordt gebruikt voor het filteren van cellen in het raster. Handtekening: functie filterFormatter(waarde, { dataItem, columnDefinition }). cssClass: een CSS-klasse die aan de cellen moet worden toegevoegd, wordt de klasse toegevoegd aan de kop- en hoofdtekstcellen (standaard "")
fx.fxGrid.options.data	Matrix	Matrix met gegevens waaruit rijen worden weergegeven.
fx.fxGrid.options.groups	Matrix	De beschikbare groepen. Elke groep kan een van de volgende items bevatten: sleutel : Sleutel van de groep (standaard "") tekst: Tekst van de groep die wordt weergegeven (standaard "") uitgevouwen: Geef aan of de groep is uitgevouwen (standaard true)
fx.fxGrid.options.maxHeight	Aantal	Geeft aan dat de header wordt opgelost, zodat alleen de gegevens kunnen worden geschoven. Hiermee worden 2 tabellen gemaakt. De gegevenshoogte moet worden ingesteld in pixels. Ingesteld op null als dit gedrag niet gewenst is.
fx.fxGrid.options.noRows	Tekenreeks	Bericht dat wordt weergegeven wanneer er geen gegevens beschikbaar zijn in de tabel.
fx.fxGrid.options.retainRowMetadata	Booleaans	Geeft aan of rijmetagegevens worden bewaard voor gegevensitems wanneer ze worden verwijderd uit de matrix 'gegevens' (de matrix met gegevensitems die als rasterrijen worden weergegeven).
fx.fxGrid.options.rowMetadata	Matrix	Metagegevens voor gegevensitems zoals ze worden weergegeven in het raster. Elke rij kan een van de volgende items bevatten: * dataItem: gegevensitem dat moet worden weergegeven in de cellen, op basis van columns.field (standaard {}) * groep: De rij koppelen aan een groepssleutel, zie groepsoptie (standaard "") * cssClass : een CSS-klasse die moet worden toegevoegd aan de rij (standaard "")
fx.fxGrid.options.text	Object	Tekst die wordt gebruikt in de widget.
fx.fxGrid.options.url	Tekenreeks	Afbeeldings-URL's die in deze widget worden gebruikt.
fx.fxGrid._references.columns	Booleaans
fx.fxGrid._references.data	Booleaans	Gegevensverwijzingen
fx.fxGrid._references.groups	Booleaans	Groepsverwijzingen
fx.fxGrid._references.rowMetadata	Booleaans	Verwijzingen naar rijmetagegevens

Methoden

Naam	Beschrijving	Retouren	Parameters
fx.fxGrid.destroy	Vernietigt de widget	Niets	Geen
fx.fxGrid.getAllRowMetadata	Hiermee haalt u de huidige rijmetagegevens op die door het raster worden gebruikt.	Object	item (object): een gegevensitem.
fx.fxGrid.refresh	Hiermee vernieuwt u de koptekstgrootte.	Niets	Geen

Voorbeeld

<!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>

Zie ook

Windows Azure Pack Extension Common Control Services
Windows Azure Pack Management Portal User Interface Extensions

Delen via