ui-grid入门教程（一）

最近看UI-bootstrap资料，发现一款非常优秀的AngularJS插件ui-grid。由于是英文资料，下面根据我的理解和看到的英文资料写一个小的教程。<p>

介绍

首先ui-grid是AngularUI库中的一部分，主要功能实现数据表格。主要特点是纯AngularJS，没有使用jquery；在一万行以上的大大数据表格表现性能好；只需加载需要的插件。<p>
<ul>
<li>可配置性：可定制模板；可通过CSS更改外观；Drop-in插件</li>
<li>标注功能：排序；过滤；用户交互；端对端测试</li>
<li>高级特性：虚拟化；列固定；分组；直接编辑；扩展行；国际化</li>
<ul>
大家可以去官网看看例子

第一步

（1）引入css文件和javascript文件</br>

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

（2）解决ui-grid依赖问题</br>

var app=angular.module('app',['uigrid'])

（3）把主css文件加入表格样式</br>

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

（4）在$scope上添加文档数据</br>

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

（5）在指令中使用一个data的json数据传递数据</br>

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