AngularJS开发前端表格组件

AngularJS开发前端表格组件

1. 前言

在开发车载项目新版本时，由于采用了新的扁平化视觉，所以以前的框架渐渐不适用。于是在以AngularJs为基础的前端工程上开发表格组件。实现各种需求，比如排序，改变宽度，分页，刷新，搜索，勾选等等。

2. 视觉设计

以下是表格的视觉规范图：

1.线性列表：





2.复合列表：



3.展开式列表：



代码构建及思路分析

1) 将表格作为一个AngularJS的module，在主文件中引入：





使用方法为直接在元素上使用hikGrid指令，通过hikGrid传入相关参数：



2) 将表格拆分为header，content，footer。每个部分都作为一个指令：



3) 新建一个服务HikGridService用于处理表格的主要功能，同时将这个服务作为一个类返回。这样做是为了在多个表格同时存在一个页面的时候，防止不同表格可以独立执行方法，且分隔数据，防止冲突。：



该服务的所有实例方法：



4) 初始化header，content，footer的模板，将指令插入到模板中，同时在模板上加上AngularJS的双向数据绑定。

5) 在主指令hikGrid中初始化HikGridService的实例，执行实例的init方法。



6) 导入外部参数，覆盖默认参数，参数包括：

simpleData:false    //是否不使用异步获取数据时
url:’’             //请求数据url
params:’’          //请求参数
rowHeight:30       //每行高度
columns:[]     //列信息，包括field,displayName,render,width,sortable
width:0            //宽度
height:0           //高度
selectItems:[]     //已选择列，外部传入$scope变量
pagingOptions:{
current:1,  //当前页
pageSize:20,    //每页数量
pageSizes:[20,30,50]    //可选择的每页数量
},
sortOptions:{
field:’’,       //默认排序的列
order:’asc’ //默认排序方式
}
data:null           //表格数据
gridType:0      //表格类型，1普通表格，2 CheckBox表格，3展开式表格，4 Radio表格
showStripe:true //是否显示斑马纹
showHeader:true //是否显示头部
showFooter:true //是否显示底部
enablePaging:true,  //是否分页
enableColumnResize:true //是否允许表格改变宽度
enableSorting:true  //是否允许排序
multiSelection:true //是否是多选
rowSelection:true   //行点击是否是选择行为
expandTemplate:’’   //展示模板
expandTemplateUrl:’’    //展开模板的URL
expandHeight:30 //展开模板的高度
onProcessData:false //处理数据之前的回调
onError:false       //失败回调
onSuccess:false //成功回调
onRowClick:false    //行点击回调
checkEvent:false    //勾选事件回调
searchModel:’’    //搜索框的ngModel
autoResize:false //是否自适应，设置为true时，不需要设置宽高

7) 初始化样式，给表格加上宽高。

8) 异步获取后台分页数据，将获取到的数据复制给$scope中的变量，将header，content，footer的DOM连接并进行$compile编译。数据获取到之后对搜索值进行监控，并执行相应的成功或失败回调。

9) 勾选操作：在每行的勾选框上绑定勾选事件，当勾选触发时，执行数据选择和事件触发。



10) 头部的改变宽度的拖拉：通过改变头部列宽，向下广播该事件，触发每行的监听事件，使每行的该列宽度发生相同变化。



11) 增加斑马纹的空白列：



4. 完成效果图

线性列表：

展开式列表：

特殊底部的列表：

单选框：