diff --git a/lib/ui/grid/column.js b/lib/ui/grid/column.js index 9c02c29..11dcaa0 100644 --- a/lib/ui/grid/column.js +++ b/lib/ui/grid/column.js @@ -28,14 +28,12 @@ import { GridRowItem, DropdownOptions, GridColumnDefinition, GridSourceItem, Gri */ export class GridColumn { /** - * 设置该类型是否支持触发 {@linkcode GridColumnDefinition}`.onInputEnded` 方法
- * 该属性返回 `true` 后,在任意事件中修改行包装对象的 `__editing` 值,则会在行列元素变动时及时触发 [onInputEnded]{@linkcode GridColumnDefinition#onInputEnded} 方法,避免例如文本框还未触发 `onchange` 事件就被移除元素而导致的问题 - * - * 更多例子参考代码中 {@linkcode GridInputColumn} 的实现 + * 该属性返回 `true` 后,在任意事件中修改行包装对象的 `__editing` 值,则会在行列元素变动时及时触发 [onChanged]{@linkcode GridColumnDefinition#onChanged} 方法,避免例如文本框和日期框还未触发事件就被移除元素而导致的问题 * @member * @name GridColumn.editing * @readonly * @type {boolean} + * @see 更多例子参考 {@linkcode GridInputColumn} {@linkcode GridDateColumn} 中的代码实现 */ /** @@ -160,18 +158,15 @@ export class GridInputColumn extends GridColumn { /** * @ignore - * @param {Function} trigger + * @param {Function} _trigger * @param {GridColumnDefinition} col * @param {HTMLElement} _container * @param {GridItemWrapper} wrapper * @returns {HTMLElement} */ - static createEdit(trigger, col, _container, wrapper) { + static createEdit(_trigger, col, _container, wrapper) { const input = createElement('input'); input.setAttribute('type', 'text'); - if (typeof trigger === 'function') { - input.addEventListener('change', trigger); - } input.addEventListener('input', () => { if (wrapper.__editing == null) { wrapper.__editing = { @@ -226,17 +221,14 @@ export class GridInputColumn extends GridColumn { export class GridTextColumn extends GridInputColumn { /** * @ignore - * @param {Function} trigger + * @param {Function} _trigger * @param {GridColumnDefinition} col * @param {HTMLElement} _container * @param {GridItemWrapper} wrapper * @returns {HTMLElement} */ - static createEdit(trigger, col, _container, wrapper) { + static createEdit(_trigger, col, _container, wrapper) { const input = createElement('textarea'); - if (typeof trigger === 'function') { - input.addEventListener('change', trigger); - } input.addEventListener('input', () => { if (wrapper.__editing == null) { wrapper.__editing = { @@ -612,13 +604,13 @@ export class GridDateColumn extends GridColumn { /** * @ignore - * @param {Function} trigger + * @param {Function} _trigger * @param {GridColumnDefinition} col * @param {HTMLElement} _container * @param {GridItemWrapper} wrapper * @returns {HTMLElement} */ - static createEdit(trigger, col, _container, wrapper) { + static createEdit(_trigger, col, _container, wrapper) { let enabled = col.enabled; if (typeof enabled === 'string') { enabled = wrapper.values[enabled]; @@ -638,7 +630,6 @@ export class GridDateColumn extends GridColumn { wrapper.__editing[col.key] = true; } }); - date.addEventListener('blur', trigger); return date; } diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js index 4d555c5..0e736d6 100644 --- a/lib/ui/grid/grid.js +++ b/lib/ui/grid/grid.js @@ -252,7 +252,6 @@ let r = lang; * @property {(string | GridItemStringCallback)} [tooltip] - 额外设置单元格的 tooltip,支持直接使用字符串或者使用函数返回的字符串 * @property {Function} [onAllChecked] - 列头复选框改变时触发事件 * @property {Function} [onChanged] - 单元格变化时触发事件 - * @property {Function} [onInputEnded] - 文本单元格在输入完成时触发的事件 * @property {Function} [onFilterOk] - 列过滤点击 `OK` 时触发的事件 * @property {Function} [onFiltered] - 列过滤后触发的事件 * @property {Function} [onDropExpanded] - 列为下拉框类型时在下拉列表展开时触发的事件 @@ -354,15 +353,6 @@ let r = lang; * @this Grid * @memberof GridColumnDefinition */ -/** - * 文本单元格在输入完成时触发的事件 - * @name onInputEnded - * @event - * @param {GridColumnDefinition} col - 列定义对象 - * @param {string} value - 修改后的文本框值 - * @this Grid - * @memberof GridColumnDefinition - */ /** * 列过滤点击 `OK` 时触发的事件 * @name onFilterOk @@ -2079,7 +2069,11 @@ export class Grid { const nullValue = col.filterAllowNull ? null : ''; if (Array.isArray(col.filterValues)) { const v = this._getItemProp(it.values, false, col) ?? nullValue; - if (col.filterValues.indexOf(v) < 0) { + if (Array.isArray(v)) { + if (v.every(item => col.filterValues.indexOf(item) < 0)) { + return false; + } + } else if (col.filterValues.indexOf(v) < 0) { return false; } } @@ -2551,6 +2545,8 @@ export class Grid { val = item[col.key]; if (val?.DisplayValue != null) { val = val.DisplayValue; + } else if (Array.isArray(val)) { + val = val.join(', '); } } val ??= ''; @@ -2570,12 +2566,13 @@ export class Grid { let element; if (!readonly && !isCheckbox && typeof type.createEdit === 'function') { if (vals.__editing?.[col.key]) { + delete vals.__editing[col.key]; if (typeof type.leaveEdit === 'function') { type.leaveEdit(cell.children[0], this._var.el); } if (type.editing) { val = type.getValue({ target: cell.children[0] }, col); - this._onRowChanged(null, i, col, val, cell, true); + this._onRowChanged(null, i, col, val, cell); } } if (stateChanged) { @@ -3160,10 +3157,19 @@ export class Grid { if (displayValue == null) { displayValue = col.filterAllowNull ? this.langs.null : ''; } - if (!Object.hasOwnProperty.call(dict, displayValue)) { - const val = this._getItemProp(item.values, true, col); + if (Array.isArray(displayValue)) { + const vals = this._getItemProp(item.values, true, col); + displayValue.forEach((display, i) => { + if (!Object.hasOwnProperty.call(dict, display)) { + dict[display] = { + Value: vals[i], + DisplayValue: display + }; + } + }); + } else if (!Object.hasOwnProperty.call(dict, displayValue)) { dict[displayValue] = { - Value: val, + Value: this._getItemProp(item.values, true, col), DisplayValue: displayValue }; } @@ -3288,12 +3294,13 @@ export class Grid { this._set(col.key, 'filterSource', array); const propKey = GridColumnTypeEnum.isCheckbox(col.type) ? 'Value' : 'DisplayValue'; const nullValue = col.filterAllowNull ? null : ''; + const allSelected = !Array.isArray(col.filterValues); for (let item of array) { let v = item.Value ?? nullValue; if (v != null) { v = Object.prototype.hasOwnProperty.call(item, propKey) ? item[propKey] : item; } - item.__checked = !Array.isArray(col.filterValues) || col.filterValues.includes(v); + item.__checked = allSelected || col.filterValues.some(it => Array.isArray(it) ? it.includes(v) : it === v); } if (array.length > 12) { array = array.slice(0, 12); @@ -3737,9 +3744,8 @@ export class Grid { * @param {GridColumnDefinition} col * @param {any} value * @param {HTMLTableCellElement} cell - * @param {boolean} [blur] */ - _onRowChanged(e, index, col, value, cell, blur) { + _onRowChanged(e, index, col, value, cell) { if (this._var.currentSource == null) { return; } @@ -3775,14 +3781,8 @@ export class Grid { setTooltip(cell.children[0], tip, false, this.element); } row.__changed = true; - if (blur) { - if (typeof col.onInputEnded === 'function') { - col.onInputEnded.call(this, item, value); - } - } else { - if (typeof col.onChanged === 'function') { - col.onChanged.call(this, item, value, oldValue, e); - } + if (typeof col.onChanged === 'function') { + col.onChanged.call(this, item, value, oldValue, e); } } }