angular-ui-grid开始使用angular-ui-grid


备注

本节概述了angular-ui-grid是什么,以及开发人员可能想要使用它的原因。

它还应该提到angular-ui-grid中的任何大型主题,并链接到相关主题。由于angular-ui-grid的文档是新的,您可能需要创建这些相关主题的初始版本。

创建一个简单的网格

第1步 - 在项目中包含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>
 

第2步 - 添加uiGrid模块作为您的应用程序的依赖项

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

第3步 - 网格数据

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

第4步 - 网格的HTML标记

使用ui-grid 指令并传入myData 的scope属性。

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

这应该呈现一个包含两列的网格 - 名字和姓氏。

它将第一项数据数组的键作为列名称,并将camelCase样式键转换为正确的单词:“firstName”到“First Name”。

关于Plnkr的例子

安装或设置

要求

支持的浏览器:

  • IE9 +
  • 火狐
  • Safari 5+
  • 歌剧
  • Android 4

AngularJS

  • 1.4.0+

入门

ui-grid github下载源文件并将它们包含在项目中,包括依赖项:

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

此时你应该能够使用ui-grid。