Hvordan telle antall rader i Datagrid Bruke Flex

Adobe Flex integrerer data-drevet programutvikling og grafisk design. Flex har en rekke innebygde komponenter for datavisning. Datagrid er en av disse komponentene. Det er en rett-frem måte å forhåndsstraffeutmålingen data i et rutenett form. De data som vises i rutenettet kan leveres fra en server database, en matrise inne i Flex program eller ved hjelp av bindbare egenskaper. Tilveiebringe en telling for hver rad i Grid oppnås gjennom bruk av en bindbare egenskap.

Bruksanvisning

Konstruer Datagrid

1 Åpne Adobe Flex og vise koden for din primære flex programfilen. Det finnes to typer DataGrids innenfor Flex: MX Datagrid og Spark Datagrid. The Spark Datagrid vil fungere best for dette prosjektet. Legg inn koden for en ny gnist Datagrid:

<S: Datagrid id = "dG" dataprovider = "{grid}" width = "100%" height = "100%">

<s:columns>
<s:ArrayList>
<s:GridColumn dataField="firstName"/>
<s:GridColumn dataField="lastName"/>
<s:GridColumn dataField="Phone"/>
<s:GridColumn dataField="Address"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>

Ovennevnte kode oppretter en Datagrid med en ID "dG" som bruker en dataprovider med navnet {grid}. Hver "GridColumn" indikerer dataene som vises i Datagrid kolonner.

2 Konstruer dataprovider. DataProviders kan defineres ved hjelp av Actionscript. Følgende kode vil skape "grid" dataprovider:

<Fx: Script>

import mx.collections.IList;

[Bind] offentlig Var gridData: IList = new Arraylist ([
{Fornavn: & quot; John & quot ;, lastname: & quot; Doe & quot ;, telefon: & quot; 555-555-555 & quot ;, adresse: & quot; 500 Anywhere Street & quot;},
// ... Flere objekter
]);

</ Fx: Script>

Koden skaper over en matrise med data. Den "dG" Grid er bundet til denne tabellen, og vil vise dataene i henhold til dataene kolonnenavn.

3 Kjør programmet i nettleservinduet for å bekrefte at Datagrid fungerer som den skal.

Legg en rad Count kolonne

4 Opprett en ny rad teller kolonne i "dG" Datagrid. Følgende kode bør plasseres mellom "<s: ArrarList>" åpning og lukking koder:

<S: GridColumn>

<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Label text="{rowIndex}" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>

</ S: GridColumn>

I koden ovenfor, "{rowIndex}" er en bind eiendom. Det vil plassere en rad nummer i Datagrid kolonnen vi nettopp opprettet.

5 Kontroller at denne koden er riktig plassert:

<S: Datagrid id = "dG" dataprovider = "{grid}" width = "100%" height = "100%">

<s:columns>
<s:ArrayList>
<s:GridColumn>
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Label text="{rowIndex}" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="firstName"/>
<s:GridColumn dataField="lastName"/>
<s:GridColumn dataField="Phone"/>
<s:GridColumn dataField="Address"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>

Koden ovenfor vil skape et kontaktDataGrid bundet til "grid" dataprovider med en datakolonne som viser en rad teller.

6 Kjør programmet og kontrollere at den nye raden teller kolonne vises i Datagrid. Hvis du blar til siste rad, vil du ha det totale Grid rad teller.