[转]ng-grid

本文转自：http://angular-ui.github.io/ui-grid/

Getting Started

Steps for getting started (example on right):

1. Add references to jQuery and AngularJS.
2. Add references to ngGrid's javascript and css files.
3. Where you declare your app module, add ngGrid: angular.module('myApp',['ngGrid']); If you use angular seed, it is in your app.js file.
4. In your html file within the controller where you plan to use ng-grid, add: <div class="gridStyle" ng-grid="gridOptions"></div> gridOptions is the variable we are going to bind to where we will initialize our grid options.
5. We are going to define a basic style for our grid in style.css:

   .gridStyle {
       border: 1px solid rgb(212,212,212);
       width: 400px;
       height: 300px
   }

6. In your javascript file within the controller where you plan to use ng-grid, lets add data that our grid will use:

$scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];

1. Now initialize your grid options under the same controller as data: $scope.gridOptions = { data: 'myData' };
2. Below is the outcome of the grid using the example on the right:

Drag a column header here and drop it to group by that column.

 

name

 

 

 

 

 

 

age

 

 

 

 

 

 

    

Choose Columns:

• name 0
• age 0

 

Moroni

 

50

 

Tiancum

 

43

 

Jacob

 

27

 

Nephi

 

29

 

Enos

 

34

Total Items: 5(Showing Items: 5)        

Selected Items: 0        

Page Size:            
250
500
1000
                    

 

 

/ 1

 

 

HTML:

1. <html ng-app="myApp">
2. <head lang="en">
3. <meta charset="utf-8">
4. <title>Getting Started With ngGrid Example</title>
5. <link rel="stylesheet" type="text/css" href="ng-grid.css" />
6. <link rel="stylesheet" type="text/css" href="style.css" />
7. <script type="text/javascript" src="jquery-1.8.2.js"></script>
8. <script type="text/javascript" src="angular.js"></script>
9. <script type="text/javascript" src="ng-grid-1.3.2.js"></script>
10. <script type="text/javascript" src="main.js"></script>
11. </head>
12. <body ng-controller="MyCtrl">
13. <div class="gridStyle" ng-grid="gridOptions">
14. </div>
15. </body>
16. </html>

CSS:

1. /*style.css*/
2. .gridStyle {
3. border: 1px solid rgb(212,212,212);
4. width: 400px;
5. height: 300px
6. }

Javascript:

1. // main.js
2. var app = angular.module('myApp', ['ngGrid']);
3. app.controller('MyCtrl', function($scope) {
4. $scope.myData = [{name: "Moroni", age: 50},
5. {name: "Tiancum", age: 43},
6. {name: "Jacob", age: 27},
7. {name: "Nephi", age: 29},
8. {name: "Enos", age: 34}];
9. $scope.gridOptions = { data: 'myData' };
10. });

View the plunker here.