fix: tui-Grid init fix

main
minuk926 2 years ago
parent d01577973f
commit bf6209fdff

@ -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;
}, },

Loading…
Cancel
Save