sk_fems_ui commit
This commit is contained in:
unknown
397
plugins/gridUtility.js
Normal file
397
plugins/gridUtility.js
Normal file
@ -0,0 +1,397 @@
|
||||
// 그리드 에디터 : 숫자타입
|
||||
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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user