本文转自：
http://angular-ui.github.io/ui-grid/
Getting Started
Steps for getting started (example on right):
-
-
Add references to
jQuery
and
AngularJS
. -
Add references to
ngGrid
‘s javascript and css files. -
Where you declare your app module, add ngGrid:
angular.module('myApp',['ngGrid']);
If you use
angular seed
, it is in your app.js file. -
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. -
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 } - In your javascript file within the controller where you plan to use ng-grid, lets add data that our grid will use:
-
Add references to
$scope.myData = [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}];
-
Now initialize your grid options under the same controller as data:
$scope.gridOptions = { data: 'myData' };
-
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
HTML:
-
<html
ng-app
=
“myApp”
>
-
<head
lang
=
“en”
>
-
<meta
charset
=
“utf-8”
>
-
<title>
Getting Started With ngGrid Example
</title>
-
<link
rel
=
“stylesheet”
type
=
“text/css”
href
=
“ng-grid.css”
/>
-
<link
rel
=
“stylesheet”
type
=
“text/css”
href
=
“style.css”
/>
-
<script
type
=
“text/javascript”
src
=
“jquery-1.8.2.js”
></script>
-
<script
type
=
“text/javascript”
src
=
“angular.js”
></script>
-
<script
type
=
“text/javascript”
src
=
“ng-grid-1.3.2.js”
></script>
-
<script
type
=
“text/javascript”
src
=
“main.js”
></script>
-
</head>
-
<body
ng-controller
=
“MyCtrl”
>
-
<div
class
=
“gridStyle”
ng-grid
=
“gridOptions”
>
-
</div>
-
</body>
-
</html>
CSS:
-
/*style.css*/
-
.
gridStyle
{
-
border
:
1px
solid rgb
(
212
,
212
,
212
);
-
width
:
400px
;
-
height
:
300px
-
}
Javascript:
-
// main.js
-
var
app
=
angular
.
module
(
‘myApp’
,
[
‘ngGrid’
]);
-
app
.
controller
(
‘MyCtrl’
,
function
(
$scope
)
{
-
$scope
.
myData
=
[{
name
:
“Moroni”
,
age
:
50
},
-
{
name
:
“Tiancum”
,
age
:
43
},
-
{
name
:
“Jacob”
,
age
:
27
},
-
{
name
:
“Nephi”
,
age
:
29
},
-
{
name
:
“Enos”
,
age
:
34
}];
-
$scope
.
gridOptions
=
{
data
:
‘myData’
};
-
});
View the plunker
here
.