AngularJSangular.js学习-ng-grid

ng-grid是基于AngularJS和JQuery的富表格控件,由AngularUI
Team领衔开发,到目前为止已发2354不善Commit,1076个Fork。 

AngualrUI:http://angular-ui.github.io/

ng-grid: http://angular-ui.github.io/ng-grid/

ng-grid(code on Github): https://github.com/angular-ui/ng-grid

 

动手(官网参照)

1.开立HTML页面和和的相互呼应之JS,CSS文件

    ng-index.html

    js/ng-index.js

    css/ng-index.css

 

2.当ng-index.html中长ng-grid所负之JQuery和AngularJS框架。

下载到地头:  

JQuery:http://code.jquery.com/

Angularjs:https://angularjs.org/

在线(进入后择符合版本):

JQuery:http://www.bootcdn.cn/jquery/

Angularjs:http://www.bootcdn.cn/angular.js/

 

3.引入ng-grid的JS和CSS文件

下载到地方:  http://angular-ui.github.io/ng-grid/

在线:http://www.bootcdn.cn/ng-grid/

 

4.当ng-index.html中补充加如下标签。

<div class=”gridStyle” ng-grid=”gridOptions” />

・gridStyle: 表格的Style控制,写入ng-index.css中

・gridOptions:
ng-index.js中表格所于的Controller的$scope调用赋值(AngularJS数据绑定)

 

AngularJS 1

<!DOCTYPE html> <html> <head> <meta
charset=”UTF-8″> <title>ng-index</title> <!– Basic
References: JQuery/AngualrJS –> <script type=”text/javascript”
src=”http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
<script type=”text/javascript”
src=”http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"&gt;&lt;/script&gt;
<!– ng-grid –> <link rel=”stylesheet”
href=”http://cdn.bootcss.com/ng-grid/2.0.11/ng-grid.min.css"/&gt;
<script
src=”http://cdn.bootcss.com/ng-grid/2.0.11/ng-grid.min.js"&gt;&lt;/script&gt;
<!–local: ng-index.html –> <script
src=”js/ng-index.js”></script> <link rel=”stylesheet”
href=”css/ng-index.css”/> </head> <body
ng-app=”indexApp”> <div id=”container”
ng-controller=”gridCtrl”> <div class=”gridStyle”
ng-grid=”gridOptions” /> </div> </body> </html>

ViewCode(ng-index.html)

 

5.编写ng-index.css文件

AngularJS 2

.gridStyle { height:300px; }

ViewCode(ng-index.css)

 ・HTML页面中表格为div标签,数据在AngularJS中数量绑定到页面中,所以要指定div标签的冲天。

 

6.编写ng-index.js文件

AngularJS 3

var indexApp = angular.module(‘indexApp’, [‘ngGrid’]);
indexApp.controller(‘gridCtrl’, function($scope) { $scope.members =
[{name: “Moroni”, age: 50}, {name: “Tiancum”, age: 43}, {name: “Jacob”,
age: 27}, {name: “Nephi”, age: 29}, {name: “Enos”, age: 34}];
$scope.gridOptions = { data: ‘members’ }; });

ViewCode(ng-index.js)

・官网给的例证在用 [‘ui.grid’]大凡不对的,要改变化[‘ngGrid’],不然Angular初始化不成功。

・将要显示的JSON数据赋值给页面控件的data属性,即可绑定到界面显示。

・表头名称默认显示JSON数据被当字段的字段名称。

AngularJS 4

 

7.安装表头显示名称(name→姓名 age→年龄)。

当表的布置属性被补充加columnDefs的布置,详细参照以下代码。

AngularJS 5

var indexApp = angular.module(‘indexApp’, [‘ngGrid’]);
indexApp.controller(‘gridCtrl’, function($scope) { $scope.members =
[{name: “Moroni”, age: 50}, {name: “Tiancum”, age: 43}, {name: “Jacob”,
age: 27}, {name: “Nephi”, age: 29}, {name: “Enos”, age: 34}];
$scope.gridOptions = { data: ‘members’, columnDefs: [{field: ‘name’,
displayName: ‘姓名’}, {field:’age’, displayName:’年龄’}] }; });

ViewCode(ng-index.js)

AngularJS 6

相关文章