optimize comments
This commit is contained in:
parent
5797c2a9cf
commit
0cb4802e1f
@ -7,7 +7,7 @@ import { Dropdown } from "../dropdown";
|
||||
import { convertCssStyle } from "../extension";
|
||||
import { createDateInput, formatDate, setDateValue, getDateValue } from "../date";
|
||||
// definition
|
||||
import { GridRowItem, DropdownOptions, GridItemBooleanCallback, GridDropdownSourceCallback, DateFormatterCallback, GridSourceItem, GridItemWrapper, Grid } from "./grid";
|
||||
import { GridRowItem, DropdownOptions, GridColumnDefinition, GridSourceItem, GridItemWrapper, Grid } from "./grid";
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
@ -17,26 +17,6 @@ import { GridRowItem, DropdownOptions, GridItemBooleanCallback, GridDropdownSour
|
||||
* @this GridColumnDefinition
|
||||
*/
|
||||
|
||||
/**
|
||||
* 列定义接口
|
||||
* @ignore
|
||||
* @typedef GridColumnDefinition
|
||||
* @property {string} key - 列关键字，默认以该关键字从行数据中提取单元格值，行数据的关键字属性值里包含 DisplayValue 则优先显示此值
|
||||
* @property {(boolean | string | GridItemBooleanCallback)} [enabled] - 列是否可用（可编辑），允许以下类型
|
||||
*
|
||||
* * `boolean` 则直接使用该值
|
||||
* * `string` 则以该值为关键字从行数据中取值作为判断条件
|
||||
* * `GridItemBooleanCallback` 则调用如下回调，以返回值作为判断条件
|
||||
* @property {DropdownOptions} [dropOptions] - 列为下拉列表类型时以该值设置下拉框的参数
|
||||
* @property {(GridSourceItem[] | Promise<GridSourceItem[]> | GridDropdownSourceCallback)} [source] - 列为下拉列表类型时以该值设置下拉列表数据源，支持返回异步对象，也支持如下函数返回
|
||||
* @property {boolean} [sourceCache=false] - 下拉列表数据源是否缓存结果（即行数据未发生变化时仅从source属性获取一次值）
|
||||
* @property {("fa-light" | "fa-regular" | "fa-solid")} [iconType=fa-light] - 列为图标类型时以该值设置图标样式
|
||||
* @property {string} [dateMin] - 列为日期类型时以该值作为最小可选日期值
|
||||
* @property {string} [dateMax] - 列为日期类型时以该值作为最大可选日期值
|
||||
* @property {DateFormatterCallback} [dateValueFormatter] - 列为日期类型时自定义日期格式化函数
|
||||
* @property {DropExpandedCallback} [onDropExpanded] - 列为下拉框类型时在下拉列表展开时触发的事件
|
||||
*/
|
||||
|
||||
/**
|
||||
* 列定义基类
|
||||
*
|
||||
|
||||
@ -58,14 +58,6 @@ const ColumnTypeDefs = {
|
||||
|
||||
let r = lang;
|
||||
|
||||
/**
|
||||
* 数据项
|
||||
* @typedef ValueItem
|
||||
* @property {any} Value - 值
|
||||
* @property {string} DisplayValue - 显示值
|
||||
* @property {boolean} [__checked] - 已选中
|
||||
*/
|
||||
|
||||
/**
|
||||
* 键值字典
|
||||
* @template T
|
||||
@ -74,11 +66,22 @@ let r = lang;
|
||||
* @type {Map<string, T>}
|
||||
*/
|
||||
|
||||
/**
|
||||
* 数据项
|
||||
* @typedef ValueItem
|
||||
* @property {any} Value - 值
|
||||
* @property {string} DisplayValue - 显示值
|
||||
* @property {boolean} [__checked] - 已选中
|
||||
* @interface
|
||||
*/
|
||||
|
||||
/**
|
||||
* 行数据对象
|
||||
* @typedef GridRowItem
|
||||
* @type {KeyMap<ValueItem>}
|
||||
* @property {(ValueItem | any)} {key} - 数据项
|
||||
* @extends {KeyMap<ValueItem>}
|
||||
* @interface
|
||||
*/
|
||||
|
||||
/**
|
||||
@ -92,6 +95,7 @@ let r = lang;
|
||||
* @property {boolean} __changed - 行数据是否发生改变
|
||||
* @property {boolean} __expanded - 行是否已展开
|
||||
* @property {GridExpandableObject} __expandable_object - 行扩展对象
|
||||
* @interface
|
||||
*/
|
||||
|
||||
/**
|
||||
@ -99,6 +103,7 @@ let r = lang;
|
||||
* @typedef GridSourceItem
|
||||
* @property {string} value - 值
|
||||
* @property {string} text - 显示文本
|
||||
* @interface
|
||||
*/
|
||||
|
||||
/**
|
||||
@ -177,6 +182,7 @@ let r = lang;
|
||||
* @property {string} [placeholder] - 输入框的提示文本
|
||||
* @property {boolean} [slideFixed] - 是否固定为向下展开
|
||||
* @property {HTMLElement} [wrapper] - 父元素，默认添加到头元素之后
|
||||
* @interface
|
||||
*/
|
||||
|
||||
/**
|
||||
@ -191,16 +197,16 @@ let r = lang;
|
||||
*
|
||||
* <img src="./assets/column-types.png" alt="Column Types"/><br/>
|
||||
* 代码参考页面下方的示例
|
||||
* @class
|
||||
* @typedef GridColumnDefinition
|
||||
* @property {string} key - 列关键字，默认以该关键字从行数据中提取单元格值，行数据的关键字属性值里包含 DisplayValue 则优先显示此值
|
||||
* @property {(GridColumnTypeEnum | GridColumn)} [type=Grid.ColumnTypes.Common] - 列的类型，可以为 {@linkcode GridColumn} 的子类，或者如下内置类型 {@linkcode Grid.ColumnTypes}
|
||||
* @property {number} type.Common=0 - 通用列（只读）
|
||||
* @property {number} type.Input=1 - 单行文本列
|
||||
* @property {number} type.Dropdown=2 - 下拉选择列
|
||||
* @property {number} type.Checkbox=3 - 复选框列
|
||||
* @property {number} type.Icon=4 - 图标列
|
||||
* @property {number} type.Text=5 - 多行文本列
|
||||
* @property {number} type.Date=6 - 日期选择列
|
||||
* * Grid.ColumnTypes.Common - 0: 通用列（只读）
|
||||
* * Grid.ColumnTypes.Input - 1: 单行文本列
|
||||
* * Grid.ColumnTypes.Dropdown - 2: 下拉选择列
|
||||
* * Grid.ColumnTypes.Checkbox - 3: 复选框列
|
||||
* * Grid.ColumnTypes.Icon - 4: 图标列
|
||||
* * Grid.ColumnTypes.Text - 5: 多行文本列
|
||||
* * Grid.ColumnTypes.Date - 6: 日期选择列
|
||||
* @property {string} [caption] - 列标题文本
|
||||
* @property {any} [captionStyle] - 列标题的元素样式
|
||||
* @property {number} [width] - 大于 0 则设置为该宽度，否则根据列内容自动调整列宽
|
||||
@ -209,16 +215,8 @@ let r = lang;
|
||||
*
|
||||
* * `boolean` 则直接使用该值
|
||||
* * `string` 则以该值为关键字从行数据中取值作为判断条件
|
||||
* * `GridItemBooleanCallback` 则调用如下回调，以返回值作为判断条件
|
||||
* @property {GridColumnDefinition} enabled.{this} - 上下文为列定义对象
|
||||
* @property {GridRowItem} enabled.item - 行数据对象
|
||||
* @property {boolean} enabled.{returns} - 返回是否启用
|
||||
* * `GridItemBooleanCallback` 则调用回调，以返回值作为判断条件
|
||||
* @property {GridItemFilterCallback} [filter] - 单元格取值采用该函数返回的值
|
||||
* @property {GridColumnDefinition} filter.{this} - 上下文为列定义对象
|
||||
* @property {GridRowItem} filter.item - 行数据对象
|
||||
* @property {boolean} filter.editing - 是否处于编辑状态
|
||||
* @property {HTMLElement} [filter.body] - Grid 控件的 `<tbody>` 部分
|
||||
* @property {ValueItem} filter.{returns} - 返回过滤后的显示或编辑值
|
||||
* @property {string} [text] - 单元格以该值填充内容，忽略filter与关键字属性
|
||||
* @property {boolean} [visible=true] - 列是否可见
|
||||
* @property {boolean} [resizable=true] - 列是否允许调整宽度
|
||||
@ -230,49 +228,31 @@ let r = lang;
|
||||
* @property {any} [css] - 单元格css样式对象（仅在重建行元素时读取）
|
||||
* @property {any} [totalCss] - 合计行样式（仅在重建合计行元素时读取）
|
||||
* @property {(any | GridItemObjectCallback)} [style] - 单元格样式（填充行列数据时读取），支持直接返回样式对象或调用函数返回（若赋值则忽略 [styleFilter]{@linkcode GridColumnDefinition#styleFilter}）
|
||||
* @property {GridColumnDefinition} style.{this} - 上下文为列定义对象
|
||||
* @property {GridRowItem} style.item - 行数据对象
|
||||
* @property {any} style.{returns} - 返回样式对象
|
||||
* @property {(@deprecated)} [styleFilter] - **已过时**<br/>_根据返回值填充单元格样式（填充行列数据时读取）_
|
||||
* @property {GridItemObjectCallback} [styleFilter] - **已过时**<br/>_根据返回值填充单元格样式（填充行列数据时读取）_
|
||||
* @property {(string | GridItemStringCallback)} [background] - 设置单元格背景色（填充行列数据时读取），支持直接设置颜色字符串或调用函数返回（若赋值则忽略 [bgFilter]{@linkcode GridColumnDefinition#bgFilter}）
|
||||
* @property {GridColumnDefinition} background.{this} - 上下文为列定义对象
|
||||
* @property {GridRowItem} background.item - 行数据对象
|
||||
* @property {string} background.{returns} - 返回单元格背景色字符串
|
||||
* @property {(@deprecated)} [bgFilter] - **已过时**<br/>_根据返回值设置单元格背景色_
|
||||
* @property {GridItemStringCallback} [bgFilter] - **已过时**<br/>_根据返回值设置单元格背景色_
|
||||
* @property {KeyMap<Function>} [events] - 给单元格元素附加事件（事件函数上下文为数据行对象）
|
||||
* @property {Function} events.{event} - 事件回调函数
|
||||
* @property {GridRowItem} events.{event}.{this} - 上下文为行数据对象
|
||||
* @property {Event} events.{event}.e - 事件参数
|
||||
* @property {(any | GridItemObjectCallback)} [attrs] - 根据返回值设置单元格元素的附加属性，允许直接设置对象也支持调用如下函数返回对象
|
||||
* @property {GridColumnDefinition} attrs.{this} - 上下文为列定义对象
|
||||
* @property {GridRowItem} attrs.item - 行数据对象
|
||||
* @property {any} attrs.{returns} - 返回附加属性对象
|
||||
* @property {(any | GridItemObjectCallback)} [attrs] - 根据返回值设置单元格元素的附加属性，允许直接设置对象也支持调用函数返回对象
|
||||
* @property {boolean} [allowFilter=false] - 是否允许进行列头过滤
|
||||
* @property {any[]} [filterValues] - 过滤值的数组
|
||||
* @property {boolean} [filterAllowNull=false] - 是否区分 `null` 与空字符串
|
||||
* @property {(ValueItem[] | GridColumnFilterSourceCallback)} [filterSource] - 自定义列过滤器的数据源，允许调用如下函数
|
||||
* @property {Grid} filterSource.{this} - 上下文为 Grid
|
||||
* @property {GridColumnDefinition} filterSource.col - 列定义对象
|
||||
* @property {ValueItem[]} filterSource.{returns} - 返回过滤器的数据数组
|
||||
* @property {(ValueItem[] | GridColumnFilterSourceCallback)} [filterSource] - 自定义列过滤器的数据源，支持调用函数返回数据源
|
||||
* @property {GridItemSortCallback} [sortFilter] - 自定义列排序函数
|
||||
* @property {GridRowItem} sortFilter.a - 对比行数据1
|
||||
* @property {GridRowItem} sortFilter.b - 对比行数据2
|
||||
* @property {number} sortFilter.{returns} - 返回大小对比结果
|
||||
* @property {DropdownOptions} [dropOptions] - 列为下拉列表类型时以该值设置下拉框的参数
|
||||
* @property {(GridSourceItem[] | Promise<GridSourceItem[]> | GridDropdownSourceCallback)} [source] - 列为下拉列表类型时以该值设置下拉列表数据源，支持返回异步对象，也支持如下函数返回
|
||||
* @property {GridRowItem} source.item - 行数据对象
|
||||
* @property {GridSourceItem[]} source.{returns} - 返回行下拉列表数据源
|
||||
* @property {(GridSourceItem[] | Promise<GridSourceItem[]> | GridDropdownSourceCallback)} [source] - 列为下拉列表类型时以该值设置下拉列表数据源，支持返回异步对象，也支持调用函数返回
|
||||
* @property {boolean} [sourceCache=false] - 下拉列表数据源是否缓存结果（即行数据未发生变化时仅从source属性获取一次值）
|
||||
* @property {("fa-light" | "fa-regular" | "fa-solid")} [iconType=fa-light] - 列为图标类型时以该值设置图标样式
|
||||
* @property {string} [dateMin] - 列为日期类型时以该值作为最小可选日期值
|
||||
* @property {string} [dateMax] - 列为日期类型时以该值作为最大可选日期值
|
||||
* @property {DateFormatterCallback} [dateValueFormatter] - 列为日期类型时自定义日期格式化函数
|
||||
* @property {Date} dateValueFormatter.date - 日期值
|
||||
* @property {any} dateValueFormatter.{returns} - 返回格式化后的结果
|
||||
* @property {(string | GridItemStringCallback)} [tooltip] - 额外设置单元格的 tooltip，支持直接使用字符串或者调用如下函数
|
||||
* @property {GridColumnDefinition} tooltip.{this} - 上下文为列定义对象
|
||||
* @property {GridRowItem} tooltip.item - 行数据对象
|
||||
* @property {string} tooltip.{returns} - 返回额外 tooltip 字符串
|
||||
* @property {(string | GridItemStringCallback)} [tooltip] - 额外设置单元格的 tooltip，支持直接使用字符串或者使用函数返回的字符串
|
||||
* @property {Function} [onAllChecked] - 列头复选框改变时触发事件
|
||||
* @property {Function} [onChanged] - 单元格变化时触发事件
|
||||
* @property {Function} [onInputEnded] - 文本单元格在输入完成时触发的事件
|
||||
* @property {Function} [onFilterOk] - 列过滤点击 `OK` 时触发的事件
|
||||
* @property {Function} [onFiltered] - 列过滤后触发的事件
|
||||
* @property {Function} [onDropExpanded] - 列为下拉框类型时在下拉列表展开时触发的事件
|
||||
* @interface
|
||||
* @example
|
||||
* [
|
||||
* {
|
||||
@ -350,299 +330,61 @@ let r = lang;
|
||||
* }
|
||||
* ]
|
||||
*/
|
||||
class GridColumnDefinition {
|
||||
/**
|
||||
* 列关键字，默认以该关键字从行数据中提取单元格值，行数据的关键字属性值里包含 DisplayValue 则优先显示此值
|
||||
* @type {string}
|
||||
* @ignore
|
||||
*/
|
||||
key;
|
||||
/**
|
||||
* 列的类型，可以为 {@linkcode GridColumn} 的子类，或者内置类型 {@linkcode Grid.ColumnTypes}
|
||||
* @type {(GridColumnTypeEnum | GridColumn)}
|
||||
* @default Grid.ColumnTypes.Common
|
||||
* @ignore
|
||||
*/
|
||||
type;
|
||||
/**
|
||||
* 列标题文本
|
||||
* @type {string}
|
||||
* @ignore
|
||||
*/
|
||||
caption;
|
||||
/**
|
||||
* 列标题的元素样式
|
||||
* @type {any}
|
||||
* @ignore
|
||||
*/
|
||||
captionStyle;
|
||||
/**
|
||||
* 大于 0 则设置为该宽度，否则根据列内容自动调整列宽
|
||||
* @type {number}
|
||||
* @default 50
|
||||
* @ignore
|
||||
*/
|
||||
width;
|
||||
/**
|
||||
* 列对齐方式
|
||||
* @type {("left" |"center" | "right")}
|
||||
* @default "left"
|
||||
* @ignore
|
||||
*/
|
||||
align;
|
||||
/**
|
||||
* 列是否可用（可编辑），允许以下类型
|
||||
*
|
||||
* * `boolean` 则直接使用该值
|
||||
* * `string` 则以该值为关键字从行数据中取值作为判断条件
|
||||
* * `GridItemBooleanCallback` 则调用如下回调，以返回值作为判断条件
|
||||
* @type {(boolean | string | GridItemBooleanCallback)}
|
||||
* @ignore
|
||||
*/
|
||||
enabled;
|
||||
/**
|
||||
* 单元格取值采用该函数返回的值
|
||||
* @type {GridItemFilterCallback}
|
||||
* @ignore
|
||||
*/
|
||||
filter;
|
||||
/**
|
||||
* 单元格以该值填充内容，忽略filter与关键字属性
|
||||
* @type {string}
|
||||
* @ignore
|
||||
*/
|
||||
text;
|
||||
/**
|
||||
* 列是否可见
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
* @ignore
|
||||
*/
|
||||
visible;
|
||||
/**
|
||||
* 列是否允许调整宽度
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
* @ignore
|
||||
*/
|
||||
resizable;
|
||||
/**
|
||||
* 列是否允许排序
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
* @ignore
|
||||
*/
|
||||
sortable;
|
||||
/**
|
||||
* 列是否允许重排顺序
|
||||
* @type {boolean}
|
||||
* @default true
|
||||
* @ignore
|
||||
*/
|
||||
orderable;
|
||||
/**
|
||||
* 列为复选框类型时是否在列头增加全选复选框
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
* @ignore
|
||||
*/
|
||||
allcheck;
|
||||
/**
|
||||
* 列为收缩列，禁用自动调整大小
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
* @ignore
|
||||
*/
|
||||
shrink;
|
||||
/**
|
||||
* 单元格元素的额外样式类型字符串（仅在重建行元素时读取）
|
||||
* @type {string}
|
||||
* @ignore
|
||||
*/
|
||||
class;
|
||||
/**
|
||||
* 单元格css样式对象（仅在重建行元素时读取）
|
||||
* @type {any}
|
||||
* @ignore
|
||||
*/
|
||||
css;
|
||||
/**
|
||||
* 合计行样式（仅在重建合计行元素时读取）
|
||||
* @type {any}
|
||||
* @ignore
|
||||
*/
|
||||
totalCss;
|
||||
/**
|
||||
* 单元格样式（填充行列数据时读取），支持直接返回样式对象或调用函数返回（若赋值则忽略 [styleFilter]{@linkcode GridColumnDefinition#styleFilter}）
|
||||
* @type {(any | GridItemObjectCallback)}
|
||||
* @ignore
|
||||
*/
|
||||
style;
|
||||
/**
|
||||
* **已过时**<br/>_根据返回值填充单元格样式（填充行列数据时读取）_
|
||||
* @type {GridItemObjectCallback}
|
||||
* @ignore
|
||||
* @deprecated
|
||||
*/
|
||||
styleFilter;
|
||||
/**
|
||||
* 设置单元格背景色（填充行列数据时读取），支持直接设置颜色字符串或调用函数返回（若赋值则忽略 [bgFilter]{@linkcode GridColumnDefinition#bgFilter}）
|
||||
* @type {(string | GridItemStringCallback)}
|
||||
* @ignore
|
||||
*/
|
||||
background;
|
||||
/**
|
||||
* **已过时**<br/>_根据返回值设置单元格背景色_
|
||||
* @type {GridItemStringCallback}
|
||||
* @ignore
|
||||
* @deprecated
|
||||
*/
|
||||
bgFilter;
|
||||
/**
|
||||
* 给单元格元素附加事件（事件函数上下文为数据行对象）
|
||||
* @type {KeyMap<Function>}
|
||||
* @ignore
|
||||
*/
|
||||
events;
|
||||
/**
|
||||
* 根据返回值设置单元格元素的附加属性，允许直接设置对象也支持调用如下函数返回对象
|
||||
* @type {(any | GridItemObjectCallback)}
|
||||
* @ignore
|
||||
*/
|
||||
attrs;
|
||||
/**
|
||||
* 是否允许进行列头过滤
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
* @ignore
|
||||
*/
|
||||
allowFilter;
|
||||
/**
|
||||
* 过滤值的数组
|
||||
* @type {any[]}
|
||||
* @ignore
|
||||
*/
|
||||
filterValues;
|
||||
/**
|
||||
* 是否区分 `null` 与空字符串
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
* @ignore
|
||||
*/
|
||||
filterAllowNull;
|
||||
/**
|
||||
* 自定义列过滤器的数据源，允许调用如下函数
|
||||
* @type {(ValueItem[] | GridColumnFilterSourceCallback)}
|
||||
* @ignore
|
||||
*/
|
||||
filterSource;
|
||||
/**
|
||||
* 自定义列排序函数
|
||||
* @type {GridItemSortCallback}
|
||||
* @ignore
|
||||
*/
|
||||
sortFilter;
|
||||
/**
|
||||
* 列为下拉列表类型时以该值设置下拉框的参数
|
||||
* @type {DropdownOptions}
|
||||
* @ignore
|
||||
*/
|
||||
dropOptions;
|
||||
/**
|
||||
* 列为下拉列表类型时以该值设置下拉列表数据源，支持返回异步对象，也支持如下函数返回
|
||||
* @type {(GridSourceItem[] | Promise<GridSourceItem[]> | GridDropdownSourceCallback)}
|
||||
* @ignore
|
||||
*/
|
||||
source;
|
||||
/**
|
||||
* 下拉列表数据源是否缓存结果（即行数据未发生变化时仅从source属性获取一次值）
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
* @ignore
|
||||
*/
|
||||
sourceCache;
|
||||
/**
|
||||
* 列为图标类型时以该值设置图标样式
|
||||
* @type {("fa-light" | "fa-regular" | "fa-solid")}
|
||||
* @default "fa-light"
|
||||
* @ignore
|
||||
*/
|
||||
iconType;
|
||||
/**
|
||||
* 列为日期类型时以该值作为最小可选日期值
|
||||
* @type {string}
|
||||
* @ignore
|
||||
*/
|
||||
dateMin;
|
||||
/**
|
||||
* 列为日期类型时以该值作为最大可选日期值
|
||||
* @type {string}
|
||||
* @ignore
|
||||
*/
|
||||
dateMax;
|
||||
/**
|
||||
* 列为日期类型时自定义日期格式化函数
|
||||
* @type {DateFormatterCallback}
|
||||
* @ignore
|
||||
*/
|
||||
dateValueFormatter;
|
||||
/**
|
||||
* 额外设置单元格的 tooltip，支持直接使用字符串或者调用如下函数
|
||||
* @type {(string | GridItemStringCallback)}
|
||||
* @ignore
|
||||
*/
|
||||
tooltip;
|
||||
/**
|
||||
* 列头复选框改变时触发
|
||||
* @type {Function}
|
||||
* @event
|
||||
* @param {GridColumnDefinition} col - 列定义对象
|
||||
* @param {boolean} flag - 是否选中
|
||||
* @this Grid
|
||||
*/
|
||||
onAllChecked;
|
||||
/**
|
||||
* 单元格发生变化时触发
|
||||
* @event
|
||||
* @param {GridRowItem} item - 行数据对象
|
||||
* @param {(boolean | string | number)} value - 修改后的值
|
||||
* @param {(boolean | string | number)} oldValue - 修改前的值
|
||||
* @param {any} [e] - 列修改事件传递过来的任意对象
|
||||
* @this Grid
|
||||
*/
|
||||
onChanged;
|
||||
/**
|
||||
* 文本单元格在输入完成时触发的事件
|
||||
* @event
|
||||
* @param {GridColumnDefinition} col - 列定义对象
|
||||
* @param {string} value - 修改后的文本框值
|
||||
* @this Grid
|
||||
*/
|
||||
onInputEnded;
|
||||
/**
|
||||
* 列过滤点击 `OK` 时触发的事件
|
||||
* @event
|
||||
* @param {GridColumnDefinition} col - 列定义对象
|
||||
* @param {ValueItem[]} selected - 选中的过滤项
|
||||
* @this Grid
|
||||
*/
|
||||
onFilterOk;
|
||||
/**
|
||||
* 列过滤后触发的事件
|
||||
* @event
|
||||
* @param {GridColumnDefinition} col - 列定义对象
|
||||
* @this Grid
|
||||
*/
|
||||
onFiltered;
|
||||
/**
|
||||
* 列为下拉框类型时在下拉列表展开时触发的事件
|
||||
* @event
|
||||
* @param {GridRowItem} item - 行数据对象
|
||||
* @param {Dropdown} drop - 下拉框对象
|
||||
* @this GridColumnDefinition
|
||||
*/
|
||||
onDropExpanded;
|
||||
}
|
||||
/**
|
||||
* 列头复选框改变时触发的事件
|
||||
* @name onAllChecked
|
||||
* @event
|
||||
* @param {GridColumnDefinition} col - 列定义对象
|
||||
* @param {boolean} flag - 是否选中
|
||||
* @this Grid
|
||||
* @memberof GridColumnDefinition
|
||||
*/
|
||||
/**
|
||||
* 单元格发生变化时触发的事件
|
||||
* @name onChanged
|
||||
* @event
|
||||
* @param {GridRowItem} item - 行数据对象
|
||||
* @param {(boolean | string | number)} value - 修改后的值
|
||||
* @param {(boolean | string | number)} oldValue - 修改前的值
|
||||
* @param {any} [e] - 列修改事件传递过来的任意对象
|
||||
* @this Grid
|
||||
* @memberof GridColumnDefinition
|
||||
*/
|
||||
/**
|
||||
* 文本单元格在输入完成时触发的事件
|
||||
* @name onInputEnded
|
||||
* @event
|
||||
* @param {GridColumnDefinition} col - 列定义对象
|
||||
* @param {string} value - 修改后的文本框值
|
||||
* @this Grid
|
||||
* @memberof GridColumnDefinition
|
||||
*/
|
||||
/**
|
||||
* 列过滤点击 `OK` 时触发的事件
|
||||
* @name onFilterOk
|
||||
* @event
|
||||
* @param {GridColumnDefinition} col - 列定义对象
|
||||
* @param {ValueItem[]} selected - 选中的过滤项
|
||||
* @this Grid
|
||||
* @memberof GridColumnDefinition
|
||||
*/
|
||||
/**
|
||||
* 列过滤后触发的事件
|
||||
* @name onFiltered
|
||||
* @event
|
||||
* @param {GridColumnDefinition} col - 列定义对象
|
||||
* @this Grid
|
||||
* @memberof GridColumnDefinition
|
||||
*/
|
||||
/**
|
||||
* 列为下拉框类型时在下拉列表展开时触发的事件
|
||||
* @name onDropExpanded
|
||||
* @event
|
||||
* @param {GridRowItem} item - 行数据对象
|
||||
* @param {Dropdown} drop - 下拉框对象
|
||||
* @this GridColumnDefinition
|
||||
* @memberof GridColumnDefinition
|
||||
*/
|
||||
|
||||
/**
|
||||
* 判断复选框列的回调函数
|
||||
@ -688,17 +430,40 @@ const GridColumnDirection = {
|
||||
Ascending: 1
|
||||
};
|
||||
|
||||
/**
|
||||
* 多语言资源接口
|
||||
* @typedef GridLanguages
|
||||
* @property {string} [all] - ( All )
|
||||
* @property {string} [ok] - OK
|
||||
* @property {string} [reset] - Reset
|
||||
* @property {string} [cancel] - Cancel
|
||||
* @property {string} [null] - ( Null )
|
||||
* @property {string} [addLevel] - Add Level
|
||||
* @property {string} [deleteLevel] - Delete Level
|
||||
* @property {string} [copyLevel] - Copy Level
|
||||
* @property {string} [asc] - Ascending
|
||||
* @property {string} [desc] - Descending
|
||||
* @property {string} [column] - Column
|
||||
* @property {string} [order] - Order
|
||||
* @property {string} [sort] - Sort
|
||||
* @property {string} [requirePrompt] - All sort criteria must have a column specified. Check the selected sort criteria and try again.
|
||||
* @property {string} [duplicatePrompt] - {column} is being sorted more than once. Delete the duplicate sort criteria and try again.
|
||||
* @interface
|
||||
*/
|
||||
|
||||
/**
|
||||
* 列排序定义接口
|
||||
* @typedef GridColumnSortDefinition
|
||||
* @property {string} column - 排序列的关键字
|
||||
* @property {("asc" | "desc")} order - 升序或降序
|
||||
* @interface
|
||||
*/
|
||||
|
||||
/**
|
||||
* 扩展行对象接口
|
||||
* @typedef GridExpandableObject
|
||||
* @property {HTMLElement} element - 扩展行元素
|
||||
* @interface
|
||||
*/
|
||||
|
||||
/**
|
||||
@ -732,45 +497,6 @@ const GridColumnDirection = {
|
||||
* 函数调用流程图<br/>
|
||||
* <img src="./assets/grid.jpg" alt="Grid"/>
|
||||
* @class
|
||||
* @property {GridColumnDefinition[]} columns - 列定义的数组
|
||||
* @property {GridRowItem} [total] - 合计行数据
|
||||
* @property {any} [langs] - 多语言资源对象
|
||||
* @property {string} [langs.all=( All )]
|
||||
* @property {string} [langs.ok=OK]
|
||||
* @property {string} [langs.reset=Reset]
|
||||
* @property {string} [langs.cancel=Cancel]
|
||||
* @property {string} [langs.null=( Null )]
|
||||
* @property {string} [langs.addLevel=Add Level]
|
||||
* @property {string} [langs.deleteLevel=Delete Level]
|
||||
* @property {string} [langs.copyLevel=Copy Level]
|
||||
* @property {string} [langs.asc=Ascending]
|
||||
* @property {string} [langs.desc=Descending]
|
||||
* @property {string} [langs.column=Column]
|
||||
* @property {string} [langs.order=Order]
|
||||
* @property {string} [langs.sort=Sort]
|
||||
* @property {string} [langs.requirePrompt=All sort criteria must have...]
|
||||
* @property {string} [langs.duplicatePrompt={column} is being sorted more than once...]
|
||||
* @property {number} [virtualCount=100] - 行数大于等于该值则启用虚模式
|
||||
* @property {boolean} [autoResize=true] - 未设置宽度的列自动调整列宽
|
||||
* @property {number} [rowHeight=36] - 表格行高
|
||||
* @property {number} [lineHeight=24] - 文本行高（多行文本列计算高度时使用）
|
||||
* @property {string} [filterIcon=filter] - 列头过滤图标，旧版本样式（横着三个点）需修改为 `"ellipsis-h"`
|
||||
* @property {number} [extraRows=0] - 列表底部留出额外的空白行
|
||||
* @property {number} [filterRowHeight=30] - 过滤条件列表的行高
|
||||
* @property {number} [height] - 列表高度值，为 0 时列表始终显示全部内容（自增高），为非数字或者小于 0 则根据容器高度来确定虚模式的渲染行数
|
||||
* @property {boolean} [multiSelect=false] - 是否允许多选
|
||||
* @property {boolean} [fullrowClick=true] - 为 `false` 时只有点击在单元格内才会选中行
|
||||
* @property {boolean} [tooltipDisabled=false] - 单元格 tooltip 是否禁用
|
||||
* @property {boolean} [headerVisible=true] - 列头是否显示
|
||||
* @property {(Window | HTMLElement)} [window=global] - 监听事件的窗口载体
|
||||
* @property {number} [sortIndex=-1] - 排序列的索引
|
||||
* @property {GridColumnDirection} [sortDirection=GridColumnDirection.Ascending] - 排序方式，正数升序，负数倒序
|
||||
* @property {GridColumnSortDefinition[]} [sortArray] - 排序列数组
|
||||
* @property {boolean} [expandable=false] - 是否支持点击扩展
|
||||
* @property {GridExpandableObjectCallback} [expandableGenerator] - 扩展行生成器
|
||||
* @property {Grid} expandableGenerator.{this} - 上下文为 Grid
|
||||
* @property {GridRowItem} expandableGenerator.item - 行数据对象
|
||||
* @property {GridExpandableObject} expandableGenerator.{returns} - 返回扩展行对象
|
||||
* @example <caption>基础示例</caption>
|
||||
* <div id="grid"></div>
|
||||
* @example
|
||||
@ -814,6 +540,7 @@ const GridColumnDirection = {
|
||||
* ];
|
||||
*/
|
||||
export class Grid {
|
||||
|
||||
/**
|
||||
* 内部引用变量
|
||||
* @private
|
||||
@ -1052,100 +779,10 @@ export class Grid {
|
||||
total = null;
|
||||
/**
|
||||
* 多语言资源对象
|
||||
* @type {GridLanguages}
|
||||
* @ignore
|
||||
*/
|
||||
langs = {
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "( All )"
|
||||
* @ignore
|
||||
*/
|
||||
all: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "OK"
|
||||
* @ignore
|
||||
*/
|
||||
ok: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "Reset"
|
||||
* @ignore
|
||||
*/
|
||||
reset: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "Cancel"
|
||||
* @ignore
|
||||
*/
|
||||
cancel: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "( Null )"
|
||||
* @ignore
|
||||
*/
|
||||
null: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "Add Level"
|
||||
* @ignore
|
||||
*/
|
||||
addLevel: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "Delete Level"
|
||||
* @ignore
|
||||
*/
|
||||
deleteLevel: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "Copy Level"
|
||||
* @ignore
|
||||
*/
|
||||
copyLevel: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "Ascending"
|
||||
* @ignore
|
||||
*/
|
||||
asc: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "Descending"
|
||||
* @ignore
|
||||
*/
|
||||
desc: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "Column"
|
||||
* @ignore
|
||||
*/
|
||||
column: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "Order"
|
||||
* @ignore
|
||||
*/
|
||||
order: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "Sort"
|
||||
* @ignore
|
||||
*/
|
||||
sort: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "All sort criteria must have a column specified. Check the selected sort criteria and try again."
|
||||
* @ignore
|
||||
*/
|
||||
requirePrompt: null,
|
||||
/**
|
||||
* @type {string}
|
||||
* @default "{column} is being sorted more than once. Delete the duplicate sort criteria and try again."
|
||||
* @ignore
|
||||
*/
|
||||
duplicatePrompt: null
|
||||
};
|
||||
langs = {};
|
||||
/**
|
||||
* 行数大于等于该值则启用虚模式
|
||||
* @type {number}
|
||||
@ -1372,29 +1009,33 @@ export class Grid {
|
||||
* @param {string} getText.id - 资源 ID
|
||||
* @param {string} [getText.def] - 默认资源
|
||||
* @param {string} getText.{returns} 返回的多语言
|
||||
* @property {GridColumnDefinition[]} columns - 列定义的数组
|
||||
* @property {GridRowItem} [total] - 合计行数据
|
||||
* @property {GridLanguages} [langs] - 多语言资源对象
|
||||
* @property {number} [virtualCount=100] - 行数大于等于该值则启用虚模式
|
||||
* @property {boolean} [autoResize=true] - 未设置宽度的列自动调整列宽
|
||||
* @property {number} [rowHeight=36] - 表格行高
|
||||
* @property {number} [lineHeight=24] - 文本行高（多行文本列计算高度时使用）
|
||||
* @property {string} [filterIcon=filter] - 列头过滤图标，旧版本样式（横着三个点）需修改为 `"ellipsis-h"`
|
||||
* @property {number} [extraRows=0] - 列表底部留出额外的空白行
|
||||
* @property {number} [filterRowHeight=30] - 过滤条件列表的行高
|
||||
* @property {number} [height] - 列表高度值，为 0 时列表始终显示全部内容（自增高），为非数字或者小于 0 则根据容器高度来确定虚模式的渲染行数
|
||||
* @property {boolean} [multiSelect=false] - 是否允许多选
|
||||
* @property {boolean} [fullrowClick=true] - 为 `false` 时只有点击在单元格内才会选中行
|
||||
* @property {boolean} [tooltipDisabled=false] - 单元格 tooltip 是否禁用
|
||||
* @property {boolean} [headerVisible=true] - 列头是否显示
|
||||
* @property {(Window | HTMLElement)} [window=global] - 监听事件的窗口载体
|
||||
* @property {number} [sortIndex=-1] - 排序列的索引
|
||||
* @property {GridColumnDirection} [sortDirection=GridColumnDirection.Ascending] - 排序方式，正数升序，负数倒序
|
||||
* @property {GridColumnSortDefinition[]} [sortArray] - 排序列数组
|
||||
* @property {boolean} [expandable=false] - 是否支持点击扩展
|
||||
* @property {GridExpandableObjectCallback} [expandableGenerator] - 扩展行生成器
|
||||
*/
|
||||
constructor(container, getText) {
|
||||
this._var.parent = typeof container === 'string' ? document.querySelector(container) : container;
|
||||
if (typeof getText === 'function') {
|
||||
r = getText;
|
||||
}
|
||||
this.langs = {
|
||||
all: r('allItem', '( All )'),
|
||||
ok: r('ok', 'OK'),
|
||||
reset: r('reset', 'Reset'),
|
||||
cancel: r('cancel', 'Cancel'),
|
||||
null: r('null', '( Null )'),
|
||||
addLevel: r('addLevel', 'Add level'),
|
||||
deleteLevel: r('deleteLevel', 'Delete level'),
|
||||
copyLevel: r('copyLevel', 'Copy level'),
|
||||
asc: r('asc', 'Ascending'),
|
||||
desc: r('desc', 'Descending'),
|
||||
column: r('column', 'Column'),
|
||||
order: r('order', 'Order'),
|
||||
sort: r('sort', 'Sort'),
|
||||
requirePrompt: r('requirePrompt', 'All sort criteria must have a column specified. Check the selected sort criteria and try again.'),
|
||||
duplicatePrompt: r('duplicatePrompt', '{column} is being sorted more than once. Delete the duplicate sort criteria and try again.')
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1812,6 +1453,25 @@ export class Grid {
|
||||
if (!Array.isArray(this.columns)) {
|
||||
throw new Error('no specified column definitions.');
|
||||
}
|
||||
if (Object.keys(this.langs).length === 0) {
|
||||
this.langs = {
|
||||
all: r('allItem', '( All )'),
|
||||
ok: r('ok', 'OK'),
|
||||
reset: r('reset', 'Reset'),
|
||||
cancel: r('cancel', 'Cancel'),
|
||||
null: r('null', '( Null )'),
|
||||
addLevel: r('addLevel', 'Add level'),
|
||||
deleteLevel: r('deleteLevel', 'Delete level'),
|
||||
copyLevel: r('copyLevel', 'Copy level'),
|
||||
asc: r('asc', 'Ascending'),
|
||||
desc: r('desc', 'Descending'),
|
||||
column: r('column', 'Column'),
|
||||
order: r('order', 'Order'),
|
||||
sort: r('sort', 'Sort'),
|
||||
requirePrompt: r('requirePrompt', 'All sort criteria must have a column specified. Check the selected sort criteria and try again.'),
|
||||
duplicatePrompt: r('duplicatePrompt', '{column} is being sorted more than once. Delete the duplicate sort criteria and try again.')
|
||||
};
|
||||
}
|
||||
this._var.el = null;
|
||||
this._var.refs = {};
|
||||
this._var.rendering = true;
|
||||
@ -1953,8 +1613,7 @@ export class Grid {
|
||||
* 调整 Grid 元素的大小，一般需要在宽度变化时（如页面大小发生变化时）调用
|
||||
* @param {boolean} [force] - 是否强制 [reload]{@linkcode Grid#reload}，默认只有待渲染的行数发生变化时才会调用
|
||||
* @param {boolean} [keep] - 是否保持当前滚动位置
|
||||
* @param {Function} [callback] - 计算大小后的回调函数
|
||||
* @param {Grid} callback.{this} - 上下文为 Grid
|
||||
* @param {Function} [callback] - 计算大小后的回调函数，上下文为 Grid
|
||||
*/
|
||||
resize(force, keep, callback) {
|
||||
if (this._var.rendering || this._var.el == null) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user