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

 

相关文章
|
29天前
|
XML 开发框架 前端开发
浅谈 Angular 和 UI5 这两种前端框架里控件 ID 的设计思路差异
浅谈 Angular 和 UI5 这两种前端框架里控件 ID 的设计思路差异
23 0
|
8月前
|
缓存 Java C++
SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
Spartacus 在技术和架构( library 发布方式 vs 模板发布方式,headless vs embedded,Angular vs JSP 技术栈)等各方面,都是一种全面的从 Accelerator 的完整范式转变。因此,对于 Commerce Cloud 已经使用 Accelerator 的客户来说,并没有直接的方法可以从基于 Accelerator 的 Storefront 迁移到使用 Spartacus library 的店面。
50 0
|
容器
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
120 0
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
|
API 网络架构
如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称
如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称
如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称
|
测试技术
Angular单元测试里使用fixture.debugElement测试UI界面元素
Angular单元测试里使用fixture.debugElement测试UI界面元素
129 0
Angular单元测试里使用fixture.debugElement测试UI界面元素
如何通过调试的方式搞清楚Angular createEmbeddedView具体创建的UI元素是什么
如何通过调试的方式搞清楚Angular createEmbeddedView具体创建的UI元素是什么
108 0
如何通过调试的方式搞清楚Angular createEmbeddedView具体创建的UI元素是什么
|
测试技术
Angular Component UI单元测试的隔离策略
Angular Component UI单元测试的隔离策略
104 0
Angular Component UI单元测试的隔离策略
一个简单的Angular search UI实现
一个简单的Angular search UI实现
103 0
一个简单的Angular search UI实现
|
JavaScript 前端开发
Angular的scope. apply和CRM WebClient UI的modify方法
Angular的scope. apply和CRM WebClient UI的modify方法
111 0
Angular的scope. apply和CRM WebClient UI的modify方法
|
Web App开发
如何通过调试的方式搞清楚Angular createEmbeddedView具体创建的UI元素是什么
如何通过调试的方式搞清楚Angular createEmbeddedView具体创建的UI元素是什么
如何通过调试的方式搞清楚Angular createEmbeddedView具体创建的UI元素是什么