update code #96
@ -33,7 +33,6 @@ import Form from '~/components/common/form/Form';
|
||||
import mixinGlobal from '@/mixin/global.js';
|
||||
import { NewCustomRenderer } from '~/plugins/gridUtility';
|
||||
import { NewCustomEditor } from '~/plugins/gridUtility';
|
||||
import { CustomEditorCheckbox } from '~/plugins/gridUtility';
|
||||
export default {
|
||||
mixins: [mixinGlobal],
|
||||
components: {
|
||||
@ -103,7 +102,7 @@ export default {
|
||||
this.gridInit();
|
||||
},
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight - 31;
|
||||
const gridHeight = this.$refs.gridParent.offsetHeight;
|
||||
|
||||
const myOptions = {
|
||||
columnOptions: {
|
||||
@ -310,7 +309,7 @@ export default {
|
||||
type: NewCustomRenderer,
|
||||
},
|
||||
editor: {
|
||||
type: CustomEditorCheckbox,
|
||||
type: NewCustomEditor,
|
||||
},
|
||||
formatter(data) {
|
||||
return data.row.addInfoDataKind;
|
||||
|
@ -327,6 +327,10 @@ export class NewCustomEditor {
|
||||
} else {
|
||||
el.checked = false;
|
||||
}
|
||||
|
||||
divEl.style.position = 'relative';
|
||||
divEl.style.top = rowKey === 0 ? '1px' : '3px';
|
||||
|
||||
el.addEventListener('change', (ev) => {
|
||||
// console.log('props: %o', ev);
|
||||
if (ev.target.checked) {
|
||||
@ -402,158 +406,3 @@ export class NewCustomEditor {
|
||||
this.el.select();
|
||||
}
|
||||
}
|
||||
|
||||
export class CustomEditorCheckbox {
|
||||
|
||||
constructor(props) {
|
||||
|
||||
const { grid, rowKey, columnInfo } = props;
|
||||
|
||||
this.grid = grid;
|
||||
this.rowKey = rowKey;
|
||||
this.columnInfo = columnInfo;
|
||||
|
||||
const origin = grid?.dataManager?.getOriginData?.() || grid?.dataManager?.originData || [];
|
||||
|
||||
this.gridOriginData = origin;
|
||||
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'tui-grid-cell-content';
|
||||
wrap.style.height = '100%';
|
||||
wrap.style.display = 'flex';
|
||||
wrap.style.justifyContent = 'center';
|
||||
|
||||
const input = document.createElement('input');
|
||||
const rowRaw = props.grid.store.data.rawData[props.rowKey] || {};
|
||||
const isFG = rowRaw.addInfoDataKind == 'FG';
|
||||
const isNUM = props.formattedValue === 'NUM';
|
||||
|
||||
if (isFG) {
|
||||
|
||||
input.type = 'checkbox';
|
||||
input.checked = String(props.value) === '1';
|
||||
input.value = input.checked ? '1' : '0';
|
||||
|
||||
wrap.style.position = 'relative';
|
||||
wrap.style.top = rowKey === 0 ? '1px' : '3px';
|
||||
|
||||
input.addEventListener('change', (ev) => {
|
||||
const checked = ev.target.checked;
|
||||
ev.target.value = checked ? '1' : '0';
|
||||
|
||||
if (!checked) {
|
||||
const rowOrigin = this.gridOriginData[this.rowKey];
|
||||
const originValRaw = rowOrigin ? rowOrigin[this.columnInfo.name] : null;
|
||||
const originVal = normalizeVal(originValRaw);
|
||||
if (originVal !== '1') {
|
||||
ev.target.value = originVal ?? '0';
|
||||
}
|
||||
}
|
||||
this._updateRowChangeState(ev.target.value);
|
||||
|
||||
});
|
||||
|
||||
} else {
|
||||
// Text input
|
||||
input.type = 'text';
|
||||
input.autocomplete = 'off';
|
||||
input.spellcheck = false;
|
||||
|
||||
if (isNUM) {
|
||||
const filterToDigits = (el) => {
|
||||
const before = el.value;
|
||||
const after = before.replace(/[^0-9]/g, '');
|
||||
if (before !== after) el.value = after;
|
||||
};
|
||||
|
||||
input.addEventListener('input', () => filterToDigits(input));
|
||||
input.addEventListener('blur', () => filterToDigits(input));
|
||||
|
||||
input.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
const text = (e.dataTransfer.getData('text') || '').replace(/[^0-9]/g, '');
|
||||
const { selectionStart, selectionEnd } = input;
|
||||
const val = input.value;
|
||||
input.value = val.slice(0, selectionStart) + text + val.slice(selectionEnd);
|
||||
this._updateRowChangeState(input.value);
|
||||
});
|
||||
|
||||
input.addEventListener('paste', (e) => {
|
||||
e.preventDefault();
|
||||
const text = (e.clipboardData.getData('text') || '').replace(/[^0-9]/g, '');
|
||||
const { selectionStart, selectionEnd } = input;
|
||||
const val = input.value;
|
||||
input.value = val.slice(0, selectionStart) + text + val.slice(selectionEnd);
|
||||
this._updateRowChangeState(input.value);
|
||||
});
|
||||
}
|
||||
wrap.style.justifyContent = 'flex-start';
|
||||
input.style.width = '100%';
|
||||
input.style.boxSizing = 'border-box';
|
||||
|
||||
}
|
||||
|
||||
wrap.appendChild(input);
|
||||
this.divEl = wrap;
|
||||
this.el = input;
|
||||
this.render(props);
|
||||
|
||||
function normalizeVal(v) {
|
||||
if (v === true) return '1';
|
||||
if (v === false) return '0';
|
||||
if (v == null) return null;
|
||||
|
||||
const s = String(v).trim();
|
||||
if (s === '1' || s === '0') return s;
|
||||
return s;
|
||||
}
|
||||
|
||||
this._normalizeVal = normalizeVal;
|
||||
|
||||
}
|
||||
|
||||
getElement() {
|
||||
return this.divEl;
|
||||
}
|
||||
|
||||
getValue() {
|
||||
if (this.el.type === 'checkbox') {
|
||||
return this.el.checked ? '1' : '0';
|
||||
}
|
||||
return this.el.value;
|
||||
}
|
||||
|
||||
render(props) {
|
||||
if (this.el.type === 'checkbox') {
|
||||
const isOne = String(props.value) === '1';
|
||||
this.el.checked = isOne;
|
||||
this.el.value = isOne ? '1' : '0';
|
||||
} else {
|
||||
this.el.value = props.value != null ? String(props.value) : '';
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
if (this.el.type !== 'checkbox') {
|
||||
try { this.el.select(); } catch {}
|
||||
}
|
||||
}
|
||||
|
||||
_updateRowChangeState(changedRaw) {
|
||||
|
||||
const changed = this._normalizeVal(changedRaw);
|
||||
const rowOrigin = this.gridOriginData[this.rowKey];
|
||||
const originRaw = rowOrigin ? rowOrigin[this.columnInfo.name] : null;
|
||||
const origin = this._normalizeVal(originRaw);
|
||||
|
||||
if (origin === changed || (origin == null && (changed === '' || changed == null))) {
|
||||
this.grid.removeRowClassName(this.rowKey, 'row-insert');
|
||||
this.grid.setValue(this.rowKey, 'rowStat', null);
|
||||
} else {
|
||||
this.grid.setValue(this.rowKey, 'rowStat', 'U');
|
||||
this.grid.addRowClassName(this.rowKey, 'row-insert');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
Reference in New Issue
Block a user