@ang-kit/component

新的使用文档请访问内网：http://10.10.11.106:4500

注册模块

import {AngKitComponentModule} from '@ang-kit/component';

@NgModule({
  imports: [
    AngKitComponentModule
  ]
})
export class AppModule { }

组件

ADSimpleTableComponent

功能

• 简易表格，简化html的声明，基于配置的方式创建表格组件

使用示例

1.使用
.html
<app-ad-simple-table
  #table
  [dataSource]="data"
  [columns]="column"
>
</app-ad-simple-table>

.ts
data = [
    {name: '111'}
];
column = [
    {title: '姓名', index: 'name'},
    {title: '操作区', buttons: [
        {
          text: '按钮1',
          click: (item) => {
            console.log('111');
          }
        }
    ]}
];

2.基本的接口类说明

/**
 * 单个数据源(静态数据)
 */
export interface ADSimpleTableData {
  /**
   * 选择框或单选框状态值
   */
  checked?: boolean;
  /**
   * 选择框或单选框 `disabled` 值
   */
  disabled?: boolean;
  /**
   * 其他字段
   */
  [key: string]: any;
}

/**
 * 列描述
 */
export interface ADSimpleTableColumn {
  /**
   * 表格标题
   */
  title: string;
  /**
   * 列数据在数据项中对应的key
   */
  index?: string;
  /**
   * 类型
   */
  type?: 'checkbox' | 'img' | 'date' | 'yuan' | 'input-number';
  /**
   * 是否可编辑
   */
  canEdit?: boolean;
  /**
   * 编辑状态类型
   */
  editType?: 'input-number';
  /**
   * 列宽，例如：`10%`、`100px`
   */
  width?: string;
  /**
   * 按钮组
   */
  buttons?: ADSimpleTableButton[];
  /**
   * 排序的默认受控属性
   * - 只支持同时对一列进行排序
   * - 保证只有一列的 `sort` 值，否则自动获取所有列的第一个值
   */
  sortValue: 'descend' | 'ascend' | null;
  /**
   * 格式化列值
   */
  format?: (record: any) => any;
  /**
   * 日期格式，`type=date` 有效，（默认：yyyy-MM-dd HH:mm:ss）
   */
  dateFormat?: string;
  /**
   * 头像类型，仅当 type=img 时有效；
   */
  avatarShape?: 'square' | 'circle' | null;
  /**
   * 默认提示，仅当呦输入框的时候有效
   */
  placeholder?: string;
  /**
   * 精度值，只有当 type = input-number 时候有效
   */
  precision?: number;
  /**
   * 最小值，只有 type = input-number 时候有效
   */
  min?: number;
  /**
   * 步数，只有 type = input-number 时候有效
   */
  step?: number;
  [key: string]: any;
}

/**
 * 按钮配置
 */
export interface ADSimpleTableButton {
  /**
   * 文本
   */
  text: string;
  /**
   * 格式化文本
   */
  format?: (record: any, btn: ADSimpleTableButton) => string;
  /**
   * 按钮类型 暂只支持 edit
   */
  type?: null | 'edit';
  /**
   * 是否显示的条件
   */
  isShow?: (record: any) => boolean;
  /**
   * 是否显示分割符，显示在该按钮的位置后面
   */
  isShowDivider?: boolean;
  /**
   * 点击回调
   */
  click?: (record: any) => void;
  /**
   * 下拉菜单，当存在时以 `dropdown` 形式渲染
   * - 只支持一级
   */
  children?: ADSimpleTableButton[];
  [key: string]: any;
}

Api

参数	说明	类型	默认值
showNumber	是否显示序号	boolean	true
tableSize	大小，有default、middle、small三种	string	middle
tableTitle	标题	string	''
showBorder	是否显示border	boolean	true
isPagination	是否显示分页	boolean	true
isPagination	是否显示分页	boolean	true
isFrontPagination	是否前端分页	boolean	false
showCheckBox	是否显示checkbox	boolean	false
dataSourceId	数据源的ID，主要用于checkbox、快速编辑功能等判断是否是同一个数据	number 或者 string	'id'
maxCheckCount	当有checkBox，最大显示数量	number	500
url	请求地址，如果用了该变量默认在内部做请求处理	string	null
dataSource	表格数据，如果用了该变量默认在外部做请求处理	ADSimpleTableData[]	[]
extraParams	请求的额外参数	any	null
reqHeader	请求头信息	any	null
reqMethod	请求方法，传入 GET、POST...	string	'POST'
reqReName	重命名请求参数，支持重命名pageNo、pageSize两个参数	any	{}
sortReName	重命名排序参数，支持重命名sortName、sortValue两个参数	any	{}
sortReNameValue	重命名排序参数对应的值，支持重命名descend、ascend	any	{}
resReName	重命名返回参数，支持重命名total、list两个参数	any	{}
columns	表格字段	ADSimpleTableColumn[]	[]
preDataChange	数据处理前回调	(data: ADSimpleTableData[]) => ADSimpleTableData[]	-
preResponseDataChange	如果需要从外部改变数据的时候调用	(data: ADSimpleTableData) => any	-
initLoadData	初始化的时候是否加载数据	boolean	true
requestDataSourceEmitter	通知外部处理请求事件	EventEmitter<object>	-
checkboxChangeEmitter	多选框改变事件	EventEmitter<ADSimpleTableData[]>	-
saveRowEmitter	快速保存数据的事件	EventEmitter<ADSimpleTableData>	-