fix: onChanged issue on Firefox. (GridDateColumn)
feature: supports filterValues on Array field.
This commit is contained in:
parent
fdeefb4e1a
commit
cad5a99eff
@ -28,14 +28,12 @@ import { GridRowItem, DropdownOptions, GridColumnDefinition, GridSourceItem, Gri
|
||||
*/
|
||||
export class GridColumn {
|
||||
/**
|
||||
* 设置该类型是否支持触发 {@linkcode GridColumnDefinition}`.onInputEnded` 方法<br/>
|
||||
* 该属性返回 `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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user