244 lines
8.1 KiB
TypeScript
244 lines
8.1 KiB
TypeScript
import { GridColumnDefinition } from "./column"
|
||
|
||
/** 列数据接口 */
|
||
export interface GridItem {
|
||
/** 值 */
|
||
Value: any;
|
||
/** 显示值 */
|
||
DisplayValue: string;
|
||
}
|
||
|
||
/** 列数据行包装接口 */
|
||
export interface GridItemWrapper {
|
||
/** 真实数据对象 */
|
||
values: { [key: string]: GridItem | any };
|
||
/** 下拉数据源缓存对象 */
|
||
source: { [key: string]: Array<GridSourceItem> };
|
||
}
|
||
|
||
/** 下拉框列数据源接口 */
|
||
export interface GridSourceItem {
|
||
/** 值 */
|
||
value: string;
|
||
/** 显示文本 */
|
||
text: string;
|
||
}
|
||
|
||
/** 列排序枚举 */
|
||
interface GridColumnDirection {
|
||
/** 倒序 */
|
||
[-1]: Number,
|
||
/** 升序 */
|
||
1: Number
|
||
}
|
||
|
||
/** 列事件枚举 */
|
||
interface GridColumnColumnEventMap {
|
||
/** 重排事件 */
|
||
"reorder": string,
|
||
/** 宽调整事件 */
|
||
"resize": string,
|
||
/** 排序事件 */
|
||
"sort": string
|
||
}
|
||
|
||
/** Grid 控件基础类 */
|
||
export class Grid {
|
||
/** 列类型枚举 */
|
||
static ColumnTypes: {
|
||
/** 通用列（只读） */
|
||
Common: 0,
|
||
/** 单行文本列 */
|
||
Input: 1,
|
||
/** 下拉选择列 */
|
||
Dropdown: 2,
|
||
/** 复选框列 */
|
||
Checkbox: 3,
|
||
/** 图标列 */
|
||
Icon: 4,
|
||
/** 多行文本列 */
|
||
Text: 5,
|
||
/** 日期选择列 */
|
||
Date: 6,
|
||
/**
|
||
* 判断列是否为复选框列
|
||
* @param type 列类型
|
||
*/
|
||
isCheckbox(type: Number): boolean;
|
||
};
|
||
|
||
/** 列定义的数组 */
|
||
columns: Array<GridColumnDefinition>;
|
||
/** 多语言资源对象 */
|
||
langs?: { all: string, ok: string, reset: string };
|
||
/** 行数大于等于该值则启用虚模式，默认值 100 */
|
||
virtualCount?: Number;
|
||
/** 表格行高，默认值 36 */
|
||
rowHeight?: Number;
|
||
/** 文本行高，默认值 24 */
|
||
lineHeight?: Number;
|
||
/** 列表底部留出额外行的空白，默认值 0 */
|
||
extraRows?: Number;
|
||
/** 过滤条件列表的行高，默认值 30 */
|
||
filterRowHeight?: Number;
|
||
/** 列表高度值，为 0 时列表始终显示全部内容（自增高），为非数字或者小于 0 则根据容器高度来确定虚模式的渲染行数，默认值 null */
|
||
height?: Number;
|
||
/** 列表是否为只读，默认值 false */
|
||
readonly?: boolean;
|
||
/** 是否允许多选，默认值 false */
|
||
multiSelect?: boolean;
|
||
/** 为 false 时只有点击在单元格内才会选中行，默认值 true */
|
||
fullrowClick?: boolean;
|
||
/** 单元格 tooltip 是否禁用，默认值 false */
|
||
tooltipDisabled?: boolean;
|
||
/** 列头是否显示，默认值 true */
|
||
headerVisible?: boolean;
|
||
/** 监听事件的窗口载体，默认值 window */
|
||
window?: Window
|
||
/** 排序列的索引，默认值 -1 */
|
||
sortIndex?: Number;
|
||
/** 排序方式，正数升序，负数倒序，默认值 1 */
|
||
sortDirection?: keyof GridColumnDirection;
|
||
|
||
/**
|
||
* Grid 控件构造函数
|
||
* @param container Grid 控件所在的父容器，可以是 string 表示选择器，也可以是 HTMLElement 对象<br/><br/>
|
||
* <i>构造时可以不进行赋值，但是调用 init 函数时则必须进行赋值</i>
|
||
* @param getText （可选参数）获取多语言文本的函数代理
|
||
*/
|
||
constructor(container: string | HTMLElement, getText?: (id: string, def?: string) => string);
|
||
|
||
/**
|
||
* 即将选中行时触发，返回 false、null、undefined、0 等则取消选中动作
|
||
* @param index 即将选中的行索引
|
||
* @param colIndex 即将选中的列索引
|
||
*/
|
||
willSelect?: (index: Number, colIndex: Number) => boolean;
|
||
/**
|
||
* 单元格单击时触发，colIndex 为 -1 则表示点击的是行的空白处，返回 false 则取消事件冒泡
|
||
* @param index 点击的行索引
|
||
* @param colIndex 点击的列索引
|
||
*/
|
||
cellClicked?: (index: Number, colIndex: Number) => boolean;
|
||
|
||
/**
|
||
* 选中行发生变化时触发的事件
|
||
* @param index 选中的行索引
|
||
*/
|
||
onSelectedRowChanged?: (index?: Number) => void;
|
||
/**
|
||
* 单元格双击时触发的事件，colIndex 为 -1 则表示点击的是行的空白处
|
||
* @param index 双击的行索引
|
||
* @param colIndex 双击的列索引
|
||
*/
|
||
onCellDblClicked?: (index: Number, colIndex: Number) => void;
|
||
/**
|
||
* 行双击时触发的事件
|
||
* @param index 双击的行索引
|
||
*/
|
||
onRowDblClicked?: (index: Number) => void;
|
||
/**
|
||
* 列发生变化时触发的事件
|
||
* @param type 事件类型<br/><br/>
|
||
* "reorder" 为发生列重排事件，此时 value 为目标列索引<br/>
|
||
* "resize" 为发生列宽调整事件，此时 value 为列宽度值<br/>
|
||
* "sort" 为发生列排序事件，此时 value 为 1（升序）或 -1（倒序）
|
||
* @param colIndex 发生变化事件的列索引
|
||
* @param value 变化的值
|
||
*/
|
||
onColumnChanged?: (type: keyof GridColumnColumnEventMap, colIndex: Number, value: Number | keyof GridColumnDirection) => void;
|
||
/**
|
||
* 列滚动时触发的事件
|
||
* @param e 滚动事件对象
|
||
*/
|
||
onBodyScrolled?: (e: Event) => void;
|
||
|
||
/** 获取数据数组 */
|
||
get source(): Array<GridItem | any>;
|
||
/** 设置数据，并刷新列表 */
|
||
set source(list: Array<GridItem | any>);
|
||
/** 获取当前选中的行索引的数组 */
|
||
get selectedIndexes(): Array<Number>;
|
||
/** 设置当前选中的行索引的数组，并刷新列表 */
|
||
set selectedIndexes(indexes: Array<Number>);
|
||
/** 获取 Grid 当前是否处于加载状态 */
|
||
get loading(): boolean;
|
||
/** 使 Grid 进入加载状态 */
|
||
set loading(flag: boolean);
|
||
/** 获取 Grid 当前滚动的偏移量 */
|
||
get scrollTop(): Number;
|
||
/** 设置 Grid 滚动偏移量 */
|
||
set scrollTop(top: Number);
|
||
|
||
/** 获取 Grid 的页面元素 */
|
||
get element(): HTMLElement;
|
||
/** 获取当前 Grid 是否已发生改变 */
|
||
get changed(): boolean;
|
||
/** 获取当前是否为虚模式状态 */
|
||
get virtual(): boolean;
|
||
/** 获取当前排序的列关键字，为 null 则当前无排序列 */
|
||
get sortKey(): string | undefined;
|
||
/** 获取当前选中行的索引，为 -1 则当前没有选中行 */
|
||
get selectedIndex(): Number | -1;
|
||
|
||
/**
|
||
* 初始化Grid控件
|
||
* @param container 父容器元素，若未传值则采用构造方法中传入的父容器元素
|
||
*/
|
||
init(container?: HTMLElement): void;
|
||
/**
|
||
* 设置数据列表，该方法为 set source 属性的语法糖
|
||
* @param source 待设置的数据列表
|
||
*/
|
||
setData(source: Array<GridItem | any>): void;
|
||
/**
|
||
* 设置单行数据
|
||
* @param index 行索引
|
||
* @param item 待设置的行数据值
|
||
*/
|
||
setItem(index: Number, item: GridItem | any): void;
|
||
/**
|
||
* 添加行数据
|
||
* @param item 待添加的行数据值
|
||
* @param index 待添加的行索引
|
||
*/
|
||
addItem(item: GridItem | any, index?: Number): void;
|
||
/**
|
||
* 删除行数据
|
||
* @param index 待删除的行索引
|
||
*/
|
||
removeItem(index: Number): void;
|
||
/**
|
||
* 滚动到指定行的位置
|
||
* @param index 待滚动至的行索引
|
||
*/
|
||
scrollToIndex(index: Number): void;
|
||
/**
|
||
* 调整 Grid 元素的大小，一般需要在宽度变化时（如页面大小发生变化时）调用
|
||
* @param force 是否强制reload，默认只有待渲染的行数发生变化时才会调用reload
|
||
* @param keep 是否保持当前滚动位置
|
||
*/
|
||
resize(force?: boolean, keep?: boolean): void;
|
||
/**
|
||
* 重新计算需要渲染的行，并载入元素，一般需要在高度变化时调用
|
||
* @param keep 是否保持当前滚动位置
|
||
*/
|
||
reload(keep?: boolean): void;
|
||
/**
|
||
* 重新填充Grid单元格数据
|
||
*/
|
||
refresh(): void;
|
||
/**
|
||
* 把所有行重置为未修改的状态
|
||
*/
|
||
resetChange(): void;
|
||
/**
|
||
* 根据当前排序字段进行列排序
|
||
* @param reload 为 true 则在列排序后调用 reload 方法
|
||
*/
|
||
sortColumn(reload?: boolean): void;
|
||
/**
|
||
* 清除列头复选框的选中状态
|
||
*/
|
||
clearHeaderCheckbox(): void;
|
||
} |