397 lines
10 KiB
JavaScript
397 lines
10 KiB
JavaScript
// 그리드 에디터 : 숫자타입
|
|
export class CustomNumberEditor {
|
|
constructor(props) {
|
|
const { grid, rowKey, columnInfo } = props;
|
|
const el = document.createElement('input');
|
|
const numberOption = columnInfo.editor.options;
|
|
|
|
this.minValue = numberOption.min;
|
|
this.maxValue = numberOption.max;
|
|
this.propsValue = props.value;
|
|
this.colName = columnInfo.name;
|
|
|
|
el.classList.add('tui-grid-content-text');
|
|
el.type = 'number';
|
|
el.value = props.value || 0;
|
|
this.el = el;
|
|
this.grid = grid;
|
|
this.rowKey = rowKey;
|
|
|
|
this.el.addEventListener('change', () => {
|
|
grid.setValue(rowKey, columnInfo.name, this.getcheckValue());
|
|
});
|
|
}
|
|
getElement() {
|
|
return this.el;
|
|
}
|
|
getValue() {
|
|
return this.el.value;
|
|
}
|
|
getcheckValue() {
|
|
let returnVal;
|
|
const editVal = this.grid.getValue(this.rowKey, this.colName);
|
|
if (this.minValue != undefined && typeof this.maxValue != undefined) {
|
|
if (
|
|
Number(editVal) >= Number(this.minValue) &&
|
|
Number(editVal) <= Number(this.maxValue)
|
|
) {
|
|
returnVal = editVal;
|
|
} else {
|
|
returnVal = this.propsValue;
|
|
}
|
|
} else {
|
|
returnVal = editVal;
|
|
}
|
|
return returnVal;
|
|
}
|
|
mounted() {
|
|
this.el.select();
|
|
}
|
|
}
|
|
export class CustomCalcNumberEditor {
|
|
constructor(props) {
|
|
const { grid, rowKey, columnInfo } = props;
|
|
const el = document.createElement('input');
|
|
const calcOptions = columnInfo.editor.options;
|
|
|
|
this.calculation = calcOptions.calculation; // 연산자 String
|
|
this.calcColumns = calcOptions.calcColumns; // 연산해야할 컬럼이름 Array
|
|
this.targetColumn = calcOptions.targetColumn; // 연산결과 컬럼이름 String
|
|
|
|
el.classList.add('tui-grid-content-text');
|
|
el.type = 'number';
|
|
el.value = props.value;
|
|
this.el = el;
|
|
this.grid = grid;
|
|
this.rowKey = rowKey;
|
|
|
|
this.el.addEventListener('change', () => {
|
|
grid.setValue(rowKey, this.targetColumn, this.getCalculation());
|
|
|
|
grid.setValue(rowKey, 'rowStat', 'U');
|
|
grid.addRowClassName(rowKey, 'row-insert');
|
|
});
|
|
}
|
|
getElement() {
|
|
return this.el;
|
|
}
|
|
getValue() {
|
|
return this.el.value;
|
|
}
|
|
getCalculation() {
|
|
let returnVal;
|
|
switch (this.calculation) {
|
|
case 'sum':
|
|
returnVal = 0;
|
|
this.calcColumns.forEach(columnNm => {
|
|
if (this.grid.getValue(this.rowKey, columnNm) == null) {
|
|
returnVal += 0;
|
|
} else {
|
|
returnVal +=
|
|
parseInt(this.grid.getValue(this.rowKey, columnNm)) || 0;
|
|
}
|
|
});
|
|
break;
|
|
case 'double':
|
|
returnVal = 1;
|
|
this.calcColumns.forEach(columnNm => {
|
|
returnVal *= parseInt(this.grid.getValue(this.rowKey, columnNm));
|
|
});
|
|
break;
|
|
case 'division':
|
|
returnVal = 2;
|
|
var a = parseInt(this.grid.getValue(this.rowKey, this.calcColumns[0]));
|
|
var b = parseInt(this.grid.getValue(this.rowKey, this.calcColumns[1]));
|
|
returnVal = a / b;
|
|
if (returnVal == Infinity) {
|
|
returnVal = 0;
|
|
}
|
|
break;
|
|
}
|
|
return returnVal;
|
|
}
|
|
mounted() {
|
|
this.el.select();
|
|
}
|
|
}
|
|
|
|
export class CustumChecbox {
|
|
constructor(props) {
|
|
const el = document.createElement('input');
|
|
const { grid, rowKey, columnInfo } = props;
|
|
|
|
el.type = 'checkbox';
|
|
el.value = props.value;
|
|
this.el = el;
|
|
this.grid = grid;
|
|
this.rowKey = rowKey;
|
|
this.propsVal = props;
|
|
this.onlyone = columnInfo.renderer.options.onlyone || false;
|
|
this.disabled = columnInfo.renderer.options.disabled || false;
|
|
this.colName = columnInfo.name;
|
|
|
|
this.render(props);
|
|
if (!this.disabled) {
|
|
this.el.addEventListener('change', () => {
|
|
const originValue = el.value;
|
|
const changedValue = el.checked ? '1' : '0';
|
|
|
|
grid.setValue(rowKey, columnInfo.name, changedValue);
|
|
if (originValue == changedValue) {
|
|
grid.removeRowClassName(rowKey, 'row-insert');
|
|
grid.setValue(rowKey, 'rowStat', null);
|
|
} else {
|
|
grid.setValue(rowKey, 'rowStat', 'U');
|
|
grid.addRowClassName(rowKey, 'row-insert');
|
|
}
|
|
|
|
// onlyone 처리 추가
|
|
if (this.onlyone) {
|
|
if (changedValue == '1') {
|
|
this.grid.getData().forEach(row => {
|
|
if (this.rowKey != row.rowKey && row[this.colName] == '1') {
|
|
this.grid.setValue(row.rowKey, this.colName, '0');
|
|
this.grid.setValue(row.rowKey, 'rowStat', 'U');
|
|
this.grid.addRowClassName(row.rowKey, 'row-insert');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
getElement() {
|
|
return this.el;
|
|
}
|
|
render(props) {
|
|
const val = props.value;
|
|
this.el.checked = val == '1' ? true : false;
|
|
}
|
|
}
|
|
|
|
export class CustumButton {
|
|
constructor(props) {
|
|
const el = document.createElement('button');
|
|
const { grid, rowKey, columnInfo } = props;
|
|
|
|
el.classList.add('v-btn-bg__blue');
|
|
el.style.width = '90%';
|
|
// el.type = "button";
|
|
// el.value = props.value;
|
|
el.innerText = props.value;
|
|
this.el = el;
|
|
}
|
|
getElement() {
|
|
return this.el;
|
|
}
|
|
getValue() {
|
|
// return this.el.value;
|
|
}
|
|
mounted() {
|
|
// this.el.focus();
|
|
}
|
|
}
|
|
export class CustumInputButton {
|
|
constructor(props) {
|
|
const el = document.createElement('div');
|
|
const elInput = document.createElement('input');
|
|
const elButton = document.createElement('button');
|
|
const { grid, rowKey, columnInfo } = props;
|
|
|
|
el.classList.add('tui-grid-cell-content');
|
|
el.style.display = 'flex';
|
|
elInput.type = 'text';
|
|
elInput.style.width = 'calc(100% - 30px)';
|
|
elInput.style.color = 'white';
|
|
elInput.classList.add('tui-grid-content-text');
|
|
elButton.classList.add('v-btn-bg__blue');
|
|
elButton.style.width = '30px';
|
|
elButton.style.height = '30px';
|
|
// el.type = "button";
|
|
// el.value = props.value;
|
|
elInput.value = props.value;
|
|
el.append(elInput);
|
|
el.append(elButton);
|
|
this.el = el;
|
|
}
|
|
getElement() {
|
|
return this.el;
|
|
}
|
|
getValue() {
|
|
// return this.el.value;
|
|
}
|
|
mounted() {
|
|
// this.el.focus();
|
|
}
|
|
}
|
|
|
|
export class NewCustomRenderer {
|
|
constructor(props) {
|
|
//const { min, max } = props.columnInfo.renderer.options;
|
|
// console.log('props: %o', props);
|
|
|
|
const el = document.createElement('input');
|
|
const { grid, rowKey, columnInfo } = props;
|
|
let gridOriginData = grid.dataManager.getOriginData();
|
|
// console.log('columnInfo', columnInfo.renderer.options);
|
|
this.el = el;
|
|
this.grid = grid;
|
|
this.rowKey = rowKey;
|
|
this.propsVal = props;
|
|
this.disabled = false;
|
|
if(columnInfo.renderer.options != undefined){
|
|
this.disabled = columnInfo.renderer.options.disabled == undefined ? false : columnInfo.renderer.options.disabled;
|
|
// this.onlyone = columnInfo.renderer.options.onlyone == undefined ? false : columnInfo.renderer.options.onlyone;
|
|
// this.onlyone = columnInfo.renderer.options.onlyone || false;
|
|
}
|
|
|
|
this.colName = columnInfo.name;
|
|
if (
|
|
props.grid.store.data.rawData[props.rowKey].addInfoDataKind == 'FG'
|
|
) {
|
|
el.type = 'checkbox';
|
|
} else {
|
|
el.type = 'text';
|
|
|
|
$(el).addClass('tui-grid-cell-content');
|
|
$(el).css('text-align', 'center');
|
|
}
|
|
this.render(props);
|
|
if(!this.disabled){
|
|
|
|
this.el.addEventListener('click', (event) => {
|
|
// const originValue = el.value;
|
|
let originValue = null;
|
|
if(el.type=='checkbox'){
|
|
let changedValue = null;
|
|
if (el.checked) {
|
|
changedValue = 1;
|
|
} else {
|
|
changedValue = 0;
|
|
if(gridOriginData[rowKey] != undefined && gridOriginData[rowKey][this.colName] != '1'){
|
|
changedValue = gridOriginData[rowKey][this.colName];
|
|
}
|
|
|
|
}
|
|
grid.setValue(rowKey, columnInfo.name, changedValue);
|
|
if(gridOriginData[rowKey] != undefined){
|
|
originValue = gridOriginData[rowKey][columnInfo.name];
|
|
}
|
|
if(originValue == changedValue){
|
|
grid.removeRowClassName(rowKey, 'row-insert');
|
|
grid.setValue(rowKey, 'rowStat', null);
|
|
}else{
|
|
grid.setValue(rowKey, 'rowStat', 'U');
|
|
grid.addRowClassName(rowKey, 'row-insert');
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
getElement() {
|
|
return this.el;
|
|
}
|
|
|
|
render(props) {
|
|
// console.log('render___this.el.type', this.el.type);
|
|
if (this.el.type == 'checkbox') {
|
|
if (props.value == 1) {
|
|
this.el.checked = true;
|
|
} else {
|
|
this.el.checked = false;
|
|
}
|
|
}
|
|
this.el.value = props.value;
|
|
}
|
|
}
|
|
|
|
export class NewCustomEditor {
|
|
constructor(props) {
|
|
const { grid, rowKey, columnInfo } = props;
|
|
let gridOriginData = grid.dataManager.getOriginData();
|
|
this.gridOriginData = gridOriginData;
|
|
this.rowKey = rowKey;
|
|
this.columnInfo = columnInfo;
|
|
this.grid = grid;
|
|
const el = document.createElement('input');
|
|
if (
|
|
props.grid.store.data.rawData[props.rowKey].addInfoDataKind == 'FG'
|
|
) {
|
|
el.type = 'checkbox';
|
|
if (props.value == '1') {
|
|
el.checked = true;
|
|
} else {
|
|
el.checked = false;
|
|
}
|
|
el.addEventListener('change', (ev) => {
|
|
// console.log('props: %o', ev);
|
|
if (ev.target.checked) {
|
|
ev.target.value = 1;
|
|
|
|
} else {
|
|
ev.target.value = 0
|
|
if(this.gridOriginData[this.rowKey] != undefined && this.gridOriginData[this.rowKey][this.columnInfo.name] != '1'){
|
|
ev.target.value = this.gridOriginData[this.rowKey][this.columnInfo.name];
|
|
}
|
|
}
|
|
let originValue = null;
|
|
let changedValue = ev.target.value;
|
|
// changedValue = this.el.value == null ? null : 0;
|
|
if(this.gridOriginData[this.rowKey] != undefined){
|
|
originValue = this.gridOriginData[this.rowKey][this.columnInfo.name] == null ? 0 : this.gridOriginData[this.rowKey][this.columnInfo.name];
|
|
}
|
|
if(originValue == changedValue){
|
|
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');
|
|
}
|
|
});
|
|
} else {
|
|
el.type = 'text';
|
|
if (props.formattedValue == 'NUM') {
|
|
el.oninput = function(event) {
|
|
var regExp=/[^0-9]/g;
|
|
if(event.data != null){
|
|
if(event.data.match(regExp)){
|
|
event.target.value = event.target.value.replace(regExp, '');
|
|
}
|
|
}
|
|
};
|
|
}
|
|
$(el).addClass('tui-grid-content-text');
|
|
}
|
|
|
|
// console.log('props: %o', props);
|
|
// console.log('el: %o', el);
|
|
this.el = el;
|
|
|
|
this.render(props);
|
|
}
|
|
|
|
getElement() {
|
|
return this.el;
|
|
}
|
|
|
|
getValue() {
|
|
return this.el.value;
|
|
}
|
|
|
|
render(props) {
|
|
if (this.el.type == 'checked') {
|
|
this.el.value = props.value;
|
|
} else {
|
|
this.el.value = String(props.value);
|
|
}
|
|
//console.log('props: %o', props);
|
|
}
|
|
|
|
mounted() {
|
|
if (this.el.type == 'checkbox') {
|
|
$(this.el.parentElement).css('text-align', 'center');
|
|
}
|
|
this.el.select();
|
|
}
|
|
} |