Como contar o número de linhas em uma tabela DataGrid utilizando Flex

Escrito por evan em | Traduzido por felipe zschornack
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como contar o número de linhas em uma tabela DataGrid utilizando Flex
Os DataGrids exibem dados no formato de uma tabela (Comstock/Comstock/Getty Images)

O Adobe Flex integra o desenvolvimento de aplicações com o design gráfico. O Flex incorpora uma variedade de componentes embutidos para exibição de dados. O DataGrid (grade de dados) é um destes componentes. Ele é uma maneira direta de inserir dados em uma tabela. Os dados que aparecem dentro da tabela podem vir de um servidor de banco de dados, de um array (vetor) de dentro do programa Flex ou através do uso de propriedades bindable (propriedades ligadas à interface). Contar o número de linhas de um DataGrid é conseguido através do uso de uma propriedade bindable.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Flex Builder 4.5

Lista completaMinimizar

Instruções

    Construa o DataGrid

  1. 1

    Abra o Adobe Flex e veja o código do arquivo da sua aplicação flex primária. Existem dois tipos de DataGrids dentro do Flex: o MX Data Grid e o Spark DataGrid. O Spark DataGrid irá se adequar melhor a este projeto. Adicione o código abaixo para criar um novo Spark 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>

    O código acima cria um DataGrid com um ID "dG" que utiliza um dataProvider (fornecedor de dados) com o nome {grid}. Cada "GridColumn" (coluna da grade) indica os dados que irão aparecer dentro das colunas do DataGrid.

  2. 2

    Construa o dataProvider (fornecedor de dados). Os DataProviders podem ser definidos utilizando-se o ActionScript. O seguinte código irá criar o dataProvider "grid":

    <fx:Script> import mx.collections.IList;

    [Bindable] public var gridData:IList = new ArrayList([ {firstName: "John", lastName: "Doe", phone: "555-555-555", address: "500 Anywhere Street"}, // ... more objects ]); </fx:Script>

    O código acima cria um array (vetor) de dados. O DataGrid "dG" está ligado a este array e irá exibir os dados de acordo com os nomes das colunas de dados.

  3. 3

    Execute a aplicação em uma janela do seu navegador para verificar se o DataGrid está funcionando corretamente.

    Adicione uma coluna para contagem de linhas

  1. 1

    Crie uma nova coluna para contagem de linhas no DataGrid "dG". O código a seguir deve ser colocado entre as tags de abertura e fechamento de "<s.ArrayList>":

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

    No código acima, "{rowIndex}" é uma propriedade bindable. Isto irá colocar um número de listagem na coluna do DataGrid que acabamos de criar.

  2. 2

    Verifique se o código a seguir está no local correto:

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

    O código acima irá criar um DataGrid de contatos ligado ao dataProvider "grid" com uma coluna de dados que irá exibir o número da listagem.

  3. 3

    Execute o programa e verifique se a nova coluna de listagem aparece no seu DataGrid. Se você deslizar até a última linha, você terá o total de linhas do DataGrid.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível