[转]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:
 
name
 
 
age
 
 
Moroni
 
50
 
Tiancum
 
43
 
Jacob
 
27
 
Nephi
 
29
 
Enos
 
34

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.

 

你可能感兴趣的:([转]ng-grid)