ng-grid入手

2024-04-27 14:13:27

字体：大中小

来源：转载

供稿：网友

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中添加如下标签。

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