Angular中ui-grid的使用詳解

時間 2019-12-05

原文原文鏈接

Angular中ui-grid的使用css

　　在項目開發的過程當中，產品經理每每會提出各類需求，以提升用戶體驗。最近，項目中用到的表格特別多，並且表格的列數和行數也超多。爲了讓用戶瀏覽更爽，產品經理提出，當表格上下滾動時，表頭固定，左右滾動時，表頭隨動。就這樣一個看似十分easy的需求，我研究了一週時間，終於給實現了。html

　　剛開始我研究bootstrap-table，這個插件能夠實現表頭固定的效果。因爲咱們的項目用的是angular 開發的，在項目中引入bootstrap-table和其它的文件衝突了，因此就放棄了。隨後我又發現了angular-ui-grid，這個插件是angular框架封裝好的，依賴angular，這個插件功能也是比較多的，表頭固定，自定義排序，表格行編輯，樹形結構等多種用法。git

　　下面我來講一下angular-ui-grid的基本用法：github

1、下載文件

　　項目中用的angular版本是angular V1.2.30因此，我就以這個版本爲例npm

　　npm install angular@1.2.30bootstrap

　　npm install angular-touch@1.2.30app

　　npm install angular-animate@1.2.30框架

　　npm install angular-ui-grid@3.1.0svg

　　注：angular、angular-touch、angular-animate三個文件版本需保持一致，angular-ui-grid要根據angular的版本進行肯定，angular-ui-grid依賴的angular版本<=項目中的angular版本ui

2、引入文件

　　注意引入文件的前後順序

　　文件依賴關係

　　　　Angular-touch --> angular

　　　　Angular-animate --> angular

　　　　ui-grid --> angular,angular-touch,angular-animate,csv,pdfmake,vfs_fonts

　　模塊依賴

3、基本使用

　　一、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>

二、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 }]);