@farris/ui-list-view v0.1.9

ListView

This library was generated with 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.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

扩展结构

默认分 上 中 下 结构 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()事件