|
|
@ -67,50 +67,6 @@ const customTheme = {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const defaultOptions = {
|
|
|
|
|
|
|
|
el: null,
|
|
|
|
|
|
|
|
//[선택]DataSource 정보(readData|createData|updateData|modifyData|deleteData 등)
|
|
|
|
|
|
|
|
data: {
|
|
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
|
|
AJAX: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
withCredentials: false,
|
|
|
|
|
|
|
|
initialRequest: false,
|
|
|
|
|
|
|
|
api: {
|
|
|
|
|
|
|
|
readData: {
|
|
|
|
|
|
|
|
contentType: 'application/json',
|
|
|
|
|
|
|
|
dataType: 'json',
|
|
|
|
|
|
|
|
method: 'get',
|
|
|
|
|
|
|
|
initParams: {}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
, createData: {url: '', method: 'POST'}
|
|
|
|
|
|
|
|
, updateData: {url: '', method: 'PUT'}
|
|
|
|
|
|
|
|
, modifyData: {url: '', method: 'PUT'}
|
|
|
|
|
|
|
|
, deleteData: {url: '', method: 'DELETE'}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
header: {}, //[선택]헤더정보(헤더 명칭 및 매핑 field)
|
|
|
|
|
|
|
|
columns: [], //[필수]컬럼정보(헤더 명칭 및 매핑 field)
|
|
|
|
|
|
|
|
rowHeaders: [], //[선택]ROW 헤더 타입(rowNum: 순번, checkbox: 체크박스)
|
|
|
|
|
|
|
|
bodyHeight: 467, //[선택]Grid 높이 (number(단위: px)|'auto'|'fitToParent')
|
|
|
|
|
|
|
|
minBodyHeight: 350, //[선택]Grid 최소 높이 (단위: px)
|
|
|
|
|
|
|
|
rowHeight: 30, //[선택]Grid row 높이 (number(단위: px)|'auto' )
|
|
|
|
|
|
|
|
minRowHeight: 25, //[선택]Grid row 최소 높이 (단위: px)
|
|
|
|
|
|
|
|
pageOptions: {
|
|
|
|
|
|
|
|
useClient: false,
|
|
|
|
|
|
|
|
page: 1,
|
|
|
|
|
|
|
|
perPage: 15
|
|
|
|
|
|
|
|
}, //[선택]한 페이지에 출력할 건수
|
|
|
|
|
|
|
|
columnOptions: { //[선택]고정 컬럼
|
|
|
|
|
|
|
|
//frozenCount: 0 //고정컬럼 갯수
|
|
|
|
|
|
|
|
frozenBorderWidth: 2 //고정컬럼 보더(border) 두께
|
|
|
|
|
|
|
|
, resizable: true
|
|
|
|
|
|
|
|
, minWidth: 100 //최소 사이즈
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
summary: [], //[선택]하단합계
|
|
|
|
|
|
|
|
treeColumnOptions: {}, //[선택]tree 구조 grid
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class CustomRowNumberRenderer {
|
|
|
|
class CustomRowNumberRenderer {
|
|
|
|
constructor(props) {
|
|
|
|
constructor(props) {
|
|
|
|
const el = document.createElement('span');
|
|
|
|
const el = document.createElement('span');
|
|
|
@ -135,9 +91,7 @@ class CustomRowNumberRenderer {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const TuiGrid = {
|
|
|
|
const TuiGrid = {
|
|
|
|
//instance: null,
|
|
|
|
instance: null,
|
|
|
|
elId: null,
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
defaultOptions: {
|
|
|
|
defaultOptions: {
|
|
|
|
el: $('#grid'),
|
|
|
|
el: $('#grid'),
|
|
|
|
//[선택]DataSource 정보(readData|createData|updateData|modifyData|deleteData 등)
|
|
|
|
//[선택]DataSource 정보(readData|createData|updateData|modifyData|deleteData 등)
|
|
|
@ -181,8 +135,10 @@ const TuiGrid = {
|
|
|
|
summary: [], //[선택]하단합계
|
|
|
|
summary: [], //[선택]하단합계
|
|
|
|
treeColumnOptions: {}, //[선택]tree 구조 grid
|
|
|
|
treeColumnOptions: {}, //[선택]tree 구조 grid
|
|
|
|
},
|
|
|
|
},
|
|
|
|
*/
|
|
|
|
|
|
|
|
of: function(options, dataSource, successCallback) {
|
|
|
|
of: function(options, dataSource, successCallback) {
|
|
|
|
|
|
|
|
this.instance = null;
|
|
|
|
|
|
|
|
|
|
|
|
// rowNum fix
|
|
|
|
// rowNum fix
|
|
|
|
options.rowHeaders.filter((r, idx) => {
|
|
|
|
options.rowHeaders.filter((r, idx) => {
|
|
|
|
if(r === 'rowNum'){
|
|
|
|
if(r === 'rowNum'){
|
|
|
@ -194,21 +150,22 @@ const TuiGrid = {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
const optionObj = $.extend(true, defaultOptions, options, {data: dataSource});
|
|
|
|
const newOptions = $.extend(true, {}, this.defaultOptions, options, {data: dataSource});
|
|
|
|
optionObj.el = document.getElementById(options.el);
|
|
|
|
newOptions.el = document.getElementById(options.el);
|
|
|
|
this.elId = options.el;
|
|
|
|
//this.elId = options.el;
|
|
|
|
|
|
|
|
|
|
|
|
const instance = new tui.Grid(optionObj);
|
|
|
|
|
|
|
|
// language
|
|
|
|
// language
|
|
|
|
tui.Grid.setLanguage('ko');
|
|
|
|
tui.Grid.setLanguage('ko');
|
|
|
|
// theme
|
|
|
|
// theme
|
|
|
|
tui.Grid.applyTheme('custom', eval(customTheme));
|
|
|
|
tui.Grid.applyTheme('custom', eval(customTheme));
|
|
|
|
//Grid.applyTheme('custom', customTheme);
|
|
|
|
//Grid.applyTheme('custom', customTheme);
|
|
|
|
//Grid.applyTheme('striped');
|
|
|
|
//Grid.applyTheme('striped');
|
|
|
|
|
|
|
|
this.instance = new tui.Grid(newOptions);
|
|
|
|
|
|
|
|
|
|
|
|
instance.on('successResponse', function(ev){
|
|
|
|
|
|
|
|
|
|
|
|
this.instance.on('successResponse', function(ev){
|
|
|
|
console.log(`successResponse >>>>>>>>>>>>>>>>>> `,ev);
|
|
|
|
console.log(`successResponse >>>>>>>>>>>>>>>>>> `,ev);
|
|
|
|
const msg = JSON.parse(ev.xhr.response).message; //tui-grid 기본 format 메시지
|
|
|
|
var msg = JSON.parse(ev.xhr.response).message; //tui-grid 기본 format 메시지
|
|
|
|
console.log(msg);
|
|
|
|
console.log(msg);
|
|
|
|
//if($('#totCnt span')){
|
|
|
|
//if($('#totCnt span')){
|
|
|
|
if(document.getElementById('totCnt')){
|
|
|
|
if(document.getElementById('totCnt')){
|
|
|
@ -216,7 +173,7 @@ const TuiGrid = {
|
|
|
|
// paging
|
|
|
|
// paging
|
|
|
|
if(res.data.pagination){
|
|
|
|
if(res.data.pagination){
|
|
|
|
$('#totCnt span').text(res.data.pagination.totalCount);
|
|
|
|
$('#totCnt span').text(res.data.pagination.totalCount);
|
|
|
|
// no paging
|
|
|
|
// no paging
|
|
|
|
}else{
|
|
|
|
}else{
|
|
|
|
$('#totCnt span').text(res.count)
|
|
|
|
$('#totCnt span').text(res.count)
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -227,36 +184,39 @@ const TuiGrid = {
|
|
|
|
//if(successCallback) successCallback(ev);
|
|
|
|
//if(successCallback) successCallback(ev);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
// 결과가 false인 경우 발생한 경우
|
|
|
|
// 결과가 false인 경우 발생한 경우
|
|
|
|
instance.on('failResponse', function(ev){
|
|
|
|
this.instance.on('failResponse', function(ev){
|
|
|
|
console.log(`failResponse >>>>>>>>>>>>>>>>>> `,ev);
|
|
|
|
console.log(`failResponse >>>>>>>>>>>>>>>>>> `,ev);
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
var msg = JSON.parse(ev.xhr.response).message; //tui-grid 기본 format 메시지
|
|
|
|
//tui-grid 기본 format 메시지
|
|
|
|
if(!msg) {
|
|
|
|
const res = JSON.parse(ev.xhr.response);
|
|
|
|
msg = JSON.parse(ev.xhr.response).resp.message;
|
|
|
|
let msg = '';
|
|
|
|
|
|
|
|
if(!res?.message) {
|
|
|
|
|
|
|
|
msg = res.message;
|
|
|
|
}else {
|
|
|
|
}else {
|
|
|
|
alert(msg);
|
|
|
|
alert(res);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
} catch (e) {
|
|
|
|
console.error('TuiGrid::failResponse parsing error', e)
|
|
|
|
console.error('TuiGrid::failResponse parsing error', e)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
// 오류가 발생한 경우
|
|
|
|
// 오류가 발생한 경우
|
|
|
|
instance.on('errorResponse', function(ev){
|
|
|
|
this.instance.on('errorResponse', function(ev){
|
|
|
|
console.log(`errorResponse >>>>>>>>>>>>>>>>>> `,ev);
|
|
|
|
console.log(`errorResponse >>>>>>>>>>>>>>>>>> `,ev);
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
var msg = JSON.parse(ev.xhr.response).message; //tui-grid 기본 format 메시지
|
|
|
|
//tui-grid 기본 format 메시지
|
|
|
|
if(!msg) {
|
|
|
|
const res = JSON.parse(ev.xhr.response);
|
|
|
|
msg = JSON.parse(ev.xhr.response).resp.message;
|
|
|
|
let msg = '';
|
|
|
|
|
|
|
|
if(!res?.message) {
|
|
|
|
|
|
|
|
msg = res.message;
|
|
|
|
}else {
|
|
|
|
}else {
|
|
|
|
alert(msg);
|
|
|
|
alert(res);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
} catch (e) {
|
|
|
|
console.error('TuiGrid::errorResponse parsing error', e)
|
|
|
|
console.error('TuiGrid::errorResponse parsing error', e)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//console.log(optionObj.data.api.readData)
|
|
|
|
return this.instance;
|
|
|
|
return instance;
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|