/* * 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: "", }; // 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(); }); }); } }