![\"Column](\"./assets/column-refresh.jpg\")
\r\n * @class\r\n * @static\r\n * @hideconstructor\r\n */\r\nexport class GridColumn {\r\n /**\r\n * 该属性返回 `true` 后，在任意事件中修改行包装对象的 `__editing` 值，则会在行列元素变动时及时触发 [onChanged]{@linkcode GridColumnDefinition#onChanged} 方法，避免例如文本框和日期框还未触发事件就被移除元素而导致的问题\r\n * @member\r\n * @name GridColumn.editing\r\n * @readonly\r\n * @type {boolean}\r\n * @see 更多例子参考 {@linkcode GridInputColumn} {@linkcode GridDateColumn} 中的代码实现\r\n */\r\n\r\n /**\r\n * 标记该类型是否可编辑\r\n * @member\r\n * @name GridColumn.canEdit\r\n * @readonly\r\n * @type {boolean}\r\n */\r\n\r\n /**\r\n * 创建显示单元格时调用的方法\r\n * @param {GridColumnDefinition} col - 列定义对象\r\n * @param {number} index - 行元素索引（需要配合 [startIndex]{@linkcode Grid#startIndex} 相加得到真实数据索引）\r\n * @param {Grid} grid - Grid 实例\r\n * @returns {HTMLElement} 返回创建的单元格元素\r\n * @virtual\r\n */\r\n static create() {\r\n return createElement('span');\r\n }\r\n\r\n /**\r\n * 创建编辑单元格时调用的方法\r\n * \r\n * 元素修改后设置行包装对象的 `__editing` 后，支持在离开编辑状态时及时触发 [leaveEdit]{@linkcode GridColumn.leaveEdit} 方法![\"Column](\"./assets/column-types.png\")
\r\n * 代码参考页面下方的示例\r\n * @typedef GridColumnDefinition\r\n * @property {string} key - 列关键字，默认以该关键字从行数据中提取单元格值，行数据的关键字属性值里包含 DisplayValue 则优先显示此值\r\n * @property {(GridColumnTypeEnum | GridColumn)} [type=Grid.ColumnTypes.Common] - 列的类型，可以为 {@linkcode GridColumn} 的子类，或者如下内置类型 {@linkcode Grid.ColumnTypes}\r\n * * Grid.ColumnTypes.Common - 0: 通用列（只读）\r\n * * Grid.ColumnTypes.Input - 1: 单行文本列\r\n * * Grid.ColumnTypes.Dropdown - 2: 下拉选择列\r\n * * Grid.ColumnTypes.Checkbox - 3: 复选框列\r\n * * Grid.ColumnTypes.Icon - 4: 图标列\r\n * * Grid.ColumnTypes.Text - 5: 多行文本列\r\n * * Grid.ColumnTypes.Date - 6: 日期选择列\r\n * * Grid.ColumnTypes.Radio - 7: 单选框列\r\n * @property {string} [caption] - 列标题文本\r\n * @property {any} [captionStyle] - 列标题的元素样式\r\n * @property {string} [captionTooltip] - 列标题的帮助文本\r\n * @property {number} [width] - 大于 0 则设置为该宽度，否则根据列内容自动调整列宽\r\n * @property {(\"left\" |\"center\" | \"right\")} [align=left] 列对齐方式\r\n * @property {(boolean | string | GridItemBooleanCallback)} [enabled] - 列是否可用（可编辑），允许以下类型\r\n * \r\n * * `boolean` 则直接使用该值\r\n * * `string` 则以该值为关键字从行数据中取值作为判断条件\r\n * * `GridItemBooleanCallback` 则调用回调，以返回值作为判断条件\r\n * @property {GridItemFilterCallback} [filter] - 单元格取值采用该函数返回的值\r\n * @property {string} [text] - 单元格以该值填充内容，忽略filter与关键字属性\r\n * @property {boolean} [visible=true] - 列是否可见\r\n * @property {boolean} [resizable=true] - 列是否允许调整宽度\r\n * @property {boolean} [sortable=true] - 列是否允许排序\r\n * @property {boolean} [orderable=true] - 列是否允许重排顺序\r\n * @property {boolean} [allcheck=false] - 列为复选框类型时是否在列头增加全选复选框\r\n * @property {boolean} [shrink=false] - 列为收缩列，禁用自动调整大小\r\n * @property {string} [class] - 单元格元素的额外样式类型字符串（仅在重建行元素时设置）\r\n * @property {boolean} [contentWrap=false] - 单元格文本是否换行（仅在重建行元素时设置）\r\n * @property {number} [maxLines=0] - 大于 0 时限制显示最大行数\r\n * @property {any} [css] - 单元格css样式对象（仅在重建行元素时读取）\r\n * @property {any} [totalCss] - 合计行样式（仅在重建合计行元素时读取）\r\n * @property {(any | GridItemObjectCallback)} [style] - 单元格样式（填充行列数据时读取），支持直接返回样式对象或调用函数返回（若赋值则忽略 [styleFilter]{@linkcode GridColumnDefinition#styleFilter}）\r\n * @property {GridItemObjectCallback} [styleFilter] - **已过时**
_根据返回值填充单元格样式（填充行列数据时读取）_\r\n * @property {(string | GridItemStringCallback)} [background] - 设置单元格背景色（填充行列数据时读取），支持直接设置颜色字符串或调用函数返回（若赋值则忽略 [bgFilter]{@linkcode GridColumnDefinition#bgFilter}）\r\n * @property {GridItemStringCallback} [bgFilter] - **已过时**
_根据返回值设置单元格背景色_\r\n * @property {KeyMap
![\"Grid](\"./assets/grid-sample.png\")
\r\n * 函数调用流程图
\r\n *
![\"Grid\"/](\"./assets/grid.jpg\")
\r\n * @class\r\n * @example _**构造时可以不进行赋值，但是调用 init 函数时则必须进行赋值**_\r\n * @param {Function} [getText] 获取多语言文本的函数代理\r\n * @param {string} getText.id - 资源 ID\r\n * @param {string} [getText.def] - 默认资源\r\n * @param {string} getText.{returns} 返回的多语言\r\n * @property {GridColumnDefinition[]} columns - 列定义的数组\r\n * @property {GridLanguages} [langs] - 多语言资源对象\r\n * @property {number} [virtualCount=100] - 行数大于等于该值则启用虚模式\r\n * @property {boolean} [autoResize=true] - 未设置宽度的列自动调整列宽\r\n * @property {number} [rowHeight=36] - 表格行高\r\n * @property {number} [lineHeight=18] - 文本行高（多行文本列计算高度时使用）\r\n * @property {string} [filterIcon=ellipsis-h] - 列头未过滤时的图标\r\n * @property {string} [filteredIcon=filter] - 列头已过滤时的图标\r\n * @property {number} [extraRows=0] - 列表底部留出额外的空白行\r\n * @property {number} [filterRowHeight=30] - 过滤条件列表的行高\r\n * @property {number} [height] - 列表高度值，为 0 时列表始终显示全部内容（自增高），为非数字或者小于 0 则根据容器高度来确定虚模式的渲染行数\r\n * @property {boolean} [multiSelect=false] - 是否允许多选\r\n * @property {boolean} [fullrowClick=true] - 为 `false` 时只有点击在单元格内才会选中行\r\n * @property {boolean} [tooltipDisabled=false] - 单元格 tooltip 是否禁用\r\n * @property {boolean} [headerVisible=true] - 列头是否显示\r\n * @property {boolean} [headerWrap=true] - 列头是否允许换行\r\n * @property {(Window | HTMLElement)} [window=global] - 监听事件的窗口载体\r\n * @property {number} [sortIndex=-1] - 排序列的索引\r\n * @property {GridColumnDirection} [sortDirection=GridColumnDirection.Ascending] - 排序方式，正数升序，负数倒序\r\n * @property {GridColumnSortDefinition[]} [sortArray] - 排序列数组\r\n * @property {boolean} [expandable=false] - 是否支持点击扩展\r\n * @property {GridExpandableObjectCallback} [expandableGenerator] - 扩展行生成器\r\n */\r\n constructor(container, getText) {\r\n this._var.parent = typeof container === 'string' ? document.querySelector(container) : container;\r\n if (typeof getText === 'function') {\r\n r = getText;\r\n }\r\n }\r\n\r\n /**\r\n * 获取 Grid 的页面元素\r\n * @readonly\r\n * @type {HTMLDivElement}\r\n */\r\n get element() { return this._var.el }\r\n\r\n /**\r\n * 获取当前 Grid 是否已发生改变\r\n * @readonly\r\n * @type {boolean}\r\n */\r\n get changed() {\r\n const source = this._var.source;\r\n if (source == null) {\r\n return false;\r\n }\r\n return source.find(r => r.__changed) != null;\r\n }\r\n\r\n /**\r\n * 返回所有数据的数据（未过滤）\r\n * @readonly\r\n * @type {GridRowItem[]}\r\n */\r\n get allSource() { return this._var.source?.map(s => s.values) }\r\n\r\n /**\r\n * 获取已过滤的数据中的扩展对象数组\r\n * @readonly\r\n * @type {GridExpandableObject[]}\r\n * @property {HTMLElement} element - 扩展行元素\r\n */\r\n get sourceExpandable() { return this._var.currentSource?.map(s => s.__expandable_object) }\r\n\r\n /**\r\n * 获取当前是否为虚模式状态\r\n * @readonly\r\n * @type {boolean}\r\n */\r\n get virtual() { return this._var.currentSource?.length > this.virtualCount }\r\n\r\n /**\r\n * 获取当前排序的列关键字，为 null 则当前无排序列\r\n * @readonly\r\n * @type {string | null}\r\n */\r\n get sortKey() {\r\n if (this.columns == null) {\r\n return null;\r\n }\r\n return this.columns[this.sortIndex]?.key;\r\n }\r\n\r\n /**\r\n * @private\r\n * @type {HTMLTableRowElement[]}\r\n */\r\n get _tableRows() {\r\n // return [...this._var.refs.body.children];\r\n return Array.prototype.slice.call(this._var.refs.body.querySelectorAll('&>.ui-grid-row'));\r\n }\r\n\r\n /**\r\n * @private\r\n * @type {HTMLTableCellElement[]}\r\n */\r\n get _headerCells() {\r\n return Array.prototype.slice.call(this._var.refs.header.querySelectorAll('&>th.column'));\r\n }\r\n\r\n /**\r\n * @private\r\n * @type {HTMLTableCellElement[]}\r\n */\r\n get _footerCells() {\r\n return Array.prototype.slice.call(this._var.refs.footer.querySelectorAll('&>.ui-grid-cell'));\r\n }\r\n\r\n /**\r\n * 获取虚模式起始索引\r\n * @readonly\r\n * @type {number}\r\n */\r\n get startIndex() { return this._var.startIndex }\r\n\r\n /**\r\n * 获取当前选中行的索引，为 -1 则当前没有选中行\r\n * @readonly\r\n * @type {number}\r\n */\r\n get selectedIndex() { return (this._var.selectedIndexes && this._var.selectedIndexes[0]) ?? -1 }\r\n\r\n /**\r\n * 获取或设置 Grid 是否为只读\r\n * @type {boolean}\r\n */\r\n get readonly() { return this._var.readonly === true }\r\n set readonly(flag) {\r\n this._var.readonly = flag;\r\n this.refresh();\r\n }\r\n\r\n /**\r\n * 获取已过滤的数据数组，或者设置数据并刷新列表\r\n * @type {GridRowItem[]}\r\n */\r\n get source() { return this._var.currentSource?.map(s => s.values) }\r\n set source(list) {\r\n if (!Array.isArray(list)) {\r\n throw new Error('source is not an Array.')\r\n }\r\n list = list.map((it, index) => {\r\n return {\r\n __index: index,\r\n values: it\r\n };\r\n });\r\n this._var.source = list;\r\n this._var.scrollLeft = 0;\r\n if (this._var.el != null) {\r\n this._var.el.scrollLeft = 0;\r\n }\r\n this._refreshSource(list);\r\n }\r\n\r\n /**\r\n * 获取或设置合计行数据\r\n * @type {GridRowItem}\r\n * @since 1.0.1\r\n */\r\n get total() { return this._var.total }\r\n set total(total) {\r\n this._var.total = total;\r\n this.reload(true);\r\n }\r\n\r\n /**\r\n * 获取或设置当前选中的行索引的数组，设置后会刷新列表\r\n * @type {number[]}\r\n */\r\n get selectedIndexes() { return this._var.selectedIndexes }\r\n set selectedIndexes(indexes) {\r\n const startIndex = this._var.startIndex;\r\n this._var.selectedIndexes.splice(0, this._var.selectedIndexes.length, ...indexes);\r\n if (this.readonly) {\r\n this._tableRows.forEach((row, i) => {\r\n if (indexes.includes(startIndex + i)) {\r\n row.classList.add('selected');\r\n } else if (row.classList.contains('selected')) {\r\n row.classList.remove('selected');\r\n }\r\n });\r\n } else {\r\n this.refresh();\r\n }\r\n if (typeof this.onSelectedRowChanged === 'function') {\r\n this.onSelectedRowChanged();\r\n }\r\n }\r\n\r\n /**\r\n * 获取或设置 Grid 当前的加载状态\r\n * @type {boolean}\r\n */\r\n get loading() { return this._var.refs.loading?.style?.visibility === 'visible' }\r\n set loading(flag) {\r\n if (this._var.refs.loading == null) {\r\n return;\r\n }\r\n if (flag === false) {\r\n this._var.refs.loading.style.visibility = 'hidden';\r\n this._var.refs.loading.style.opacity = 0;\r\n } else {\r\n this._var.refs.loading.style.visibility = 'visible';\r\n this._var.refs.loading.style.opacity = 1;\r\n }\r\n }\r\n\r\n /**\r\n * 获取或设置 Grid 当前滚动的偏移量\r\n * @type {number}\r\n */\r\n get scrollTop() { return this._var.el?.scrollTop; }\r\n set scrollTop(top) {\r\n if (this._var.el == null) {\r\n return;\r\n }\r\n this._var.el.scrollTop = top;\r\n this.reload(true);\r\n }\r\n\r\n /**\r\n * 初始化Grid控件\r\n * @param {HTMLElement} [container=.ctor#container] - 父容器元素，若未传值则采用构造方法中传入的父容器元素\r\n */\r\n init(container = this._var.parent) {\r\n if (container == null) {\r\n throw new Error('no specified parent.');\r\n }\r\n if (!(container instanceof HTMLElement)) {\r\n const ele = container[0];\r\n if (!(ele instanceof HTMLElement)) {\r\n throw new Error(`parent type not supported. ${JSON.stringify(Object.getPrototypeOf(container))}`);\r\n }\r\n container = ele;\r\n }\r\n if (!Array.isArray(this.columns)) {\r\n throw new Error('no specified column definitions.');\r\n }\r\n if (Object.keys(this.langs).length === 0) {\r\n this.langs = {\r\n all: r('allItem', '( All )'),\r\n ok: r('ok', 'OK'),\r\n reset: r('reset', 'Reset'),\r\n cancel: r('cancel', 'Cancel'),\r\n null: r('null', '( Null )'),\r\n addLevel: r('addLevel', 'Add level'),\r\n deleteLevel: r('deleteLevel', 'Delete level'),\r\n copyLevel: r('copyLevel', 'Copy level'),\r\n asc: r('asc', 'Ascending'),\r\n desc: r('desc', 'Descending'),\r\n column: r('column', 'Column'),\r\n order: r('order', 'Order'),\r\n sort: r('sort', 'Sort'),\r\n requirePrompt: r('requirePrompt', 'All sort criteria must have a column specified. Check the selected sort criteria and try again.'),\r\n duplicatePrompt: r('duplicatePrompt', '{column} is being sorted more than once. Delete the duplicate sort criteria and try again.')\r\n };\r\n }\r\n this._var.el = null;\r\n this._var.refs = {};\r\n this._var.rendering = true;\r\n this._var.parent = container;\r\n this._var.isFirefox = /Firefox\\//i.test(navigator.userAgent);\r\n this._var.enabledDict = {};\r\n const grid = createElement('div', 'ui-grid');\r\n grid.setAttribute('tabindex', 0);\r\n grid.addEventListener('keydown', e => {\r\n let index = this.selectedIndex;\r\n let flag = false;\r\n if (e.key === 'ArrowUp') {\r\n // up\r\n if (index > 0) {\r\n flag = true;\r\n index -= 1;\r\n }\r\n } else if (e.key === 'ArrowDown') {\r\n // down\r\n const count = this._var.currentSource?.length ?? 0;\r\n if (index < count - 1) {\r\n flag = true;\r\n index += 1;\r\n }\r\n }\r\n if (flag) {\r\n this._var.selectedIndexes = [index];\r\n this.scrollToIndex(index);\r\n this.refresh();\r\n if (typeof this.onSelectedRowChanged === 'function') {\r\n this.onSelectedRowChanged(index);\r\n }\r\n e.stopPropagation();\r\n }\r\n });\r\n grid.addEventListener('mousedown', e => {\r\n if (e.target === this._var.el) {\r\n // cancel selections\r\n const selectedIndexes = this._var.selectedIndexes;\r\n if (selectedIndexes == null || selectedIndexes.length === 0) {\r\n return;\r\n }\r\n selectedIndexes.splice(0);\r\n if (this.readonly) {\r\n this._tableRows.forEach(row => {\r\n row.classList.remove('selected');\r\n });\r\n } else {\r\n this.refresh();\r\n }\r\n if (typeof this.onSelectedRowChanged === 'function') {\r\n this.onSelectedRowChanged(-1);\r\n }\r\n this._var.selectedColumnIndex = -1;\r\n return;\r\n }\r\n let [parent, target] = this._getRowTarget(e.target);\r\n if (parent == null) {\r\n return;\r\n }\r\n const rowIndex = parent.classList.contains('ui-grid-total-row') ? -1 : this._tableRows.indexOf(parent);\r\n let colIndex = indexOfParent(target) - (this.expandable ? 1 : 0);\r\n if (colIndex >= this.columns.length) {\r\n colIndex = -1;\r\n }\r\n this._onRowClicked(e, rowIndex, colIndex);\r\n });\r\n container.replaceChildren(grid);\r\n const sizer = createElement('span', 'ui-grid-sizer');\r\n grid.appendChild(sizer);\r\n this._var.refs.sizer = sizer;\r\n\r\n grid.addEventListener('scroll', e => throttle(this._onScroll, RefreshInterval, this, e), { passive: true });\r\n\r\n // header & body\r\n const wrapper = createElement('div', 'ui-grid-wrapper');\r\n this._var.refs.wrapper = wrapper;\r\n grid.appendChild(wrapper);\r\n const table = createElement('table', 'ui-grid-table');\r\n this._var.refs.table = table;\r\n this._createHeader(table);\r\n this._createBody(table);\r\n this._createFooter(table);\r\n wrapper.appendChild(table);\r\n // tooltip\r\n if (!this.tooltipDisabled) {\r\n const holder = createElement('div', 'ui-grid-hover-holder');\r\n holder.addEventListener('mousedown', e => {\r\n const holder = e.currentTarget;\r\n const row = Number(holder.dataset.row);\r\n const col = Number(holder.dataset.col);\r\n if (holder.classList.contains('active')) {\r\n holder.classList.remove('active');\r\n this._clearHolder(holder);\r\n }\r\n return this._onRowClicked(e, row, col);\r\n });\r\n holder.addEventListener('dblclick', e => this._onRowDblClicked(e));\r\n wrapper.appendChild(holder);\r\n grid.addEventListener('mousemove', e => throttle(this._onGridMouseMove, HoverInternal, this, e, holder), { passive: true });\r\n }\r\n\r\n // loading\r\n const loading = createElement('div', 'ui-grid-loading',\r\n createElement('div', null, createIcon('fa-regular', 'spinner-third'))\r\n );\r\n this._var.refs.loading = loading;\r\n grid.appendChild(loading);\r\n this._var.el = grid;\r\n\r\n this._var.rendering = false;\r\n if (this._var.source != null) {\r\n if (this.sortIndex >= 0) {\r\n this.sortColumn(true);\r\n } else if (this.sortArray?.length > 0) {\r\n this.sort(true);\r\n } else {\r\n this.resize(true);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * 设置数据列表，该方法为 [source]{@linkcode Grid#source} 属性的语法糖\r\n * @param {GridRowItem[]} source - 待设置的数据列表\r\n */\r\n setData(source) {\r\n this.source = source;\r\n }\r\n\r\n /**\r\n * 滚动到指定行的位置\r\n * @param {number} index - 待滚动至的行索引\r\n */\r\n scrollToIndex(index) {\r\n const top = this._scrollToTop(index * (this.rowHeight + 1), true);\r\n this._var.el.scrollTop = top;\r\n }\r\n\r\n /**\r\n * 调整 Grid 元素的大小，一般需要在宽度变化时（如页面大小发生变化时）调用\r\n * @param {boolean} [force] - 是否强制 [reload]{@linkcode Grid#reload}，默认只有待渲染的行数发生变化时才会调用\r\n * @param {boolean} [keep] - 是否保持当前滚动位置\r\n * @param {Function} [callback] - 计算大小后的回调函数，上下文为 Grid\r\n */\r\n resize(force, keep, callback) {\r\n if (this._var.rendering || this._var.el == null) {\r\n return;\r\n }\r\n const body = this._var.refs.body;\r\n const top = this.headerVisible === false ? 0 : (this._var.refs.header.offsetHeight || this.rowHeight);\r\n\r\n let height = this.height;\r\n if (height === 0) {\r\n height = this._var.containerHeight;\r\n } else if (isNaN(height) || height < 0) {\r\n height = this._var.el.offsetHeight - top;\r\n }\r\n const count = truncate((height - 1) / (this.rowHeight + 1)) + (RedumCount * 2) + 1;\r\n if (force || count !== this._var.rowCount) {\r\n this._var.rowCount = count;\r\n if (typeof callback === 'function') {\r\n callback.call(this);\r\n } else {\r\n this.reload(keep);\r\n }\r\n }\r\n this._var.wrapClientWidth = this._var.refs.wrapper.clientWidth;\r\n this._var.bodyClientWidth = body.clientWidth;\r\n }\r\n\r\n /**\r\n * 重新计算需要渲染的行，并载入元素，一般需要在高度变化时调用\r\n * @param {boolean} [keep] - 是否保持当前滚动位置\r\n */\r\n reload(keep) {\r\n if (this._var.rendering || this._var.el == null) {\r\n return;\r\n }\r\n const filtered = this.columns.some(c => c.filterValues != null);\r\n if ((filtered ^ this._var.colAttrs.__filtered) === 1) {\r\n this._var.colAttrs.__filtered = filtered;\r\n const headers = this._headerCells;\r\n for (let i = 0; i < this.columns.length; ++i) {\r\n const ele = headers[i].querySelector('.filter');\r\n if (ele == null) {\r\n continue;\r\n }\r\n if (this.columns[i].filterValues != null) {\r\n ele.replaceChildren(createIcon('fa-solid', this.filteredIcon));\r\n ele.classList.add('active');\r\n } else {\r\n ele.replaceChildren(createIcon('fa-solid', this.filterIcon));\r\n ele.classList.remove('active');\r\n }\r\n }\r\n this._refreshSource();\r\n return;\r\n } else if (filtered) {\r\n const headers = this._headerCells;\r\n for (let i = 0; i < this.columns.length; ++i) {\r\n const ele = headers[i].querySelector('.filter');\r\n if (ele == null) {\r\n continue;\r\n }\r\n if (this.columns[i].filterValues != null) {\r\n ele.replaceChildren(createIcon('fa-solid', this.filteredIcon));\r\n ele.classList.add('active');\r\n } else {\r\n ele.replaceChildren(createIcon('fa-solid', this.filterIcon));\r\n ele.classList.remove('active');\r\n }\r\n }\r\n }\r\n let length = this._var.currentSource?.length ?? 0;\r\n if (this.extraRows > 0) {\r\n length += this.extraRows;\r\n }\r\n this._var.containerHeight = length * (this.rowHeight + 1);\r\n if (!keep) {\r\n this._var.scrollTop = 0;\r\n this._var.startIndex = 0;\r\n this._var.el.scrollTop = 0;\r\n this._var.refs.table.style.top = '0px';\r\n }\r\n this._adjustRows(this._var.refs.body);\r\n this.refresh();\r\n // size adjustment\r\n const headerHeight = this._var.headerHeight || this.rowHeight;\r\n if (this.total != null) {\r\n const footerHeight = this._var.footerHeight || this.rowHeight;\r\n this._var.refs.wrapper.style.height = `${headerHeight + this._var.containerHeight + footerHeight}px`;\r\n // footer position\r\n this._var.footerOffset = this._var.refs.table.offsetHeight - this._var.el.clientHeight;\r\n this._var.refs.footer.parentElement.style.bottom = `${this._var.refs.table.offsetTop + this._var.footerOffset - this._var.el.scrollTop}px`;\r\n } else {\r\n this._var.refs.wrapper.style.height = `${headerHeight + this._var.containerHeight}px`;\r\n }\r\n }\r\n\r\n /**\r\n * 重新填充Grid单元格数据\r\n */\r\n refresh() {\r\n if (this._var.refs.body == null) {\r\n throw new Error('body has not been created.');\r\n }\r\n const widths = {};\r\n this._fillRows(this._tableRows, this.columns, widths);\r\n if (this._var.needResize && widths.flag) {\r\n this._var.needResize = false;\r\n this.columns.forEach((col, i) => {\r\n if (!this._get(col.key, 'autoResize')) {\r\n return;\r\n }\r\n let width = widths[i];\r\n if (width < col.width) {\r\n width = col.width;\r\n }\r\n if (width > 0) {\r\n this._changeColumnWidth(i, width, true);\r\n }\r\n });\r\n }\r\n this._layoutHeaderFooter();\r\n }\r\n\r\n /**\r\n * 把所有行重置为未修改的状态\r\n */\r\n resetChange() {\r\n if (this._var.source == null) {\r\n return;\r\n }\r\n for (let row of this._var.source) {\r\n delete row.__changed;\r\n }\r\n }\r\n\r\n /**\r\n * 根据当前排序字段进行列排序\r\n * @param {boolean} [reload] - 为 `true` 则在列排序后调用 [reload]{@linkcode Grid#reload} 方法\r\n */\r\n sortColumn(reload) {\r\n const index = this.sortIndex;\r\n const col = this.columns[index];\r\n if (col == null) {\r\n return;\r\n }\r\n this.sortArray = null;\r\n const direction = this.sortDirection;\r\n [...this._headerCells].forEach((th, i) => {\r\n const arrow = th.querySelector('.arrow');\r\n if (arrow == null) {\r\n return;\r\n }\r\n if (i === index) {\r\n arrow.className = `arrow ${(direction !== 1 ? 'desc' : 'asc')}`;\r\n } else if (arrow.className !== 'arrow') {\r\n arrow.className = 'arrow';\r\n }\r\n });\r\n const comparer = this._getComparer(col, direction);\r\n this._var.source.sort(comparer);\r\n if (this._var.colAttrs.__filtered === true) {\r\n this._var.currentSource.sort(comparer);\r\n }\r\n if (this._var.rowCount < 0) {\r\n return;\r\n }\r\n if (reload) {\r\n this.reload();\r\n } else {\r\n this.refresh();\r\n }\r\n }\r\n\r\n /**\r\n * 根据当前排序列数组进行多列排序\r\n * @param {boolean} [reload] - 为 `true` 则在多列排序后调用 [reload]{@linkcode Grid#reload} 方法\r\n */\r\n sort(reload) {\r\n const sortArray = this.sortArray;\r\n if (sortArray == null || sortArray.length === 0) {\r\n return;\r\n }\r\n this.sortIndex = -1;\r\n const comparer = (a, b) => {\r\n for (let i = 0; i < sortArray.length; ++i) {\r\n const s = sortArray[i];\r\n const col = this.columns.find(c => c.key === s.column && c.visible !== false);\r\n if (col != null) {\r\n const result = this._getComparer(col, s.order === 'desc' ? -1 : 1)(a, b);\r\n if (result !== 0) {\r\n return result;\r\n }\r\n }\r\n }\r\n return 0;\r\n };\r\n this._var.source.sort(comparer);\r\n if (this._var.colAttrs.__filtered === true) {\r\n this._var.currentSource.sort(comparer);\r\n }\r\n if (this._var.rowCount < 0) {\r\n return;\r\n }\r\n if (reload) {\r\n this.reload();\r\n } else {\r\n this.refresh();\r\n }\r\n // arrow icon\r\n [...this._headerCells].forEach((th, i) => {\r\n const arrow = th.querySelector('.arrow');\r\n if (arrow == null) {\r\n return;\r\n }\r\n const col = this.columns[i];\r\n const s = sortArray.find(s => s.column === col.key && col.visible !== false);\r\n if (s != null) {\r\n arrow.className = `arrow ${s.order}`;\r\n } else if (arrow.className !== 'arrow') {\r\n arrow.className = 'arrow';\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * 清除列头复选框的选中状态\r\n */\r\n clearHeaderCheckbox() {\r\n const boxes = this._var.refs.header.querySelectorAll('.ui-check-wrapper>input');\r\n boxes.forEach(box => box.checked = false);\r\n }\r\n\r\n /**\r\n * 显示多列排序设置面板\r\n * @since 1.0.1\r\n */\r\n showSortPanel() {\r\n const content = createElement('div', 'ui-sort-panel-content');\r\n const buttonWrapper = createElement('div', 'ui-sort-panel-buttons');\r\n const grid = new Grid(null, r);\r\n grid.langs = this.langs;\r\n const rowChanged = index => {\r\n buttonWrapper.querySelector('.ui-button-delete').disabled = index < 0;\r\n buttonWrapper.querySelector('.ui-button-copy').disabled = index < 0;\r\n buttonWrapper.querySelector('.ui-button-move-up').disabled = index < 1;\r\n buttonWrapper.querySelector('.ui-button-move-down').disabled = index >= grid.source.length - 1;\r\n };\r\n grid.onSelectedRowChanged = rowChanged;\r\n const reload = index => {\r\n grid.selectedIndexes = [index];\r\n grid.scrollTop = index * (grid.rowHeight + 1);\r\n rowChanged(index);\r\n }\r\n buttonWrapper.append(\r\n createElement('span', 'button',\r\n createIcon('fa-light', 'plus'),\r\n createElement('span', span => {\r\n span.innerText = this.langs.addLevel;\r\n span.addEventListener('click', () => {\r\n let index = grid.selectedIndex;\r\n const n = { column: '', order: 'asc' };\r\n if (index >= 0) {\r\n index += 1;\r\n grid.addItem(n, index);\r\n } else {\r\n grid.addItem(n);\r\n index = grid.source.length - 1;\r\n }\r\n reload(index);\r\n });\r\n })\r\n ),\r\n createElement('span', 'button ui-button-delete',\r\n createIcon('fa-light', 'times'),\r\n createElement('span', span => {\r\n span.innerText = this.langs.deleteLevel;\r\n span.addEventListener('click', () => {\r\n let index = grid.selectedIndex;\r\n if (index < 0) {\r\n return;\r\n }\r\n grid.removeItem(index);\r\n const length = grid.source.length;\r\n if (index >= length) {\r\n index = length - 1;\r\n }\r\n reload(index);\r\n });\r\n })\r\n ),\r\n createElement('span', 'button ui-button-copy',\r\n createIcon('fa-light', 'copy'),\r\n createElement('span', span => {\r\n span.innerText = this.langs.copyLevel;\r\n span.addEventListener('click', () => {\r\n const index = grid.selectedIndex;\r\n if (index < 0) {\r\n return;\r\n }\r\n const item = grid.source[index];\r\n if (item == null) {\r\n return;\r\n }\r\n grid.addItem(Object.assign({}, item), index + 1);\r\n reload(index + 1);\r\n });\r\n })\r\n ),\r\n createElement('span', button => {\r\n button.className = 'button ui-button-move-up';\r\n const icon = createIcon('fa-light', 'chevron-up');\r\n icon.addEventListener('click', () => {\r\n const index = grid.selectedIndex;\r\n if (index < 1) {\r\n return;\r\n }\r\n const item = grid.source[index];\r\n if (item == null) {\r\n return;\r\n }\r\n const it = grid.removeItem(index);\r\n grid.addItem(it, index - 1);\r\n reload(index - 1);\r\n });\r\n button.appendChild(icon);\r\n }),\r\n createElement('span', button => {\r\n button.className = 'button ui-button-move-down';\r\n const icon = createIcon('fa-light', 'chevron-down');\r\n icon.addEventListener('click', () => {\r\n const index = grid.selectedIndex;\r\n if (index >= grid.source.length - 1) {\r\n return;\r\n }\r\n const item = grid.source[index];\r\n if (item == null) {\r\n return;\r\n }\r\n const it = grid.removeItem(index);\r\n grid.addItem(it, index + 1);\r\n reload(index + 1);\r\n });\r\n button.appendChild(icon);\r\n })\r\n );\r\n const gridWrapper = createElement('div', 'ui-sort-panel-grid');\r\n content.append(buttonWrapper, gridWrapper);\r\n const columnSource = this.columns.filter(c => c.sortable !== false && c.visible !== false);\r\n grid.columns = [\r\n {\r\n key: 'column',\r\n caption: this.langs.column,\r\n width: 270,\r\n type: GridColumnTypeEnum.Dropdown,\r\n dropOptions: {\r\n textKey: 'caption',\r\n valueKey: 'key'\r\n },\r\n source: columnSource,\r\n sortable: false,\r\n orderable: false\r\n },\r\n {\r\n key: 'order',\r\n caption: this.langs.order,\r\n width: 150,\r\n type: GridColumnTypeEnum.Dropdown,\r\n source: [\r\n { value: 'asc', text: this.langs.asc },\r\n { value: 'desc', text: this.langs.desc }\r\n ],\r\n sortable: false,\r\n orderable: false\r\n }\r\n ];\r\n const pop = new Popup({\r\n title: this.langs.sort,\r\n content,\r\n resizable: true,\r\n buttons: [\r\n {\r\n text: this.langs.ok,\r\n trigger: () => {\r\n const source = grid.source;\r\n if (source == null || source.length === 0) {\r\n this.sortArray = null;\r\n } else {\r\n const dict = {};\r\n for (let i = 0; i < source.length; ++i) {\r\n const it = source[i];\r\n if (it.column == null || it.column === '') {\r\n grid.selectedIndexes = [i];\r\n grid.refresh();\r\n showAlert(this.langs.sort, this.langs.requirePrompt, 'warn');\r\n return false;\r\n }\r\n if (Object.prototype.hasOwnProperty.call(dict, it.column)) {\r\n grid.selectedIndexes = [i];\r\n grid.refresh();\r\n let name = columnSource.find(c => c.key === it.column);\r\n if (name == null) {\r\n name = it.column;\r\n } else {\r\n name = name.caption;\r\n }\r\n showAlert(this.langs.sort, this.langs.duplicatePrompt.replace('{column}', name), 'warn');\r\n return false;\r\n }\r\n dict[it.column] = true;\r\n }\r\n this.sortArray = source;\r\n this.sortDirection = 1;\r\n this.sort();\r\n }\r\n if (typeof this.onSorted === 'function') {\r\n this.onSorted(this.sortArray);\r\n }\r\n return true;\r\n }\r\n },\r\n { text: this.langs.cancel }\r\n ],\r\n onResizeEnded: () => grid.resize()\r\n });\r\n const source = this.sortArray || [{ column: '', order: 'asc' }];\r\n pop.show(this._var.el).then(() => {\r\n pop.container.style.cssText += 'width: 520px; height: 400px';\r\n grid.init(gridWrapper);\r\n grid.source = source.filter(s => s.column === '' || columnSource.find(c => c.key === s.column) != null);\r\n grid.selectedIndexes = [0];\r\n grid.refresh();\r\n rowChanged(0);\r\n });\r\n }\r\n\r\n /**\r\n * 设置单行数据\r\n * @param {number} index - 行索引\r\n * @param {GridRowItem} item - 待设置的行数据对象\r\n * @since 1.0.1\r\n */\r\n setItem(index, item) {\r\n if (this._var.currentSource == null) {\r\n throw new Error('no source');\r\n }\r\n const it = this._var.currentSource[index];\r\n // clear dropdown source cache\r\n delete it.source;\r\n it.values = item;\r\n if (this.sortIndex >= 0) {\r\n this.sortColumn();\r\n } else if (this.sortArray?.length > 0) {\r\n this.sort();\r\n } else {\r\n this.refresh();\r\n }\r\n }\r\n\r\n /**\r\n * 添加行数据\r\n * @param {GridRowItem} item - 待添加的行数据值\r\n * @param {number} [index] - 待添加的行索引\r\n * @returns {GridRowItem} 返回已添加的行数据\r\n * @since 1.0.1\r\n */\r\n addItem(item, index) {\r\n if (this._var.currentSource == null) {\r\n throw new Error('no source');\r\n }\r\n const it = index >= 0 ? this._var.currentSource[index] : null;\r\n const newIt = { __index: null, values: item };\r\n if (it != null) {\r\n newIt.__index = it.__index;\r\n this._var.currentSource.splice(index, 0, newIt);\r\n if (this._var.colAttrs.__filtered === true) {\r\n this._var.source.splice(it.__index, 0, newIt);\r\n }\r\n for (let i = it.__index + 1; i < this._var.source.length; ++i) {\r\n this._var.source[i].__index += 1;\r\n }\r\n } else {\r\n newIt.__index = this._var.source.length;\r\n this._var.currentSource.push(newIt);\r\n if (this._var.colAttrs.__filtered === true) {\r\n this._var.source.push(newIt);\r\n }\r\n }\r\n if (this.sortIndex >= 0) {\r\n this.sortColumn(true);\r\n } else if (this.sortArray?.length > 0) {\r\n this.sort(true);\r\n } else {\r\n this.reload();\r\n }\r\n return item;\r\n }\r\n\r\n /**\r\n * 批量添加行数据\r\n * @param {GridRowItem[]} array - 待添加的行数据数组\r\n * @param {number} [index] - 待添加的行索引\r\n * @returns {GridRowItem[]} 返回已添加的行数据数组\r\n * @since 1.0.1\r\n */\r\n addItems(array, index) {\r\n if (this._var.currentSource == null) {\r\n throw new Error('no source');\r\n }\r\n if (!Array.isArray(array) || array.length <= 0) {\r\n // throw new Error(`invalid items array: ${array}`);\r\n return;\r\n }\r\n const it = index >= 0 ? this._var.currentSource[index] : null;\r\n if (it != null) {\r\n const items = array.map((a, i) => ({ __index: it.__index + i, values: a }));\r\n this._var.currentSource.splice(index, 0, ...items);\r\n if (this._var.colAttrs.__filtered === true) {\r\n this._var.source.splice(it.__index, 0, ...items);\r\n }\r\n const offset = array.length;\r\n for (let i = it.__index + offset; i < this._var.source.length; ++i) {\r\n this._var.source[i].__index += offset;\r\n }\r\n } else {\r\n const length = this._var.source.length;\r\n const items = array.map((a, i) => ({ __index: length + i, values: a }));\r\n this._var.currentSource.push(...items);\r\n if (this._var.colAttrs.__filtered === true) {\r\n this._var.source.push(...items);\r\n }\r\n }\r\n if (this.sortIndex >= 0) {\r\n this.sortColumn(true);\r\n } else if (this.sortArray?.length > 0) {\r\n this.sort(true);\r\n } else {\r\n this.reload();\r\n }\r\n return array;\r\n }\r\n\r\n /**\r\n * 删除行数据\r\n * @param {number} index - 待删除的行索引\r\n * @returns {GridRowItem} 返回已删除的行数据\r\n * @since 1.0.1\r\n */\r\n removeItem(index) {\r\n if (this._var.currentSource == null) {\r\n throw new Error('no source');\r\n }\r\n const it = this._var.currentSource.splice(index, 1)[0];\r\n if (it == null) {\r\n return null;\r\n }\r\n if (this._var.colAttrs.__filtered === true) {\r\n this._var.source.splice(it.__index, 1);\r\n }\r\n for (let i = it.__index; i < this._var.source.length; ++i) {\r\n this._var.source[i].__index -= 1;\r\n }\r\n if (index < 1) {\r\n this._var.selectedIndexes = [index - 1];\r\n } else {\r\n this._var.selectedIndexes = [];\r\n }\r\n this.reload();\r\n return it.values;\r\n }\r\n\r\n /**\r\n * 批量删除行数据\r\n * @param {number[]} [indexes] - 待删除的行索引数组，未传值时删除所有行\r\n * @returns {GridRowItem[]} 返回已删除的行数据数组\r\n * @since 1.0.1\r\n */\r\n removeItems(indexes) {\r\n if (this._var.currentSource == null) {\r\n throw new Error('no source');\r\n }\r\n if (Array.isArray(indexes) && indexes.length > 0) {\r\n indexes = indexes.slice().sort();\r\n } else {\r\n indexes = this._var.currentSource.map(a => a.__index);\r\n }\r\n const array = [];\r\n let first = 0;\r\n for (let i = indexes.length - 1; i >= 0; --i) {\r\n let it = this._var.currentSource.splice(indexes[i], 1)[0];\r\n if (it == null) {\r\n continue;\r\n }\r\n let next = this._var.source[it.__index];\r\n if (next != null && next.__offset == null) {\r\n next.__offset = i + 1;\r\n }\r\n if (this._var.colAttrs.__filtered === true) {\r\n this._var.source.splice(it.__index, 1);\r\n }\r\n array.splice(0, 0, it.values);\r\n first = it.__index;\r\n }\r\n let offset = 1;\r\n for (let i = first; i < this._var.source.length; ++i) {\r\n let it = this._var.source[i];\r\n if (it.__offset > 0) {\r\n offset = it.__offset;\r\n delete it.__offset;\r\n }\r\n it.__index -= offset;\r\n }\r\n const index = indexes[0];\r\n if (index < 1) {\r\n this._var.selectedIndexes = [index - 1];\r\n } else {\r\n this._var.selectedIndexes = [];\r\n }\r\n this.reload();\r\n return array;\r\n }\r\n\r\n /**\r\n * 导出已压缩的数据源，结构为\r\n * ```\r\n * {\r\n * columns: [],\r\n * source: [],\r\n * rowHeight: number,\r\n * sortDirection: number,\r\n * sortKey?: string,\r\n * sortArray?: Array<{\r\n * column: string,\r\n * order: \"asc\" | \"desc\"\r\n * }>\r\n * }\r\n * ```\r\n * @param {string | boolean} [compressed=deflate] - 压缩编码，传入 false 则取消压缩\r\n * @param {string} [module] - 压缩模块，默认采用 wasm_flate.deflate 编码，自定义模块需要实现以下消息事件\r\n * * `onmessage` - 接收消息\r\n * * `{ type: 'init', path: string}` - 初始化消息，参数 `path` 为 `ui.min.js` 脚本所在路径\r\n * * `{ type: 'compress', data: Uint8Array }` - 压缩消息，参数 `data` 为原始数据\r\n * * `postMessage` - 返回消息\r\n * * `{ type: 'init', result?: 0, error?: string}` - 初始化事件中的消息反馈，没有 `error` 意为成功\r\n * * `{ error: string }` - 压缩事件中的消息反馈，`error` 值为错误信息\r\n * * `Uint8Array` - 反馈压缩后的数据\r\n * @returns {Promise