官网地址: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>
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 })
main.css
1 .grid { 2 width: 500px; 3 height: 150px; 4 } 5 6 .ui-grid-header-cell-wrapper{ 7 height: 30px; 8 }