Comenzando con angular-ui-grid

Instalación o configuración

Requisitos:

Navegadores compatibles:

  • IE9+
  • Cromo -Firefox
  • Safari 5+
  • Ópera -Android 4

AngularJS

  • 1.4.0+

Empezando

Descargue los archivos fuente de ui-grid github e inclúyalos en su proyecto, incluidas las dependencias:

<link rel="styleSheet" href="release/ui-grid.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="/release/ui-grid.min.js"></script>

En este punto, debería poder usar ui-grid.

Crear una cuadrícula simple

Paso 1: incluye uiGrid en tu proyecto

<link rel="styleSheet" href="release/ui-grid.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="/release/ui-grid.min.js"></script>

Paso 2: agregue el módulo uiGrid como una dependencia a su aplicación

var app = angular.module("myApp", ["ui-grid"]);

Paso 3 - Datos para la grilla

$scope.myData = [
    {
        "firstName": "John",
        "lastName": "Doe"
    },
    {
        "firstName": "Jane",
        "lastName": "Doe"
    }
];

Paso 4: marcado HTML para la cuadrícula

Use la directiva ui-grid y pase su propiedad de alcance de myData.

<div ng-controller="mainCtrl">
    <div id="grid1" ui-grid="{ data: myData }"></div>
</div>

Esto debería generar una cuadrícula con dos columnas: Nombre y Apellido.

Toma las claves del primer elemento de la matriz de datos como nombres de columna y convierte las claves de estilo camelCase en palabras adecuadas: “firstName” a “First Name”.

Ejemplo en Plnkr