grid

---

创建一个统一样式的滚动列表元素。

constructor

new(container: HTMLElement): Grid

container: HTMLElement

父容器元素，Grid 将创建在此元素之内

init

init(container?: HTMLElement): void

container?: HTMLElement

父容器元素，默认使用构造函数中传递的值

scrollToIndex

scrollToIndex(index: Number): void

index: Number

将滚动至此行

resize

resize(force?: boolean): void

force?: boolean

重新计算大小，参数表示是否强制重载

reload

reload(): void

重载表格元素

refresh

refresh(): void

刷新表格单元格值

resetChange

resetChange(): void

还原表格修改状态，置为未修改

sortColumn

sortColumn(reload?: boolean): void

reload?: boolean

根据当前设定的排序列排序，参数表示是否重载表格

---

sortIndex

sortIndex?: Number

排序的列序号

sortDirection

sortDirection?: keyof GridColumnDirection

排序的方向，可选值为 -1: desc、1: asc

columns

columns: Array<GridColumnDefinition>

表格列的定义，结构为

interface GridColumnDefinition {
      key?: string;
      type?: keyof GridColumnType | typeof GridColumn;
      caption?: string;
      width?: Number;
      align?: "left" | "center" | "right";
      enabled?: boolean | string;
      css?: { [key: string]: string };
      styleFilter?: (item: GridItem | any) => { [key: string]: string };
      textStyle?: { [key: string]: string };
      visible?: boolean;
      resizable?: boolean;
      sortable?: boolean;
      orderable?: boolean;
      allcheck?: boolean;
      events?: { [event: string]: any };
      attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
      filter?: (item: GridItem | any) => any;
      sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
      bgFilter?: (item: GridItem | any) => string;
      dropOptions?: DropdownOptions;
      source?: Array<any> | ((item: GridItem | any) => Array<any> | Promise<Array<GridSourceItem>>);
      iconType?: string;
      text?: string;
      tooltip?: string;
      onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
      onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
  }

key

key?: string

关键字

type

type?: keyof GridColumnType | typeof GridColumn

列类型，可以为 Grid.ColumnTypes 枚举值表示内置的通用、输入、下拉、复选框、图标等类型

declare var ColumnTypes: {
      Common: 0,
      Input: 1,
      Dropdown: 2,
      Checkbox: 3,
      Icon: 4,
      isCheckbox(type: Number): boolean;
  }

也可以为符合 GridColumn 接口的类或对象表示自定义类型，接口定义如下

interface GridColumn {
    static create(): HTMLElement;
    static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
    static setValue(element: HTMLElement, val: any): void;
    static getValue(e: any): any;
    static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
    static setEnabled(element: HTMLElement, enabled?: boolean): void;
}

create

static create(): HTMLElement

创建只读状态的单元格元素

createEdit

static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement

创建编辑状态的单元格元素

trigger: (e: any) => void

用以触发 Grid 的列修改事件 columnChanged 的函数代理

col: GridColumnDefinition

当前列的定义对象

body: HTMLElement

Grid 正文表格元素

setValue

static setValue(element: HTMLElement, val: any, item: GridItem | any, col: GridColumnDefinition): void

设置单元格值时触发的函数

element: HTMLElement

单元格元素

val: any

单元格的值

item: GridItem | any

单元格所在行的数据项

col: GridColumnDefinition

单元格所在列的定义对象

---

示例