Angular中ui-grid的使用详解

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

 <!doctype html>

 <html ng-app="app">

   <head>

     <link rel="stylesheet" href="../lib/ui-grid.css" type="text/css">

     <link rel="stylesheet" href="main.css" type="text/css">

     <script src="../lib/angular.js"></script>

     <script src="../lib/angular-touch.js"></script>

     <script src="../lib/angular-animate.js"></script>

     <script src="../lib/csv.js"></script>

     <script src="../lib/pdfmake.js"></script>

     <script src="../lib/vfs_fonts.js"></script>

     <script src="../lib/ui-grid.js"></script>

     <script src="../lib/ui-grid.eot"></script>

     <script src="../lib/ui-grid.svg"></script>

     <script src="../lib/ui-grid.ttf"></script>

     <script src="../lib/ui-grid.woff"></script>

   </head>

   <body>

     <div ng-controller="MainCtrl">

       <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>

     </div>

     <script src="app.js"></script>

   </body>

 </html>

2、js

 var app = angular.module('app', ['ngTouch', 'ui.grid']);

 app.controller('MainCtrl', ['$scope', function ($scope) {

   $scope.myData = [

     {

         "firstName": "Cox",

         "lastName": "Carney",

         "company": "Enormo",

         "employed": true

     },

     {

         "firstName": "Lorraine",

         "lastName": "Wise",

         "company": "Comveyer",

         "employed": false

     },

     {

         "firstName": "Nancy",

         "lastName": "Waters",

         "company": "Fuelton",

         "employed": false

     },

       {

           "firstName": "Cox",

           "lastName": "Carney",

           "company": "Enormo",

           "employed": true

       },

       {

           "firstName": "Lorraine",

           "lastName": "Wise",

           "company": "Comveyer",

           "employed": false

       },

       {

           "firstName": "Nancy",

           "lastName": "Waters",

           "company": "Fuelton",

           "employed": false

       },{

           "firstName": "Cox",

           "lastName": "Carney",

           "company": "Enormo",

           "employed": true

       },

       {

           "firstName": "Lorraine",

           "lastName": "Wise",

           "company": "Comveyer",

           "employed": false

       },

       {

           "firstName": "Nancy",

           "lastName": "Waters",

           "company": "Fuelton",

           "employed": false

       }

 ];

 }]);

运行效果：

更多使用方法详见：https://github.com/lela520/Angular-ui-grid