Ahora hay una gran cantidad de controles de la tabla de datos de JavaScript en el mercado, incluidos el código abierto de terceros y autoproducidos y vendidos. Se puede decir que FlexGrid de Wijmo es el mejor control de mesa actualmente adaptado a Angular 2.
Angular 2 Tabla de datos Requisitos básicos: más pequeños, más rápidos y más familiares.
Para usar los formularios Angular 2, primero debe comprender los requisitos básicos de los formularios. FlexGrid comenzó en 1996 cuando los controles escritos para Visual Basic se usaron en C ++. Con los años, ha evolucionado y ha sido perfeccionado en múltiples plataformas, especialmente en la plataforma JavaScript. FlexGrid se nombra debido al concepto de Flex, y los controles deben contener los conjuntos de características clave más necesarios y las capacidades escalables. Funciones básicas incorporadas como: clasificación, agrupación, edición y otras cosas elegantes se pueden proporcionar a través de extensiones opcionales. Esto mantendrá los controles simplificados y eficientes, al tiempo que brinda a los clientes la capacidad de personalizar profundamente.
Otro indicador importante es el rendimiento. FlexGrid se compara constantemente con otros productos para garantizar que seamos lo suficientemente rápidos. El concepto Flex hace que nuestros archivos lo suficientemente pequeños (aproximadamente 25k después de la compresión) y no tenemos dependencias en otros marcos. La mejora del rendimiento más significativa es a través de la representación virtual. FlexGrid virtualiza todo DOM, dibujando solo celdas que necesitan estar llenas de ventanas gráficas (y algunos buffers para desplazarse suavemente) a la vez. Cuando la tabla se desplaza, las células (elementos DOM) se recicla. La representación virtual significa que la red puede unir millones de datos en 1 segundo.
Finalmente, una de las características más importantes son las operaciones familiares. FlexGrid se basa en todos los comportamientos de interacción en Excel, que puede ser la forma más utilizada para que los usuarios operen la red. Las personas quieren obtener un comportamiento definitivo al desplazarse, hacer clic, especialmente cuando se usa comandos de teclado (incluidas las funciones del portapapeles) en lugar de inventarnos. Imitamos Excel para que los usuarios se sientan cómodos usando nuestras tablas, y sorprendentemente muchas otras cuadrículas han inventado su propio comportamiento o no admiten completamente el desplazamiento y el comportamiento del teclado. Por ejemplo, cuando selecciona una fila de datos y mantiene presionada la flecha hacia abajo, muchas tablas no mostrarán el comportamiento que esperaba.
Use el lenguaje de marcado para declarar los controles de la interfaz de usuario
Ahora echemos un vistazo a las ventajas de FlexGrid bajo Angularjs. El mayor beneficio bajo AngularJS es el lenguaje de marcado de FlexGrid: los componentes angulares proporcionan la capacidad de declarar controles utilizando el lenguaje de marcado. Los marcadores de declaración siguen bien el patrón de diseño MVVM, y podemos configurar nuestros componentes por completo a través de la vista (lenguaje de marcado).
FlexGrid admite el uso del lenguaje de marcado angular para declarar una API completa. Puede usar el lenguaje de marcado para establecer propiedades, adjuntar eventos y configurar subcomponentes (como columnas).
Aquí hay un ejemplo que demuestra cómo configurar FlexGrid usando el lenguaje de marcado Angular2.
<WJ-FLEX-Grid [itemssource] = "data"> <wjflex-grid-column [header] = "'country'" [binding] = "'country'" [width] = "'*'"> </wj-fllex-crid-column> <wj-fllex-crid-column [header] = "date" [binding] = "date"> </wj-fllex-cred-cred-cr-cromumn> <WJ-FLEX-Grid-Column [Header] = "'Revenue'" [Binding] = "'Canter'" [Format] = "'N0'"> </WJ-Flex-Grid-Column> <WJ-Flex-Grid-Column [Header] = "'Active'" [Binding] = "'Active'"> </WJ-Flex-Grid-Cosumn> </wj-Flex-Grid>
Aquí están los resultados que hemos obtenido del lenguaje de marcado que hemos declarado.
Muchos otros componentes de la cuadrícula solo proporcionan la capacidad de declarar un control utilizando el lenguaje de marcado, lo que da como resultado todas las configuraciones que deben realizarse utilizando JavaScript (ViewModel). Esto hace confundirse la vista y el Mode View, obligando a los desarrolladores a usar JavaScript para cambiar la interfaz de usuario de control. Al hacer esto, perderá todos los beneficios de la vinculación angular. Creemos que hacerlo es un antipatrón. Vea la diferencia a continuación:
<Ag-Grid-Ng2 #AgGrid // elementos unidos a las propiedades en el controlador [GridOptions] = "GridOptions" [columndefs] = "columndefs"> </ag-grid-ng2>
Mediante el uso de componentes que admiten plenamente los lenguajes de marcado, puede obtener soporte de patrones MVVM completo y crear aplicaciones como otras plataformas de desarrollo (ASP.NET, Java, Silverlight, Flex).
Declarar plantillas de tipo de célula reutilizable
Para declarar cualquier miembro de FlexGrid con lenguaje de marcado, también proporcionamos plantillas de celdas. Las plantillas de células son una forma de declarar plantillas reutilizables para diferentes tipos de células. Las plantillas de células admiten cualquier etiqueta angular válida, incluidas expresiones unidas, HTML y otros componentes. Los tipos de plantilla de celda incluyen: celda de título, celda de modo de edición, celda de modo normal, etc.
A través de las plantillas de células, FlexGrid proporciona una representación para crear componentes. No solo puede declarar FlexGrid en el lenguaje de marcado, sino también usar toda la sintaxis angular en cada celda. Veamos cuán poderosa es la etiqueta de plantilla de celda FlexGrid.
<WJ-FLEX-Grid [itemssource] = "data1" [pETEATRING] = "false" [DeFerresizing] = "true"> <TEMPLATE WJFlexGRIDCELLTemplate [CellType] = "Topleft '" *ngif = "CustomTopleft"> № </template> <Template WjflexgridCelltEmplate [cellType]="'RowHeader'" *ngIf="customRowHeader" #cell="cell"> { {cell.row.index}} </template> <wj-flex-grid-column header="Country" binding="country" > <template wjFlexGridCellTemplate [cellType]="'Cell'" *ngIf="customCell" #item="item"> <img src="resources/{ {item.country}}.png" /> { {item.country}} </template> <template wjFlexGridCellTemplate [cellType]="'GroupHeader'" *ngIf="customGroupHeader" #item="item" #cell="cell"> <input type = "CheckBox" [(ngmodel)] = "celular.row.iscollapsed"/> {{item.name}} ({{{item.item.items.length}} items) </template> </wj-flex-grid-columna> <wjflex-brid-columna encabezado = "descarga" = "descarga" [agregado] = "'sum'"> <TEMPLATE wjflexGridCelltemplate [celularype] = "'columnheader'" *ngif = "customColumnheader"> <input type = "checkbox" [(ngModel)] = "uicTX.HighLightLoDownlowLoLODLOWNODOGS" /> descarga </tempate> <tempate wjJflex -glexgridceMtceMtCeMtEmtcEltEmtEmtEmtEmtEmToDlowDlowLoLODOWLOWS " /> descarga </tempate> <templeMate WjflexGlExClexCeMTeMtCeMtCeMtEmtCeMtEmTeMeM. [CellType] = "'Cell'" *ngif = "CustomCell" #item = "item"> <span [ngstyle] = "{color: uictx.highlightdownloads? (item.em.downloads> 10000? 'verde': 'rojo'): '}" style = "font-weight: 700"> {{item.downloads}}}}}}} </spán> </spán WJFlexGridCellTemplate [CellType] = "'Group'" *ngif = "CustomGroup" #Cell = "Cell"> Sum = {{Cell.Value | Número: '1.0-0'}} </template> </wj-flex-grid-column> </wj-fllex-grid>Los resultados que declaramos como plantillas de células
Plantillas de células reutilizables en Angular2
Una vez más, para lograr este efecto en otros controles de tabla, debe editar el archivo JavaScript y escribirlo en ViewModel.
Actualice automáticamente los controles utilizando el enlace de datos.
Creo que el beneficio más productivo de Angular es la expresión vinculante, que permite que los controles que creamos respondan automáticamente a los cambios de datos, liberándonos de tediosos manejadores de eventos y operaciones DOM.
Todas las propiedades de FlexGrid soportan la vinculación de datos. Además, también proporcionamos unión de dos vías para algunas propiedades que requieren un enlace de datos en dos vías. Sin escribir ningún código, puede vincular componentes para manejar eventos e interactuar con los datos del modelo.
La unión de datos es un ciudadano de primera clase en cualquier plataforma de desarrollo (Java, .NET), y Angular lo hace más fácil y admite la unión de datos unidireccional y bidireccional.
TypeScript: 2 días de trabajo con Angular.
FlexGrid y todos los controles WIJMO están escritos en TypeScript. Tenemos una historia bastante larga trabajando en la plataforma de Microsoft, por lo que cuando TypeScript se vuelve maduro, tenemos un sentido de hogar. TypeScript nos brinda una experiencia similar a la escritura de C#: clases, herencia, tipificación fuerte, comprobación de tipos, verificación de errores de tiempo de construcción y más. Es el catalizador para nosotros crear controles de JavaScript de grado empresarial, al igual que nosotros en otras plataformas, no necesitamos hacer ningún compromiso en la API o la sintaxis.
Quizás lo más importante, TypeScript nos brinda la capacidad de crear controles reales en lugar de widgets. FlexGrid como una clase hereda de nuestra clase de control base. Cuando los widgets lo obligan a establecer un atributo y pasar valores utilizando funciones vergonzosas, FlexGrid tiene accesorios Getter y Setter que puede establecer directamente. Wijmo también incluye un modelo de evento para simplemente agregar controladores.
Si nuestros usuarios eligen usar TPyescript para el desarrollo, recibirán indicaciones y advertencias inteligentes en los IDE compatibles, y habrá mensajes de error cuando intenten asignar un tipo incorrecto a un atributo.
La característica más atractiva de TypeScript es que nuestros clientes pueden heredar y extender nuestros controles, lo que está en línea con nuestra filosofía flexible, simplificando la personalización de control y reduciendo los errores.
Finalmente, vamos de la mano con Angular2. Me sorprendió ver una decisión que tomamos hace unos años, utilizando el lenguaje de Microsoft. Nuestra clase de control ya usa TypeScript, por lo que se puede combinar sin problemas con Angular2. Simplemente los extendimos y agregamos metadatos para exponerlos en componentes Angular2.
No creas mis palabras unilateral: intente también
"Compramos Wijmo y su equipo hizo un gran trabajo: una interfaz hermosa; arquitectura reflexiva; documentación bien desarrollada; manteniéndose al día con la tecnología cambiante", dijo BJ Jeong de Cisco.
Si mi mensaje de texto no te convence, aliéntete a que pruebes FlexGrid y demuestre que estoy bien o mal. Si me equivoco y FlexGrid es golpeado por otro control de la cuadrícula, puedes decirme. Nunca hemos dejado de desarrollar y mejorar durante 20 años, y nunca nos detendremos. Descargar ahora para experimentarlo.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.