Introdução ao angular-ui-grid

Instalação ou configuração

Requisitos:

Navegadores suportados:

  • IE9+
  • Cromada
  • Raposa de fogo
  • Safári 5+
  • Ópera -Android4

AngularJS

  • 1.4.0+

Começando

Baixe os arquivos de origem do ui-grid github e inclua-os em seu projeto, incluindo as dependências:

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

Neste ponto, você deve ser capaz de usar ui-grid.

Criando uma grade simples

Etapa 1 - Incluir o uiGrid em seu projeto

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

Etapa 2 - Adicione o módulo uiGrid como uma dependência ao seu aplicativo

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

Etapa 3 - Dados para a grade

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

Etapa 4 - Marcação HTML para a grade

Use a diretiva ui-grid e passe sua propriedade de escopo de myData.

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

Isso deve renderizar uma grade com duas colunas - Nome e Sobrenome.

Ele pega as chaves do primeiro item da matriz de dados como nomes de coluna e converte as chaves de estilo camelCase em palavras apropriadas: “firstName” para “First Name”.

Exemplo em Plnkr