### zhx.data.grid API
| props | type | description |
| --- | --- | --- |
| gridData | Object | grid组件数据对象 |
| scope | Object | grid所在控制器的作用域 |
| columnDefs | Array | grid列配置项 |
| checkModel | Boolean | 是否开启多选功能 |
| sorter | Function | 如果表格有排序功能,则该Func表示排序后的回调方法 |
| flexHeight | Number | 该数值表示一个冗余高度,grid的高度由页面高度减去此高度得到.设置该值后,grid会根据该值在页面上自适应高度 |
| height | Number | grid的高度,设置该高度后,grid不会自适应高度 |
| paginationConf | Object | grid的翻页配置项 |
___
### API description
> 以上API中有一些配置比较繁琐或需要详解的,这里列举出详细配置方法.
#### scope
***每一个控制器只允许定义一个grid组件且必须将当前控制器的作用于作为参数传入grid组件***。其目的是为了保证grid的唯一性,因为grid会在当前控制的作用域下传递一些属性和方法,以供控制器和grid组件进行交互操作。如果需要定义多个grid组件,那么可以配置多个控制器或者给grid创建一个新的作用域.
#### columnDefs
列对象是一组包含列对象的数组,我们约定了一些属性名称,这里会进行介绍:
| name | type | description |
| --- | --- | --- |
| name | String | 对应数据字段的名称 |
| displayName | String | 展示在页面中列的名称 |
| width | Number | 设置一个列宽,如果不设置该属性,则列会自动设置一个宽度 |
| enableSorting | Boolean | 该列是否可排序 |
| filter | String/Object | 该列配置的过滤器或者自定义过滤,filter的使用见下面详解 |
| visible | Boolean | 配置该列初始化时是否自动隐藏 |
***注意,如果你希望在组件中增加序号列,你应该在此处新增已经约定好的一个列对象,如下:***
```js
{ displayName : "序号", name: "zhxRowNumber" }
```
在列属性中,***filter***的使用完全依照AngularJS原生定义,可以传入一个String表示已经配置的过滤器的名称,其grid内部其实使用了AngularJS的`$filter`服务([具体可以参考官方文档](https://docs.angularjs.org/api/ng/filter/filter)),这里举两个例子分别对应String的方式和Object的方式:
__String Model:__
```js
filter : 'formatDate' //formatDate为自定义过滤器
```
__Object Model:__
```js
filter : {
name : 'date', //过滤器的名称
params : ['YYYY-MM-DD hh:mm:ss'] //过滤器接收的参数
}
```
#### flexHeight
就像上面提到的一样,***flexHeight***属性的目的是为了让grid组件自适应高度,因为我们无法确定组件在什么条件与情况下使用,而又希望开发者能减少对前端的开发工作,所以当需要配置一个自适应高度的grid时就可以设置该属性。
当配置该属性后,grid的高度相当于 `gridHeight = clientHeight - flexHeight`;
#### sorter
排序属性接收回调方法,该回调接收两个参数,如下表:
| name | description |
| --- | --- |
| order | 排序字段 |
| desc | 升序or降序 |
故,在这里,你可以将grid排序后的参数传递给后台查询参数对象或者做点其他事情; 比如:
```js
//你的查询参数
$scope.param = {
pageSize : 10,
pageNumber : 1,
orderBy : 'createTime',
descOrAsc : 'desc'
};
//grid配置参数
$scope.gridOptions = {
...
sorter : function(order,desc){
$scope.param.orderBy = order;
$scope.descOrAsc = desc;
}
...
}
```
以上是一个sorter的常见用法.
#### paginationConf
因为最初开发进度问题,grid并未开发一个翻页组件与之配合,所以选择了一个第三方翻页组件进行了嵌套,这里的配置项就是该组件的配置项,配置项如下:
| name | type | description |
| --- | --- | --- |
| currentPage | Number | 当前页号 |
| itemsPerPage | Number | 每页多少条数据 |
| perPageOptions | Array | 可以选择每页展示多少条数据,一般情况可以配置为`[10,20,50,100]`; |
| onChange | Function | 在触发翻页,修改每页多少条数据项等操作时执行该回调方法 |