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数据中当字段的字段名称。

ng-grid入手_第1张图片 

 

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)
ng-grid入手_第2张图片

你可能感兴趣的:(grid)