Angular中ui-grid的使用详解

最新推荐文章于 2024-08-10 07:08:05 发布

lelara

最新推荐文章于 2024-08-10 07:08:05 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/lelara/article/details/86140203

版权

本文详细介绍了在Angular项目中如何使用ui-grid组件实现表头固定的复杂需求。作者首先介绍了放弃bootstrap-table的原因，然后重点讲解了angular-ui-grid的安装、依赖以及基本使用方法，包括HTML和JS配置。通过此教程，读者可以了解如何在Angular中利用ui-grid创建具有固定表头的高效用户体验的表格。

摘要由CSDN通过智能技术生成

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&