Angular中ui-grid的使用
在項目開發的過程中，產品經理往往會提出各種需求，以提高用戶體驗。最近，項目中用到的表格特別多，而且表格的列數和行數也超多。為了讓用戶瀏覽更爽，產品經理提出，當表格上下滾動時，表頭固定，左右滾動時，表頭隨動。就這樣一個看似十分easy的需求，我研究了一周時間，終於給實現了。
剛開始我研究bootstrap-table，這個插件可以實現表頭固定的效果。由於我們的項目用的是angular 開發的，在項目中引入bootstrap-table和其它的文件沖突了，所以就放棄了。 隨后我又發現了angular-ui-grid，這個插件是angular框架封裝好的，依賴angular，這個插件功能也是比較多的，表頭固定，自定義排序，表格行編輯，樹形結構等多種用法。
下面我來說一下angular-ui-grid的基本用法：
一、下載文件
項目中用的angular版本是angular V1.2.30所以，我就以這個版本為例
npm install angular@1.2.30
npm install angular-touch@1.2.30
npm install angular-animate@1.2.30
npm install angular-ui-grid@3.1.0
注：angular、angular-touch、angular-animate三個文件版本需保持一致，angular-ui-grid要根據angular的版本進行確定，angular-ui-grid依賴的angular版本<=項目中的angular版本
二、引入文件
注意引入文件的先后順序
文件依賴關系
Angular-touch --> angular
Angular-animate --> angular
ui-grid --> angular,angular-touch,angular-animate,csv,pdfmake,vfs_fonts
模塊依賴
三、基本使用
1、HTML
1 <!doctype html> 2 <html ng-app="app"> 3 <head> 4 <link rel="stylesheet" href="../lib/ui-grid.css" type="text/css"> 5 <link rel="stylesheet" href="main.css" type="text/css"> 6 <script src="../lib/angular.js"></script> 7 <script src="../lib/angular-touch.js"></script> 8 <script src="../lib/angular-animate.js"></script> 9 <script src="../lib/csv.js"></script> 10 <script src="../lib/pdfmake.js"></script> 11 <script src="../lib/vfs_fonts.js"></script> 12 <script src="../lib/ui-grid.js"></script> 13 <script src="../lib/ui-grid.eot"></script> 14 <script src="../lib/ui-grid.svg"></script> 15 <script src="../lib/ui-grid.ttf"></script> 16 <script src="../lib/ui-grid.woff"></script> 17 18 </head> 19 <body> 20 21 <div ng-controller="MainCtrl"> 22 <div id="grid1" ui-grid="{ data: myData }" class="grid"></div> 23 </div> 24 25 26 <script src="app.js"></script> 27 </body> 28 </html>
2、js
1 var app = angular.module('app', ['ngTouch', 'ui.grid']); 2 3 app.controller('MainCtrl', ['$scope', function ($scope) { 4 5 $scope.myData = [ 6 { 7 "firstName": "Cox", 8 "lastName": "Carney", 9 "company": "Enormo", 10 "employed": true 11 }, 12 { 13 "firstName": "Lorraine", 14 "lastName": "Wise", 15 "company": "Comveyer", 16 "employed": false 17 }, 18 { 19 "firstName": "Nancy", 20 "lastName": "Waters", 21 "company": "Fuelton", 22 "employed": false 23 }, 24 { 25 "firstName": "Cox", 26 "lastName": "Carney", 27 "company": "Enormo", 28 "employed": true 29 }, 30 { 31 "firstName": "Lorraine", 32 "lastName": "Wise", 33 "company": "Comveyer", 34 "employed": false 35 }, 36 { 37 "firstName": "Nancy", 38 "lastName": "Waters", 39 "company": "Fuelton", 40 "employed": false 41 },{ 42 "firstName": "Cox", 43 "lastName": "Carney", 44 "company": "Enormo", 45 "employed": true 46 }, 47 { 48 "firstName": "Lorraine", 49 "lastName": "Wise", 50 "company": "Comveyer", 51 "employed": false 52 }, 53 { 54 "firstName": "Nancy", 55 "lastName": "Waters", 56 "company": "Fuelton", 57 "employed": false 58 } 59 ]; 60 }]);
運行效果：
更多使用方法詳見：https://github.com/lela520/Angular-ui-grid