update code

plugins/gridUtility.js

@@ -401,4 +401,159 @@ 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');
+	  }
+  
+	}
+  
+  }