# ListView

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.

## Code scaffolding

Run `ng generate component component-name --project list-view` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project list-view`.
> Note: Don't forget to add `--project list-view` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build list-view` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build list-view`, go to the dist folder `cd dist/list-view` and run `npm publish`.

## Running unit tests

Run `ng test list-view` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).


## 扩展结构
默认分 上 中 下 结构
1. `<ng-template listViewHeader>` 头部区域
2. `<ng-template listViewItemTemplate>` list主体区域
3. `<ng-template listViewFooter>` 底部区域

## 属性
1. data  列表数据 数组
2. listidName 唯一标识字段 默认是'id'

3. showEmpty 数据为空展示 默认为true
4. emptyTemplate 数据为空 自定义空模板 
    `<ng-template listViewEmpty>`
5. multipleSelect 是否支持多选 默认false

6. sortKey 默认排序字段
7. supportPaging 是否支持分页 默认false
8. pageSize 每一页显示数据个数
9. pageIndex 当前某一页
10. pageList 每一页显示数据条数 默认[10,20,30,50]
11. total 当前数据条数
12. pageTemplate 自定义分页模板
    `<ng-template listViewPaging>`
13. fill 是否撑满父级节点 默认false
14. cardLayout 是否横向排列 默认false
15. listClassName 列表类名自定义

## data数据一些特殊标识
1. unClick 不可点击
2. selectDisable 当前项不可被选择
3. checked 当前项是否默认被选中

## 事件
1. listClick 选中某一行
    data.data 当前点击行 对象数组
    data.index 当前操作行的索引
2. checkChange 支持多选情况下 状态变化
    data.listdata 当前变化的list对象
    data.index 当前变化对象的索引
3. pageChanged 切换分页
    pageInfo：{ pageIndex, pageSize }
4. pageSizeChanged 修改每一页展示数据条数
    pageInfo: { pageIndex ,pageSize }

## 方法
1. 获得当前展示数据 getCurrentData()
2. 获得当前选中数据 getSelectData()
3. 搜索 searchList() 参数为搜索字段
4. 排序 sort() 参数 排序key 排序方式 默认升序

## 注意点
1. 用到该组件地方 fill为true 该组件父节点需要有高度 并且带有list-view-demo-fill 类名
2. 列表中需要触发点击事件的，需执行 event.stopPropagation()事件