switch - ¿La mejor manera de representar una cuadrícula o tabla en AngularJS con Bootstrap 3?

ng-if

Question

Estoy creando una aplicación con AngularJS y Bootstrap 3. Quiero mostrar una tabla / cuadrícula con miles de filas. ¿Cuál es el mejor control disponible para AngularJS y Bootstrap con características como clasificación, búsqueda, paginación, etc.?

Answer 1

Al final de esta respuesta a la pregunta de cómo pensar en Angular si tiene antecedentes en jQuery, la publicación principal de Josh David Miller resume:

Ni siquiera uses jQuery. Ni siquiera lo incluyas. Te detendrá. Y cuando llegue a un problema que cree que ya sabe cómo resolver en jQuery, antes de buscar el $ , intente pensar cómo hacerlo dentro de los límites del AngularJS. Si no lo sabes, pregunta! 19 de cada 20 veces, la mejor manera de hacerlo no necesita jQuery y tratar de resolverlo con jQuery da como resultado más trabajo para usted.

Ahora, si desea una cuadrícula con toneladas de funciones y opciones para la personalización, jQuery DataTables es una de las mejores. Las cuadrículas solo angulares que he visto no se acercan a lo que puede hacer jQuery DataTables.

Sin embargo , jQuery DataTables no se integra bien con AngularJS. (Se han realizado varios esfuerzos, pero ninguno ofrece una integración perfecta).

Tal vez eso deja a una persona con dos opciones.

La primera es ir con una cuadrícula Angular pura que no es tan rica en funciones como DataTables. Estoy de acuerdo con @Moonstom en cuanto a estar harto de las otras cuadrículas angulares que existen, y trNgGrid se ve bien.

La segunda opción es decir: este es uno de esos casos raros 1 de cada 20 en los que debería usar jQuery e ir con el complemento jQuery DataTables, porque los esfuerzos para reinventar la rueda con las rejillas angulares puras han dado lugar a Rueda menos robusta que DataTables.

Sería bueno si fuera de otra manera, pero simplemente no he visto que el ecosistema Angular haya creado una cuadrícula tan sólida como jQuery DataTables, y no es como si una buena cuadrícula de datos fuera tan buena en una aplicación web. : una buena rejilla es un elemento esencial.

Answer 2

Como se mencionó en otras respuestas: para una tabla con búsqueda, selección y paginación " ng-grid " son las mejores opciones. Mencionaré un par de cosas que podrían ser útiles al implementar:

Para configurar env:

1. http://www.json-generator.com/ para generar datos JSON. Es una herramienta bastante interesante para obtener su conjunto de datos de muestra para acelerar el desarrollo.

2. Puede comprobar este plunker para su implementación. He modificado para incluir: búsqueda, selección y paginación http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Puede consultar este tutorial sobre la tabla inteligente. Proporciona toda la información que necesita: http://lorenzofox3.github.io/smart-table-website/

Entonces la siguiente pregunta es bootstrap 3 : no es exactamente, pero estas plantillas se ven bien. - Solo puede usar https://github.com/angular-ui/bootstrap/tree/master/template todas las plantillas están bien escritas.

Puedo continuar sobre cómo convertir bootstrap 3 a angularjs pero ya se mencionó en los siguientes enlaces:

• Bootstrap 3 compatible con las directivas actuales de AngularJS bootstrap?
• https://github.com/angular-ui/bootstrap/issues/331

Tenga en cuenta que con respecto a la mesa inteligente debe verificar si está lista para su versión angular

Answer 3

Con "miles de filas" su mejor apuesta sería obviamente hacer la paginación del lado del servidor. Cuando miré las diferentes opciones de tabla / cuadrícula de AngularJs, hace un tiempo atrás había tres favoritos claros:

• ng-grid
• ng-table
• Smart-Table

Los tres son buenos, pero implementados de manera diferente. La que elija probablemente se basará más en las preferencias personales que en cualquier otra cosa.

ng-grid es probablemente el más conocido debido a su asociación con angular-ui, pero personalmente prefiero ng-table , realmente me gusta su implementación y cómo la usa, y tienen una gran documentación y ejemplos disponibles que se están mejorando activamente.

Answer 4

Después de probar ngGrid, ngTable, trNgGrid y Smart Table , llegué a la conclusión de que Smart Table es, con mucho, la mejor implementación AngularJS-wise y Bootstrap-wise. Se construye exactamente de la misma forma en que construiría su propia tabla ingenua utilizando el estándar angular. Además de eso, han agregado algunas directivas que lo ayudan a clasificar, filtrar, etc. Su enfoque también hace que sea muy sencillo extenderse. El hecho de que utilicen las etiquetas html normales para las tablas y la repetición estándar de ng para las filas y el bootstrap estándar para el formateo hace que este sea mi claro ganador.

Su código JS depende de angular y su html puede depender de bootstrap si lo desea. El código JS es de 4 kb en total, e incluso puedes sacar cosas fácilmente de allí si quieres alcanzar una huella aún más pequeña.

Donde las otras rejillas le darán claustrofobia en diferentes áreas, Smart Table se siente abierto y al punto.

Si confía en gran medida en la edición en línea y otras funciones avanzadas, puede comenzar a trabajar más rápido con ngTable, por ejemplo. Sin embargo, puede agregar dichas funciones con bastante facilidad en Smart Table.

No te pierdas la mesa inteligente !

No tengo ninguna relación con Smart Table, excepto por usarla yo mismo.

Answer 5

La grilla de Kendo es buena así como Wijmo. Sé que Kendo viene con enlaces angulares para su fuente de datos y creo que Wijmo tiene un complemento Angular. Aunque tampoco son libres.

Answer 6

Para cualquiera que lea este post: hazte un favor y mantente alejado de ng-grid. Está lleno de errores (realmente ... casi todas las partes de la biblioteca están rotas de alguna manera), los desarrolladores han abandonado el soporte de la rama 2.0.x para poder trabajar en 3.0, que está muy lejos de estar listo. Arreglar los problemas por sí mismo no es una tarea fácil, el código ng-grid no es pequeño y no es simple, a menos que tenga mucho tiempo y un conocimiento profundo de angular y js en general, va a ser una tarea difícil.

En pocas palabras: está lleno de errores, y la última versión estable ha sido abandonada.

El github está lleno de relaciones públicas, pero están siendo ignorados. Y si informa de un error en la rama 2.x, se cierra.

Sé que es un proyecto de código abierto y las quejas pueden parecer un poco fuera de lugar, pero desde la perspectiva de un desarrollador que busca una biblioteca, esa es mi opinión. Pasé muchas horas trabajando con ng-grid en un proyecto grande y los headcaches nunca terminan

Answer 7

Puede usar clases bootstrap 3 y crear una tabla usando la directiva ng-repeat

Ejemplo:

angular.module(''App'', []);

function ctrl($scope) {
    $scope.items = [
        [''A'', ''B'', ''C''],
        [''item1'', ''item2'', ''item3''],
        [''item4'', ''item5'', ''item6'']
    ];
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="App">
  <div ng-controller="ctrl">
    
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <th ng-repeat="itemA in items[0]">{{itemA}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ng-repeat="itemB in items[1]">{{itemB}}</td>
        </tr>
        <tr>
          <td ng-repeat="itemC in items[2]">{{itemC}}</td>
        </tr>
      </tbody>
    </table>
    
    
  </div>
</div>

ejemplo en vivo: http://jsfiddle.net/choroshin/5YDJW/5/

Actualizar:

o siempre puedes probar el popular angular-ui.github.io/ng-grid , ng-grid es bueno para ordenar, buscar, agrupar, etc., pero aún no lo he probado en datos a gran escala.

Answer 8

Tenía el mismo requisito y lo resolví usando estos componentes:

• AngularJS 1.0.8
• angular-ui.github.io/bootstrap : Compatible con AngularJS 1.0.8 y Boostrap CSS 3.x.
• ng-grid 2.0.7 : Compatible con AngularJS 1.0.8
• Bootstrap CSS 3.0

El componente de la tabla ng-grid es capaz de mostrar cientos de filas en una cuadrícula desplazable. Si tiene que lidiar con miles de entradas, es mejor que use el paginador de ng-grid. La documentación de ng-grid es excelente y contiene muchos ejemplos. La clasificación y la búsqueda son compatibles incluso en combinación con la paginación.

Aquí hay una captura de pantalla de un proyecto actual para darle una impresión de cómo se ve:

[ACTUALIZACIÓN Julio 2017]

Después de tener ng-grid en producción durante un par de años, aún puedo decir que no hay problemas importantes con este componente. Sí, un montón de errores menores, pero no muestran tapones (al menos en mis casos de uso). Dicho esto, recomendaría encarecidamente que no utilices este componente si inicias un proyecto desde cero. Este componente es una buena opción solo si está vinculado a AngularJS 1.0.x. Si tiene la libertad de elegir la versión Angular, elija un componente más nuevo. Sam Deering compiló una lista de componentes de tabla para Angular 4 en este blog .

Answer 9

TrNgGrid está funcionando muy bien hasta ahora. Estas son las razones por las que lo prefiero a ng-grid y mover a este componente

• Hace elementos de la tabla para que pueda ser controlado y usar toda la potencia de bootstrap .css (ng-grid utiliza los temas de la interfaz de usuario de jQuery).

• Opciones de rejilla simples y bien documentadas.

• Funciona la paginación del tamaño del servidor

Answer 10

Una rejilla angular rica en características es esta:

trNgGrid

Algunas de sus características:

• Fue construido con la simplicidad en mente.
• Está utilizando tablas HTML simples, permitiendo que los navegadores optimicen la representación.
• Completamente declarativo, preservando la separación de preocupaciones, lo que le permite describirlo completamente en HTML, sin desordenar sus controladores.
• Es totalmente personalizable a través de plantillas y atributos enlazados de datos bidireccionales.
• Fácil de mantener, con el código escrito en TypeScript.
• Tiene una lista muy corta de dependencias: AngularJs y Bootstrap CSS, con temas opcionales de Bootswatch.

Disfrutar. Si yo soy el autor Me harté de todas las rejillas angulares que hay.

Answer 11

Adapt-Strap . Aquí está el fiddle .

Es extremadamente ligero y tiene alturas de fila dinámicas.

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>