简介

UI-Grid 3.0 (formerly ng-grid), is a 100% angular grid written with no dependencies other than AngularJS. It is designed around a core grid module and features are layered on as angular modules and directives. This keeps the core small and focused while executing very complex features only when you need them.

In the core module, you get:

Virtualized rows and columns - only the rows and columns visible in the viewport (+ some extra margin) are actually rendered
Bind cells to complex properties and functions
Column sorting with three states: Asc, Desc, None
Column filtering
Ability to change header and cell contents with custom templates
i18nService allows label translations

In this example we create the most basic grid possible.

步骤:

在script 和 css 引入uiGrid

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

在app引入依赖ui.grid

var app = angular.module('app', ['ui.grid']);

设置css样式

.myGrid {
    width: 500px;
    height: 250px;
  }

添加数据数组到$scope属性里

$scope.myData = [
        {
            "firstName": "Cox",
            "lastName": "Carney"...

使用 ui-grid 指令并设置数据值 $scope.myData.

<div ng-controller="MainCtrl">
  <div ui-grid="{ data: myData }" class="myGrid"></div>
</div>

示例

index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="/release/ui-grid.js"></script>
    <script src="/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 500px;
  height: 250px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function ($scope) {

  $scope.myData = [
    {
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
    },
    {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
    },
    {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    }
];
}]);

测试

var GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js');
var grid1 = new GridObjectTest('grid1');
describe('101 tutorial', function() {
  it('grid should have three visible rows', function () {
    grid1.expectRowCount( 3 );
  });

  it('header values should be as expected', function () {
    grid1.expectHeaderColumns( ['First Name', 'Last Name', 'Company', 'Employed'] );
  });

  it('first row cell values should be as expected', function () {
    // checking individual cells usually gives a better stack trace when there are errors
    grid1.expectCellValueMatch( 0, 0, 'Cox' );
    grid1.expectCellValueMatch( 0, 1, 'Carney' );
    grid1.expectCellValueMatch( 0, 2, 'Enormo' );
    grid1.expectCellValueMatch( 0, 3, 'true' );
  });

  it('next two row cell values should be as expected', function () {
    // checking in bulk is convenient to write, but can be less informative with errors
    grid1.expectRowValuesMatch( 1, [ 'Lorraine', 'Wise', 'Comveyer', 'false' ] );
    grid1.expectRowValuesMatch( 2, [ 'Nancy', 'Waters', 'Fuelton', 'false' ] );
  });
});