Rutnät fxGrid, fxDataGrid (fx.grid.js)

Artikel
08/24/2015

Gäller för: Windows Azure Pack

Visa en lista med objekt. Det finns två typer av rutnät: fxGrid för att helt enkelt visa en tabell med data (inklusive kolumnformatering) och fxDataGrid som är byggd ovanpå fxGrid och innehåller stöd för databindning, sidnumrering, sökning i listan och andra funktioner.

Windows Azure Pack fxGrid

Tjänster som stöds

Tjänst	Stöds
Ångra/gör om	Ej tillämpligt
Validering	Ej tillämpligt

Widgets

$("Selector").fxGrid()

Egenskaper

Namn	Typ	Beskrivning
fx.fxGrid.options.columns	Matris	Tillgängliga kolumner. Varje kolumn kan innehålla något av följande: name : Kolumnnamn som ska placeras i rubriken (standard "") field : Egenskapen för datakontexten som ska bindas till från data (standard "") formatter : Funktion som ansvarar för att återge innehållet i en cell. Signatur: function formatter(value, { dataItem, rowMetadata, columnDefinition, rowNumber, columnNumber, filter }) { } (standardfunktionens standardvärde \|\| ""'). Mer information finns i $.fxGridFormatter.bundle(...) och $.fxGridFormatter.default(...). sortFormatter : Används för att formatera ett cellvärde för att sortera dess innehållande rad. Signatur: function sortFormatter(value, { dataItem, columnDefinition }). filterFormatter : Används för filtrering av celler i rutnätet. Signatur: function filterFormatter(value, { dataItem, columnDefinition }). cssClass: En CSS-klass som ska läggas till i cellerna, klassen läggs till i sidhuvudet och brödtextcellerna (standard "")
fx.fxGrid.options.data	Matris	Matris med data som rader återges från.
fx.fxGrid.options.groups	Matris	De tillgängliga grupperna. Varje grupp kan innehålla något av följande: key : Nyckel för gruppen (standard "") text : Text för gruppen som visas (standard "") expanderad : Ange om gruppen är expanderad (standard sant)
fx.fxGrid.options.maxHeight	Antal	Anger att rubriken kommer att åtgärdas så att endast data kan rullas. Detta skapar 2 tabeller. Datahöjden måste anges i bildpunkter. Ange till null om det här beteendet inte är önskvärt.
fx.fxGrid.options.noRows	Sträng	Meddelande som visar när inga data är tillgängliga i tabellen.
fx.fxGrid.options.retainRowMetadata	Boolesk	Anger om radmetadata behålls för dataobjekt när de tas bort från matrisen "data" (matrisen med dataobjekt som återges som rutnätsrader).
fx.fxGrid.options.rowMetadata	Matris	Metadata för dataobjekt när de återges i rutnätet. Varje rad kan innehålla något av följande: * dataItem: Dataobjekt som ska visas i cellerna, baserat på columns.field (standard {}) * grupp: Koppla raden till en gruppnyckel, se gruppalternativet (standardinställningen "") * cssClass: En CSS-klass att lägga till på raden (standard "")
fx.fxGrid.options.text	Objekt	Text som används i widgeten.
fx.fxGrid.options.url	Sträng	Bild-URL:er som används i den här widgeten.
fx.fxGrid._references.columns	Boolesk
fx.fxGrid._references.data	Boolesk	Datareferenser
fx.fxGrid._references.groups	Boolesk	Gruppreferenser
fx.fxGrid._references.rowMetadata	Boolesk	Radmetadatareferenser

Metoder

Name	Beskrivning	Returer	Parametrar
fx.fxGrid.destroy	Förstör widgeten	Ingenting	Ingen
fx.fxGrid.getAllRowMetadata	Hämtar de aktuella radmetadata som används av rutnätet.	Objekt	item (Object): Ett dataobjekt.
fx.fxGrid.refresh	Uppdaterar rubrikstorleken.	Ingenting	Ingen

Exempel

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

Se även

Windows Common Control Services för Azure Pack-tillägg
Windows Tillägg för användargränssnitt i Azure Pack Management Portal

Dela via