Come contare il numero di righe nel DataGrid con Flex

July 24

Come contare il numero di righe nel DataGrid con Flex


Adobe Flex integra lo sviluppo di applicazioni data-driven e la progettazione grafica. Flex incorpora una varietà di componenti integrati per la visualizzazione dei dati. Il DataGrid è uno di quei componenti. E 'un modo straight-forward dei dati pre-condanna in una forma di griglia. I dati che compaiono all'interno della lattina griglia proviene da un database del server, una matrice all'interno del programma Flex o attraverso l'uso di proprietà associabili. Fornire un conteggio di ogni riga nel DataGrid viene realizzato attraverso l'uso di una proprietà associabile.

istruzione

Costruire il DataGrid

1 Aprite Adobe Flex e visualizzare il codice per il file dell'applicazione Flex primaria. Ci sono due tipi di DataGrid all'interno Flex: la MX DataGrid e DataGrid Spark. Il DataGrid Spark funziona meglio per questo progetto. Aggiungere il codice per un nuovo DataGrid Spark:

<S: DataGrid id = "dg" dataProvider = "{} grid" width = "100%" height = "100%">

&lt;s:columns>
&lt;s:ArrayList>
&lt;s:GridColumn dataField=&quot;firstName&quot;/>
&lt;s:GridColumn dataField=&quot;lastName&quot;/>
&lt;s:GridColumn dataField=&quot;Phone&quot;/>
&lt;s:GridColumn dataField=&quot;Address&quot;/>
&lt;/s:ArrayList>
&lt;/s:columns>
&lt;/s:DataGrid>

Il codice precedente crea un DataGrid con un ID di "dg" che utilizza un dataProvider con il nome di {} griglia. Ogni "GridColumn" indica i dati che appariranno all'interno colonne del DataGrid.

2 Costruire la dataProvider. DataProviders possono essere definite mediante ActionScript. Il seguente codice creerà il dataProvider "griglia":

<Fx: Script>

import mx.collections.IList;

[Bindable] var pubblico gridData: IList = new ArrayList ([
{FirstName: & quot; John & quot ;, Cognome: & quot; Doe & quot ;, telefono: & quot; & quot ;, 555-555-555 indirizzo: & quot; 500 Anywhere Street & quot;},
// ... Più oggetti
]);

</ Fx: Script>

Il codice precedente crea un array di dati. Il DataGrid "dg" è destinata a questo array e visualizza i dati in base ai nomi delle colonne di dati.

3 Eseguire l'applicazione nella finestra del browser per verificare che il DataGrid sta funzionando correttamente.

Aggiungere una colonna Conteggio righe

4 Creare una nuova colonna conteggio delle righe del DataGrid "dg". Il seguente codice deve essere inserito tra i "<s: ArrarList>" tag di apertura e di chiusura:

<S: GridColumn>

&lt;s:itemRenderer>
&lt;fx:Component>
&lt;s:GridItemRenderer>
&lt;s:Label text=&quot;{rowIndex}&quot; />
&lt;/s:GridItemRenderer>
&lt;/fx:Component>
&lt;/s:itemRenderer>

</ S: GridColumn>

Nel codice di cui sopra, "{} rowIndex" è una proprietà associabile. Sarà posto un numero di riga nella colonna di DataGrid che abbiamo appena creato.

5 Verificare che il codice è stato correttamente posizionato:

<S: DataGrid id = "dg" dataProvider = "{} grid" width = "100%" height = "100%">

&lt;s:columns>
&lt;s:ArrayList>
&lt;s:GridColumn>
&lt;s:itemRenderer>
&lt;fx:Component>
&lt;s:GridItemRenderer>
&lt;s:Label text=&quot;{rowIndex}&quot; />
&lt;/s:GridItemRenderer>
&lt;/fx:Component>
&lt;/s:itemRenderer>
&lt;/s:GridColumn>
&lt;s:GridColumn dataField=&quot;firstName&quot;/>
&lt;s:GridColumn dataField=&quot;lastName&quot;/>
&lt;s:GridColumn dataField=&quot;Phone&quot;/>
&lt;s:GridColumn dataField=&quot;Address&quot;/>
&lt;/s:ArrayList>
&lt;/s:columns>
&lt;/s:DataGrid>

Il codice qui sopra creare un DataGrid contatti legato al dataProvider "griglia" con una colonna di dati che visualizza un conteggio delle righe.

6 Eseguire il programma e verificare che la nuova colonna conteggio delle righe viene visualizzata nel DataGrid. Se si scorre fino all'ultimo fila, si avrà il numero totale di righe DataGrid.