angular.js学习－ng-grid
Posted 倔强的妄想症
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular.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数据绑定）
<!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"></script> <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script> <!-- ng-grid --> <link rel="stylesheet" href="http://cdn.bootcss.com/ng-grid/2.0.11/ng-grid.min.css"/> <script src="http://cdn.bootcss.com/ng-grid/2.0.11/ng-grid.min.js"></script> <!--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文件
.gridStyle { height:300px; }
ViewCode(ng-index.css)
?HTML页面中表格为div标签，数据在AngularJS中数据绑定到页面中，所以需要指定div标签的高度。
6.编写ng-index.js文件
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数据中当字段的字段名称。
7.设置表头显示名称（name→姓名 age→年龄）。
在表格的配置属性中添加columnDefs的配置，详细参照以下代码。
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)
以上是关于angular.js学习－ng-grid的主要内容，如果未能解决你的问题，请参考以下文章
react.js,angular.js,vue.js学习哪个好？
react.js，angular.js，vue.js学习哪个好