diff --git a/lib/ui/grid/column.js b/lib/ui/grid/column.js index 7b9a30a..9c02c29 100644 --- a/lib/ui/grid/column.js +++ b/lib/ui/grid/column.js @@ -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 | 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] - 列为下拉框类型时在下拉列表展开时触发的事件 - */ - /** * 列定义基类 * diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js index 4862c8a..2b2a2e2 100644 --- a/lib/ui/grid/grid.js +++ b/lib/ui/grid/grid.js @@ -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} */ +/** + * 数据项 + * @typedef ValueItem + * @property {any} Value - 值 + * @property {string} DisplayValue - 显示值 + * @property {boolean} [__checked] - 已选中 + * @interface + */ + /** * 行数据对象 * @typedef GridRowItem * @type {KeyMap} * @property {(ValueItem | any)} {key} - 数据项 + * @extends {KeyMap} + * @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; * * Column Types
* 代码参考页面下方的示例 - * @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 控件的 `` 部分 - * @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] - **已过时**
_根据返回值填充单元格样式(填充行列数据时读取)_ + * @property {GridItemObjectCallback} [styleFilter] - **已过时**
_根据返回值填充单元格样式(填充行列数据时读取)_ * @property {(string | GridItemStringCallback)} [background] - 设置单元格背景色(填充行列数据时读取),支持直接设置颜色字符串或调用函数返回(若赋值则忽略 [bgFilter]{@linkcode GridColumnDefinition#bgFilter}) - * @property {GridColumnDefinition} background.{this} - 上下文为列定义对象 - * @property {GridRowItem} background.item - 行数据对象 - * @property {string} background.{returns} - 返回单元格背景色字符串 - * @property {(@deprecated)} [bgFilter] - **已过时**
_根据返回值设置单元格背景色_ + * @property {GridItemStringCallback} [bgFilter] - **已过时**
_根据返回值设置单元格背景色_ * @property {KeyMap} [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 | GridDropdownSourceCallback)} [source] - 列为下拉列表类型时以该值设置下拉列表数据源,支持返回异步对象,也支持如下函数返回 - * @property {GridRowItem} source.item - 行数据对象 - * @property {GridSourceItem[]} source.{returns} - 返回行下拉列表数据源 + * @property {(GridSourceItem[] | Promise | 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; - /** - * **已过时**
_根据返回值填充单元格样式(填充行列数据时读取)_ - * @type {GridItemObjectCallback} - * @ignore - * @deprecated - */ - styleFilter; - /** - * 设置单元格背景色(填充行列数据时读取),支持直接设置颜色字符串或调用函数返回(若赋值则忽略 [bgFilter]{@linkcode GridColumnDefinition#bgFilter}) - * @type {(string | GridItemStringCallback)} - * @ignore - */ - background; - /** - * **已过时**
_根据返回值设置单元格背景色_ - * @type {GridItemStringCallback} - * @ignore - * @deprecated - */ - bgFilter; - /** - * 给单元格元素附加事件(事件函数上下文为数据行对象) - * @type {KeyMap} - * @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 | 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 = { * 函数调用流程图
* 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 基础示例 *
* @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) {