Atualmente, há um grande número de controles de tabela de dados JavaScript no mercado, incluindo terceiros de código aberto e autoproduzido e vendido. Pode -se dizer que o FlexGrid do Wijmo é o melhor controle de tabela atualmente adaptado ao Angular 2.
Tabela de dados angular 2 Requisitos básicos: menor, mais rápido e mais familiar.
Para usar as formas angulares 2, primeiro você precisa entender os requisitos básicos dos formulários. O FlexGrid começou em 1996, quando os controles escritos para o Visual Basic foram usados em C ++. Ao longo dos anos, evoluiu e foi aperfeiçoado em várias plataformas, especialmente na plataforma JavaScript. O FLEXGRID é nomeado devido ao conceito de Flex, e os controles devem conter os principais conjuntos de recursos mais necessários e recursos escaláveis. Funções básicas embutidas, como: classificação, agrupamento, edição e outras coisas sofisticadas podem ser fornecidas através de extensões opcionais. Isso manterá os controles simplificados e eficientes, ao mesmo tempo em que fornecerá aos clientes a capacidade de personalizar profundamente.
Outro indicador importante é o desempenho. O FlexGrid está constantemente comparando com outros produtos para garantir que somos rápidos o suficiente. O conceito Flex torna nossos arquivos pequenos o suficiente (cerca de 25k após a compactação) e não temos dependências de outras estruturas. A melhoria mais significativa do desempenho é através da renderização virtual. O FlexGrid virtualiza todo o DOM, desenhando apenas células que precisam ser preenchidas com viewports (e alguns buffers para suavizar a rolagem) por vez. Quando a tabela é rolada, as células (elementos DOM) são recicladas. A renderização virtual significa que a grade pode vincular milhões de dados em 1 segundo.
Finalmente, um dos recursos mais importantes são as operações familiares. O FlexGrid é baseado em todos os comportamentos de interação no Excel, que podem ser a maneira mais usada para os usuários operarem a grade. As pessoas querem obter um comportamento definitivo ao rolar, clicando, especialmente ao usar comandos de teclado (incluindo funções de área de transferência) em vez de nos inventarem. Imitamos o Excel para que os usuários se sintam confortáveis em usar nossas mesas e, surpreendentemente, muitas outras grades inventaram seu próprio comportamento ou não suportam totalmente a rolagem e o comportamento do teclado. Por exemplo, quando você seleciona uma linha de dados e segura a seta para baixo, muitas tabelas não mostram o comportamento que você esperava.
Use o idioma de marcação para declarar controles da interface do usuário
Agora vamos dar uma olhada nas vantagens do FlexGrid sob o AngularJS. O maior benefício do AngularJS é a linguagem de marcação do FlexGrid: os componentes angulares fornecem a capacidade de declarar controles usando a linguagem de marcação. Os marcadores de declaração seguem bem o padrão de design do MVVM e podemos configurar nossos componentes inteiramente através da exibição (linguagem de marcação).
O FlexGrid suporta o uso da linguagem de marcação angular para declarar uma API completa. Você pode usar o idioma de marcação para definir propriedades, anexar eventos e configurar subcomponentes (como colunas).
Aqui está um exemplo que demonstra como configurar o FlexGrid usando a linguagem de marcação Angular2.
<wj-flex-grid [itenssource] = "dados"> <wj-flex-grid-coluna [cabeçalho] = "country '" [binding] = "' country '" [width] = "'*'"> </wj-flex-grid-column> <wj-flex-column [header] = "' date '" [Binding] = = ") <WJ-Flex-grid-Column [cabeçalho] = "'Revenue'" [binding] = "'valor'" [formato] = "'n0'"> </wj-flex-grid-column> <wj-flex-grid-column [header] = "ativo '" [binding] = "' '"> </wj-flex-grid] = "ativo" "[binding] ="
Aqui estão os resultados que obtivemos do idioma de marcação que declaramos.
Muitos outros componentes da grade fornecem apenas a capacidade de declarar um controle usando a linguagem de marcação, o que resulta em todas as configurações que devem ser feitas usando o JavaScript (ViewModel). Isso deixa a visualização e o viewmode confusos, forçando os desenvolvedores a usar o JavaScript para alterar a interface do usuário de controle. Ao fazer isso, você perderá todos os benefícios da ligação angular. Achamos que isso é um anti-padre. Veja a diferença abaixo:
<AG-GRID-NG2 #AGGRID // itens ligados às propriedades no controlador [gridOptions] = "GridOptions" [columndefs] = "columndefs"> </g-grid-ng2>
Usando componentes que suportam totalmente os idiomas de marcação, você pode obter suporte de padrão MVVM completo e criar aplicativos como outras plataformas de desenvolvimento (ASP.NET, Java, Silverlight, Flex).
Declarar modelos de tipo de célula reutilizável
Para declarar membros do FlexGrid usando o idioma de marcação, também fornecemos modelos de célula. Os modelos de células são uma maneira de declarar modelos reutilizáveis para diferentes tipos de células. Os modelos de células suportam quaisquer tags angulares válidos, incluindo expressões ligadas, HTML e outros componentes. Os tipos de modelos de célula incluem: célula de título, célula do modo de edição, célula de modo normal, etc.
Através dos modelos de células, o FlexGrid fornece uma representação para a criação de componentes. Você não pode apenas declarar o FlexGrid na linguagem de marcação, mas também usar toda a sintaxe angular em todas as células. Vamos ver o quão poderosa é a tag do modelo de célula flexgrid.
<wj-flex-grid [itensSource] = "data1" [permiteorting] = "false" [adiando] = "true"> <modelo wjflexGridCellTemplate [Celltype] = "Topleft '" *ngif = "personalizador"> № </modelo> <modelo) " *ngif = "CustomRowHeader" #Cell = "Cell"> {{Cell.row.index}} </modemplate> <wj-flex-grid-column header = "country" binding = "country"> <modelo WJFlexGridCellTemplate [Celltype] = "'Cell'" *NGF = " {item.country}}. [(ngmodel)] = "Cell.row.iscollapsed"/> {{item.name}} ({{item.items.length}} itens) </modemplate> </wj-flex-grid-column> <wj-flex-column header = "downloads" Binding = "downloads" [whusth] wjflexGridCellTemplate [Celltype] = "'ColumnHeader'" *ngif = "CustomColumnHeader"> <input type = "Cadex de caixa de seleção" [(ngmodel)] = "uictx.highlightdownloads" /> downloads < /modellestplate> <modelo WJFlexGridEllMplate [ /> #item = "Item"> <span [ngstyle] = "{cor: uictx.highlightdownloads? (item.downloads> 10000? 'Green': 'Red'): '}" style = "font-weight: 700"> {{item.Downloads}} </span> </modelyt> <model *ngif = "CustomGroup" #Cell = "Cell"> Sum = {{Cell.Value | Número: '1.0-0'}} </modemplate> </wj-flex-grid-colun> </wj-flex-grid>Os resultados que declaramos como modelos de células
Modelos de células reutilizáveis no Angular2
Novamente, para alcançar esse efeito em outros controles de tabela, você precisa editar o arquivo JavaScript e escrevê -lo no ViewModel.
Atualize automaticamente os controles usando a ligação de dados.
Acredito que o benefício mais produtivo do angular é a expressão de ligação, que permite que os controles que criamos respondam automaticamente às alterações de dados, liberando -nos de manipuladores de eventos tediosos e operações de DOM.
Todas as propriedades da ligação de dados do FlexGrid suportam. Além disso, também fornecemos ligação bidirecional para algumas propriedades que exigem ligação de dados bidirecional. Sem escrever nenhum código, você pode vincular componentes para lidar com eventos e interagir com os dados do modelo.
A ligação de dados é um cidadão de primeira classe em qualquer plataforma de desenvolvimento (Java, .NET), e o Angular facilita e suporta a ligação de dados unidirecional e bidirecional.
TypeScript: 2 dias de trabalho com angular.
Os controles FlexGrid e todos os Wijmo estão escritos no TypeScript. Temos uma história bastante longa trabalhando na plataforma da Microsoft; portanto, quando o TypeScript se torna maduro, temos um senso de lar. O TypeScript nos oferece uma experiência semelhante à escrita C#: classes, herança, digitação forte, verificação de tipo, verificação de erros no tempo de construção e muito mais. É o catalisador para criar controles JavaScript de nível corporativo, assim como fazemos em outras plataformas, não precisamos fazer compromissos na API ou sintaxe.
Talvez o mais importante, o TypeScript nos permite criar controles reais em vez de widgets. O FlexGrid como classe herda da nossa classe de controle base. Quando os widgets o forçam a definir um atributo e aprovar valores usando funções embaraçosas, o FlexGrid possui acessadores Getter e Setter que você pode definir diretamente. O Wijmo também inclui um modelo de evento para simplesmente adicionar manipuladores.
Se nossos usuários optarem por usar o TPyEScript para desenvolvimento, eles receberão prompts e avisos inteligentes nos IDEs suportados, e haverá mensagens de erro quando tentarem atribuir um tipo incorreto a um atributo.
A característica mais atraente do TypeScript é que nossos clientes podem herdar e estender nossos controles, que estão alinhados com nossa filosofia flexível, simplificando a personalização de controle e reduzindo erros.
Finalmente, acompanhamos o Angular2. Fiquei surpreso ao ver uma decisão que tomamos há alguns anos, usando o idioma da Microsoft. Nossa classe de controle já usa o TypeScript, para que possa ser combinado perfeitamente com o Angular2. Simplesmente os estendemos e adicionamos metadados para expô -los em componentes Angular2.
Não acredite nas minhas palavras unilaterais: tente também
"Compramos o Wijmo e sua equipe fizeram um ótimo trabalho: belas interface; arquitetura atenciosa; documentação bem desenvolvida; acompanhando a mudança de tecnologia", disse BJ Jeong, da Cisco.
Se meu texto não o convencer, incentive você a experimentar o FlexGrid e me provar certo ou errado. Se eu estiver errado e o FlexGrid é espancado por outro controle de grade, você pode me dizer. Nunca paramos de desenvolver e melhorar por 20 anos, e nunca vamos parar. Faça o download agora para experimentar.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.