首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Angular中ui-grid的使用详解

Angular中ui-grid的使用详解

作者头像
半指温柔乐
发布于 2018-09-11 01:25:40
发布于 2018-09-11 01:25:40
2.5K00
代码可运行
举报
文章被收录于专栏:前端知识分享前端知识分享
运行总次数:0
代码可运行

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
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 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
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-08-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
AngularJS 模块
你可以通过 AngularJS 的 angular.module 函数来创建模块:
陈不成i
2021/07/23
2.2K0
Angular学习-指令入门
1.指令的定义 从用户的角度来看,指令就是在应用的模板中使用的自定义HTML标签。指令可以很简单,也可以很复杂。AngularJS的HTML编译器会解析指令,增强模板的功能。也是组件化未来的发展趋势,目前HTML5中也加入了很多新标签,但是在实际业务开发过程中,有很多复用的模板,加上复用的交互效果,可以将其编写为AngularJS的指令,开发工程师可以在同一个项目,或多个项目中使用,实现开发一次,到处使用的目标。 2.内置指令和自定义指令 AngularJS内部指令都是ng-diretivename这种,以
八哥
2018/01/18
1.5K0
Angular学习-指令入门
【AngularJS】—— 2 初识AngularJs(续)
前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容。   本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括:   1 事件   2 模块   3 表单   4 数据验证   5 bootstrap CSS风格   6 include包含其他页面   7 应用程序   8 参考手册   首先看一下html的事件   关于html的事件,文中给出了三个例子,点击、隐藏、显示。使用方法基本相同:   先看一下点击的例子,点击按钮后,会触发ng-clic
用户1154259
2018/01/17
2.6K0
7-进军 angular1.x 表单和事件、模块
通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。
西南_张家辉
2021/02/02
2.7K0
AngularJS 控制器
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
陈不成i
2021/07/23
1.3K0
AngularJS浅谈-博客
AngularJS是啥?(一脸懵逼) 简介: AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款
双愚
2018/05/28
2.8K0
【AngularJS】 # AngularJS入门
ng-app 指令定义一个 AngularJS 应用程序。 若不声明,将直接显示表达式。
全栈程序员站长
2022/09/15
25K0
【AngularJS】 # AngularJS入门
AngularJS系列之表达式
这节介绍一下AngularJS中表示式的用法。使用表达式可以把数据绑定到HTML中去,使用起来非常方便。不过在使用之前得先引用AngularJS文件,这个文件可以去官网上面去下或者百度都可以找到。 下
林老师带你学编程
2018/01/03
1.1K0
Angularjs基础(三)
    AngularJS ng-model 指令     ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的值 ng-model指令     ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。       实例:         <div ng-app="myApp" ng-controller="myCtrl">             名字:<input ng-model="name">  
用户1197315
2018/01/19
3.5K0
使用wepack、typescript创建一个angularjs项目
angularjs是一个非常老的框架,如果你准备用angular启动新项目,完全可以使用angular而不是angularjs。
lilugirl
2020/03/19
1K0
「vue基础」新手快速入门篇(一)
自从Facebook2013年推出React框架以来,基于UI组件的前端框架越来越流行,主要得益于组件的重用性,数据状态的管理等特性。
前端达人
2019/07/17
3.2K1
「vue基础」新手快速入门篇(一)
Angularjs基础(六)
AngularJS HTML DOM     AngularJS为HTML DOM 元素的属性提供了绑定应用数据的指令。 ng-disabled指令     ng-disabled指令直接绑定应用数据到HTML的disabled属性。       实例:       <div ng-app="" ng-init="mySwitch=true">         <p>           <button ng-disableled="mySwitch">点我!</button
用户1197315
2018/01/19
3.3K0
AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除[通俗易懂]
我们来看其中一个标签,<edit>,这里呢,我们用ng-Model来绑定employee这个对象。
全栈程序员站长
2022/09/15
5K0
AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除[通俗易懂]
【一起来烧脑】一步学会AngularJS系统
AngularJS是一个JavaScript框架 一个用JavaScript编写的库
达达前端
2019/07/18
6K0
【一起来烧脑】一步学会AngularJS系统
angularJS学习之路(三)---控制器
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
wust小吴
2019/07/08
7480
Yeoman 生成的 Angular 脚手架详解
Yeoman 生成的 Angular 脚手架提供了 27 个任务配置和 3 个自定义任务。这三个自定义任务分贝为:
kl博主
2023/11/17
3470
Angular企业级开发(8)-控制器的作用域
scope概念 scope(作用域)是视图和控制器之间的桥梁,scope本身是一个对象,有方法和属性。scope可以应用在视图和控制器上。 scope简单示例 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Scope Demo</title> <script> document.write('<base href="' + document.locatio
八哥
2018/01/18
9470
Angular企业级开发(6)-使用Gulp构建和打包前端项目
1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中。使用gulp能完成以下任务: 压缩html、css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 2.gulp构建 前端构建流程: 开发->分析->测试->编译->发布部署 一段简单的基于gulp的项目构建代码,gulpfile.js内容如下所示: gulp.task('default',function(){ return gulp .src(
八哥
2018/01/18
2.2K0
Angular企业级开发(6)-使用Gulp构建和打包前端项目
Angularjs基础(九)
AngularJS 应用 应用程序讲解     实例:         <html ng-app="myNoteApp">           <head>             <meat charset="utf-8">             <script src="http://apps.bdimg.com/libs/angular.js/1.4.6angular.min.js"></script>           </head>           <body>
用户1197315
2018/01/22
1.3K0
第217天:深入理解Angular双向数据绑定的原理
双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理。angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成。
半指温柔乐
2018/09/11
4.1K0
第217天:深入理解Angular双向数据绑定的原理
相关推荐
AngularJS 模块
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档