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的更多相关文章

  1. 适合我胃口的angular.js学习资料

    断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...

  2. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  3. Angular JS 学习之简介

    1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...

  4. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

  5. Angular JS 学习笔记（二）

    1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...

  6. Angular.js学习笔记（三）

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

  7. angular.js学习的第一天

    第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...

  8. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  9. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

随机推荐

  1. Linux top命令简解

    简介: top 命令是最流行的性能监视工具之一,它是一个优秀的交互式工具,用于监视性能.它提供系统整体性能,但报告进程信息才是 top 命令的长处. top 界面分为两个部份,光标上面部份显示关于系统 ...

  2. CLR寄宿和应用程序域

    Win实际上将CLR作为一个COM服务器实现在一个DLL内,即为CLR定义了标准的COM接口,并为该接口和COM服务器分配一GUID,安装FrameWork时表示CLR的COM服务器被注册到注册表内. ...

  3. js数组及数组对象的遍历

    一 数组遍历 方法一:for循环 方法二:forEach遍历 forEach遍历数组 性能低于for循环,且不可使用break中断循环,也不能使用return返回外层函数 arr.forEach(fu ...

  4. iOS-Core-Animation-Advanced-Techniques/12-性能调优/性能调优.md

    性能调优 代码应该运行的尽量快,而不是更快 - 理查德 在第一和第二部分,我们了解了Core Animation提供的关于绘制和动画的一些特性.Core Animation功能和性能都非常强大,但如果 ...

  5. 路飞学城Python-Day37(practise)

    #1.自行创建测试数据 create database homework; use homework; # 年级表->老师表->课程表->班级表->学生表->成绩表-&g ...

  6. 路飞学城Python-Day30

    11-僵尸进程与孤儿进程 现象:运行程序会产生父进程,在父进程中开子进程,这两个进程公用一个打印终端,运行的时候就只运行父进程,父进程虽然自己结束了,但是要等子进程结束完才会结束. 父进程可以开多个子 ...

  7. 算法27-----第N个数字

    1.题目: 在无限的整数序列 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ...中找到第 n 个数字. 注意: n 是正数且在32为整形范围内 ( n < 231). ...

  8. xgboost学习

    1.原理 https://www.cnblogs.com/zhouxiaohui888/p/6008368.html 2.实战 xgboost中比较重要的参数介绍: (1)学习率:learning r ...

  9. C语言基本语法——结构体、联合和枚举

    一.结构体 1.什么是结构体 2.结构体语法格式 3.结构体所占内存空间 4.结构体成员赋值 二.联合 1.什么是联合 2.联合语法格式 三.枚举 1.什么是枚举 2.枚举语法格式 一.结构体 1.什 ...

  10. 启用Maven的代理访问

    1. Maven配置文件 找到文件 {M2_HOME}/conf/settings.xml, 并把你的代理服务器信息配置写入.注:{M2_HOME} => D:\software\yiibai. ...