feat(abc: simple-table): new simple-table component plans!

现有的 nz-table 已经足够满足绝大多数需求，然而在中台系统中绝大多数在使用过程中只是需要一个简单的数据表格展示，但现有的使用规则很繁琐：

• HTML模板存在大量 td、th
• 表格数据来源于 HTTP
• 繁琐的选择框
• 简单的排序、过滤动作

而 simple-table 是在 nz-table 向上构建更高价的组件，同时以更简洁的方式解决上述问题。

功能列表：

• 后端 HTTP 优先
• Column 配置
• 简化选择框处理
• 简化单选框处理
• 自定义渲染列
• 简化模态框处理
• 简化按钮组处理
• 排序可配置
• 过滤可配置
• 切换分页时自动返回表格顶部
• 允许设置分页左、中、右对齐
• 支持对所有表格统一配置默认项
• 简化页码、每页数量变化时回调处理，例如只有一个 change 回调
• 代码片断 cipchk.ng-zorro-vscode

假定以下是 simple-table 的构建代码：

基础

@Component({
    template: `<simple-table [data]="users"></simple-table>`
})
export class DemoComponent {
    users = this._http.get('/users');
    constructor(private _http: _HttpClient) {}
}

指定列描述

@Component({
    template: `
    <simple-table [data]="users" [columns]="columns">
         <ng-template #action let-item><a (click)="edit(item)">Edit</a></ng-template>
    </simple-table>
    `
})
export class DemoComponent {
    users = this._http.get('/users');
    columns: SimpleColumn[] = [
        { title: '编号', index: 'id', type: 'checkbox' },
        { title: '姓名', index: 'name' },
        { title: '年龄', index: 'age', sort: true },
        { title: '状态', index: 'status', format: (cell: any, row: any) => `s: ${val}` }
    ];
    constructor(private _http: _HttpClient) {}
}

计划API：

参数	说明	类型	默认值
data	自定义数据源，且 data > url	any[], Observable<any[]>	-
url	后端URL地址	string	-
extraParams	额外请求参数，默认自动附加 pi、ps 至URL { status: ‘new’ } // url?pi=1&ps=10&status=new { status: ‘new’, time: { begin: 2017 } } // url?pi=1&ps=10&status=new&time.begin=2017	any	-
reqMehtod	请求方法	string	GET
reqHeader	请求 header	any	-
reqBody	请求 body	any	-
reqReName	重命名请求参数 pi、ps 例如：{ pi: 'Page' } pi 会被替换成 Page	Object	-
resReName	重命名返回参数 total、list 例如：{ total: 'Total' } Total 会被当作 total	Object	-
columns	列描述	SimpleTableColumn[]	-
action	操作栏	TemplateRef<any>	-
ps	每页数量，当设置为 0 表示不分页，默认：10	number	10
bordered	是否显示边框	boolean	false
size	table大小	small,middle,default	default
showSizeChanger	是否显示pagination中改变页数	boolean	false
pageSizeSelectorValues	pagination中每页显示条目数下拉框值	number[]	[10, 20, 30, 40, 50]
showQuickJumper	是否显示pagination中快速跳转	boolean	false
showTotal	是否显示总数据量	boolean	false
isPageIndexReset	数据变更后是否保留在数据变更前的页码	boolean	true
toTopInChange	切换分页时返回顶部	boolean	true
pagePlacement	分页方向	left,center,right	right
sortReName	重命名排序值，columns 的重命名高于属性	{ ascend?: string, descend?: string }	-
change	页码、每页数量变化时回调	EventEmitter	-
checkboxChange	checkbox变化时回调，参数为当前所选清单	EventEmitter	-
radioChange	radio变化时回调，参数为当前所选	EventEmitter	-
sortChange	排序回调	EventEmitter	-

SimpleTableColumn

参数	说明	类型	默认值
type?	checkbox 多选 radio 单选 img 图像且居中 currency 货币且居右 date 日期格式且居中 yn 将boolean类型徽章化 document	string	-
title	表格标题	string	-
index	列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法	string, string[]	-
width?	列宽，例如：10%、100px	string	-
format?	格式化列值	function(cell: any, row: any)	-
sort?	排序的受控属性，asc、desc	string	-
sorter?	排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)	Function	-
sortKey?	排序的后端相对应的KEY，默认使用 index 属性	string	-
sortReName?	排序的后端相对应的VALUE	{ ascend?: string, descend?: string }	-
filters?	表头的筛选菜单项，至少一项以上才会生效	SimpleTableFilter[]	-
filtered?	标识数据是否经过过滤，筛选图标会高亮	boolean	-
filterIcon?	自定义 fiter 图标	string	anticon anticon-filter
filterMultiple?	是否多选	boolean	true
filterKey?	过滤的后端相对应的KEY，默认使用 index 属性	string	-
filterReName?	过滤的后端相对应的VALUE 默认当 filterMultiple 时以英文逗号拼接的字符串 参数为 filters 原样数组 返回为 Object 对象	(list: SimpleTableFilter[]) => Object	-
selections?	选择功能配置	SimpleTableSelection[]	-
className?	列 class 属性值，例如： text-center 居中 text-right 居右 text-danger 异常色	string	-
colSpan?	合并列	number	-
dateFormat?	日期格式，type=date 有效	string	YYYY-MM-DD HH:mm
ynYes?	徽章 true 时文本，type=yn 有效	string	是
ynNo?	徽章 false 时文本，type=yn 有效	string	否

SimpleTableSelection

参数	说明	类型	默认值
text	选择项显示的文字	string	-
select	选择项点击回调	Function	-

SimpleTableFilter

参数	说明	类型	默认值
text	文本	string	-
value	值	any	-
checked?	是否选中	boolean	-

SimpleTableConfig

调整统一默认参数值：

// 调整所有 `simple-table` 每页数据为 15 条
export function simpleTableConfigFactory() {
    return Object.assign(new SimpleTableConfig(), { ps: 15 });
}

@NgModule({
    providers: [
        { provide: SimpleTableConfig, useFactory: simpleTableConfigFactory }
    ]
})

参数	说明	类型	默认值
ps	每页数量，当设置为 0 表示不分页，默认：10	number	10
bordered	是否显示边框	boolean	false
size	table大小	small,middle,default	default
showSizeChanger	是否显示pagination中改变页数	boolean	false
pageSizeSelectorValues	pagination中每页显示条目数下拉框值	number[]	[10, 20, 30, 40, 50]
showQuickJumper	是否显示pagination中快速跳转	boolean	false
showTotal	是否显示总数据量	boolean	false
isPageIndexReset	数据变更后是否保留在数据变更前的页码	boolean	true
toTopInChange	切换分页时返回顶部	boolean	true
pagePlacement	分页方向	left,center,right	right
reqReName	重命名请求参数 pi、ps 例如：{ pi: 'Page' } pi 会被替换成 Page	Object	-
resReName	重命名返回参数 total、list 例如：{ total: 'Total' } Total 会被当作 total	Object	-
sortReName	重命名排序值，columns 的重命名高于属性	{ ascend?: string, descend?: string }	-

欢迎大家提供更友好的想法 😄。

[dusdong]

增加 class 项，可以设置列的 classname

[cipchk]

@zfywestbook 2.0 以后更名为 st，不建议用它来写可编辑的功能，当然你可以自己重新定义。