AngularJS ui-grid 最简使用方法

官网地址：http://ui-grid.info/docs/#!/tutorial/Tutorial:%20101%20Intro%20to%20UI-Grid

效果

获取ui-grid:

npm install angular-ui-grid

index.html

 1 <html ng-app="myApp">  
 2   <head>
 3       <meta charset="utf-8">
 4       <title>ui-Grid Example01</title>  
 5 
 6       <script type="text/javascript" src="node_modules/angular/angular.js"></script>
 7       <script type="text/javascript" src="framework/jquery-3.2.1.js"></script>
 8       <script type="text/javascript" src="node_modules/angular-ui-grid/ui-grid.min.js"></script>
 9       <script type="text/javascript" src="framework/angular-1.5.8/angular-touch.js"></script>
10 
11       <link rel="stylesheet" type="text/css" href="node_modules/angular-ui-grid/ui-grid.min.css" />
12 
13       <script src="app.js"></script>
14       <link rel="stylesheet" type="text/css" href="main.css">
15 
16   </head>
17   <body ng-controller="MyCtrl">
18       <div  ui-grid="gridOptions" class="grid" id="grid1"ui-grid-pagination >
19       </div>
20   </body>
21 </html>

index.html

app.js

 1 var app = angular.module('myApp', ['ui.grid','ngTouch']);
 2 app.controller('MyCtrl', function($scope){
 3 
 4   $scope.data = [
 5     {
 6         firstName: "Cox",
 7         lastName: "Carney",
 8         company: "Enormo",
 9         employed: true
10     },
11     {
12         firstName: "Lorraine",
13         lastName: "Wise",
14         company: "Comveyer",
15         employed: false
16     },
17     {
18         firstName: "Nancy",
19         lastName: "Waters",
20         company: "Fuelton",
21         employed: false
22     }
23   ];
24 
25   $scope.gridOptions = {
26     data: $scope.data,
27     columnDefs: [
28       {field: 'firstName'},
29       {field: 'lastName'},
30       {field: 'company'},
31     ]
32   }
33 
34 
35 })

app.js

main.css

1 .grid {
2   width: 500px;
3   height: 150px;
4 }
5 
6 .ui-grid-header-cell-wrapper{
7   height: 30px;
8 }

main.css

AngularJS ui-grid 最简使用方法

猜你喜欢