109 lines
2.4 KiB
JavaScript
109 lines
2.4 KiB
JavaScript
/*
|
|
* 2024-07-19 최승연 최초작성
|
|
* 조회 테이블, 저장테이블 등 클래스 단위로 만든다면
|
|
* 상속 클래스
|
|
* 테스트 사용처 검사실적조회(insp/mng_insp_oper)
|
|
*/
|
|
|
|
|
|
// tb basic class
|
|
class BasicClass {
|
|
constructor(container) {
|
|
this.container = document.querySelector(container);
|
|
this.table = this.container.querySelector(".table");
|
|
this.tbList = null;
|
|
|
|
// 테이블 생성 옵션
|
|
this.fields = [];
|
|
|
|
this.commonFields = {
|
|
headerSort: true,
|
|
vertAlign: "middle",
|
|
hozAlign: "center",
|
|
resizable: "header", //Resize 는 헤더에서만 가능
|
|
headerHozAlign: "center", //헤더 정렬
|
|
headerSortTristate: true, //데이터 정렬 => 정/역/초기화
|
|
};
|
|
|
|
this.tbOption = {
|
|
layout: "fitcolumns",
|
|
columns: this.fields,
|
|
columnDefaults: this.commonFields,
|
|
headerSortElement: "<i class='bi'></i>",
|
|
};
|
|
|
|
// ajax get에 들어가는 옵션(객체)
|
|
this.getOption = {};
|
|
}
|
|
|
|
// 초기화: 데이터 전처리 및 테이블 생성
|
|
init() {
|
|
this.fitData();
|
|
this.tbList = new Tabulator(this.table, this.tbOption);
|
|
}
|
|
|
|
// 이벤트 세팅
|
|
setEvent(){}
|
|
|
|
// 데이터 전처리
|
|
preprocess(){}
|
|
|
|
// 전처리 데이터 ajax에
|
|
fitData(){
|
|
const data = this.preprocess();
|
|
this.getOption['data'] = {
|
|
...this.getOption['data'],
|
|
...data
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 조회만 되는 테이블
|
|
class R_TbClass extends BasicClass {
|
|
constructor(container){
|
|
super(container);
|
|
|
|
// 조회버튼 추가
|
|
this.filterBtn = document.querySelector("#filter_btn");
|
|
}
|
|
|
|
// 데이터 세팅
|
|
getMainList(){
|
|
let talert = window.setTimeout(()=> { this.tbList.alert("Loading ...") }, 1000);
|
|
ajax_json({
|
|
...this.getOption,
|
|
success: (res) => {
|
|
if(res.code) {
|
|
this.tbList.setData(res.data);
|
|
}else{
|
|
kuls_alert(res.mesg);
|
|
}
|
|
},
|
|
error: (req, status, err) => {
|
|
kuls_alert(err.message);
|
|
},
|
|
complete: () => {
|
|
window.clearTimeout(talert);
|
|
this.tbList.clearAlert();
|
|
},
|
|
});
|
|
|
|
}
|
|
|
|
// 이벤트 세팅
|
|
setEvent(){
|
|
this.tbList.on("tableBuilt", () => {
|
|
this.getMainList();
|
|
});
|
|
|
|
// 조회
|
|
["click", "keypress"].forEach((evt) => {
|
|
this.filterBtn.addEventListener(evt, () => {
|
|
this.fitData();
|
|
this.getMainList();
|
|
});
|
|
});
|
|
}
|
|
} |