开发者社区> 半指温柔乐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Angular中ui-grid的使用详解

简介: 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

 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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
angular18-补充cloak
angular18-补充cloak
5 0
(七) CSS Grid
(七) CSS Grid
22 0
Angular里的structural directive的一个例子
Angular里的structural directive的一个例子
9 0
UWP 使用Telerik Grid控件
原文:UWP 使用Telerik Grid控件 还是老规矩,看一下最终效果。   数据是从SQLite中读取,然后绑定到DataGrid中显示的。   先看一下XAML   开头引用—————— xmlns:grid="using:Telerik.
1122 0
AIX平台上11.2 Grid Infrastructure RDBMS进程的user是grid用户?
转自:http://www.askmaclean.com/archives/aix-11-2-grid-infrastructure-rdbms-owned-by-grid.
960 0
在网页中使用Applet的标签详解
 转自http://blog.csdn.net/snipps/article/details/5524868 上一遍文章简要的说明了什么是Java Plug-in,那么这一篇我们就来就applet的使用方法进行一个详细的讨论: 虽然w3c不推荐使用applet,但用applet在企业内部网(Intranet)中进行applet的部署是一个推荐的常用做法,那么就先来讨论一下标签的使用。
978 0
oracle 11g RAC Grid Infrastructure
grid infrastructure 软件介质下载: http://www.oracle.com/technetwork/database/database-technologies/clusterware/downloads/index-096607.
589 0
+关注
半指温柔乐
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
245
文章
205
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载