/** * * @author : 이호영 * @fileName : tabulator.js * @date : 2023.02.21 * @description : tabulator 관련 js * =========================================================== * DATE AUTHOR NOTE * ----------------------------------------------------------- * * 2023.02.21 이호영 최초 생성 * * * */ var tableL = null; $(document).ready(function (){ //받는사람 연락처 내용 처리 //Tabulator AJAX Data Loading tableL = new Tabulator(".callList_box_P", { height:"255px", layout:"fitColumns", headerHozAlign:"center", validationMode:"highlight", headerHozAlign:"center", clipboard: true, // 클립보드 기능 활성화 clipboardPasteAction: "replace", // 붙여넣기 시 기존 데이터 교체 (또는 "update" 선택 가능) validationMode:"highlight", placeholder:"복사(Ctrl+C)한 내용을 여기에 붙여넣기(Ctrl+V) 해주세요.", //fit columns to width of table (optional) resizableColumns:false, clipboardPasteParser: function(clipboard){ const rows = clipboard.split("\n").filter(row => row.trim() !== ""); // 1. 붙여넣기 데이터 → 가공 const newData = rows .map(row => { const cols = row.split("\t"); const phoneRaw = cols[0].trim(); const phone = removeDash(phoneRaw); return { phone }; }) .filter(row => checkHpNum(row.phone)); // 2. 기존 데이터 가져오기 const existingData = tableL.getData(); // 3. 기존 데이터 + 붙여넣은 데이터 합치기 const combinedData = existingData.concat(newData); // 4. 중복 제거 + 갯수 카운트 const result = removeDuplicatesAndCount(combinedData, 'phone'); // 5. 외부 처리 함수 호출 setAllCntData(result); fn_priceClclt(); // 6. 테이블에 반영할 데이터 리턴 return result; }, columnDefaults:{ // 공통설정 hozAlign: "center", headerHozAlign: "center", editor: false }, columns:[ //Define Table Columns {formatter:"rowSelection", titleFormatter:"rowSelection", width:60, clipboard:false, hozAlign:"center", headerSort:false, cellClick:function(e, cell){ cell.getRow().toggleSelect(); }}, // {title:"이름", hozAlign:"center", field:"name", editor:"input", validator:["maxLength:12"], cellEdited:function(cell){ // //cell - cell component // fnReplCell(); // }}, {title:"휴대폰", hozAlign:"center", field:"phone", editor:"input", validator:["required","minLength:10", "maxLength:12"], cellEdited:function(cell){ //cell - cell component fnDuplPhone(); }}, ] }); //주소록 불러오기 팝업 내용 //Tabulator AJAX Data Loading tableAddr = new Tabulator(".callAddr_box", { height:"255px", layout:"fitColumns", headerHozAlign:"center", validationMode:"highlight", placeholder:"주소록 그룹을 선택해 주세요.", //fit columns to width of table (optional) resizableColumns:false, columns:[ //Define Table Columns {formatter:"rowSelection", titleFormatter:"rowSelection",clipboard:false, hozAlign:"center", headerSort:false, width: 50, cellClick:function(e, cell){ cell.getRow().toggleSelect(); } }, {title:"그룹명", hozAlign:"center", field:"addrGroupNm", widthGrow: 3, editor:"input", validator:["required","minLength:2", "maxLength:40"]}, {title:"이름", hozAlign:"center", field:"name", widthGrow: 2, editor:"input", validator:["maxLength:12"]}, {title:"휴대폰번호", hozAlign:"center", field:"phone", widthGrow: 3, editor:"input", validator:["required","minLength:10", "maxLength:11"]}, ], validationFailed:function(cell, value, parameters){ // 유효성 체크 함수 - 아직 잘 모르겠음 var valid = cell.isValid(); var fieldNm = cell.getField(); if(!valid){ if(fieldNm == "addrName"){ alert("받는사람 이름은 최대 12글자까지만 입력 가능합니다."); }else if(fieldNm == "addrPhone"){ alert("휴대폰번호는 하이픈(-)을 제외한 숫자만 정확히 입력해 주세요."); }else if(fieldNm == "addrGroupNm"){ alert("그룹명을 정확히 입력해 주세요. 2 ~ 40글자 이내로 입력 가능합니다."); } //해당 셀 데이터 삭제 cell.setValue(""); } return value % parameters.addrPhone; }, }); //받는사람 번호 버튼 클릭시 Tabulator에 데이터 넣어주기 $('.addCallToF').click(function(){ // checkHpNum(callToNum) var textarea = $('#callTo'); const numbers = textarea.val().split('\n') .map(num => removeDash(num.trim())) .filter(num => num !== "") .filter(num => checkHpNum(num)); // 유효한 번호만 필터링; const formattedData = numbers.map(num => ({phone: num})); // 기존 tableL의 데이터를 가져옵니다. var existingData = tableL.getData(); // 기존 데이터와 새로운 데이터를 합칩니다. var combinedData = existingData.concat(formattedData); // @ phone을 기준으로 중복 제거 및 갯수 계산 const result = removeDuplicatesAndCount(combinedData, 'phone'); setAllCntData(result); textarea.val(''); fn_priceClclt(); }); //받는사람 전체삭제 버튼 처리 $('.all_del').click(function(){ var data = tableL.getRows(); if(data == null || data == ""){ alert("받는사람을 추가해 주세요."); return false; }else{ if(confirm("받는사람 목록을 모두 삭제하시겠습니까?")){ tableL.clearData(); $("#rowTotCnt").text(0); //총건수 수정 $("#rowDupCnt").text(0); //중복건수 수정 totalPriceSum(0); //결제 금액 수정 } } }); //주소록 불러오기 버튼 클릭시 $('.popupAddr').click(function(){ var login = '${LoginVO.id}'; if(login == null || login == ''){ alert("로그인 후 이용이 가능합니다."); return false; } $("#addrGroupLoad").load("/web/mjon/msgdata/selectAddrGroupListAjax.do", "" ,function(response, status, xhr){ //리스트 스크롤 처리해주기 $(".adr_pop_list").mCustomScrollbar({ axis: 'y', scrollbarPosition: "outside", theme: "dark", autoHideScrollbar: false }); }); }); //엑섹불러오기 버튼 클릭시 파일 첨부 실행 $('.upImg').click(function(){ // 엑셀파일 불러오기 선택 시 $("#imgFile").click(); }); //최근전송내역 팝업 선택추가 버튼 처리(체크내역 받는사람 리스트로 추가해주기) $(document).on('click', '#latestAddPhone', function (){ var addPhoneList = []; $("input:checkbox[name='latAddrChk']:checked").each(function(){ var chkPhone = $(this).val().trim(); console.log('b chkPhone: ', chkPhone); if(!checkHpNum(chkPhone)){ // alert("올바른 전화번호가 아닙니다."); return false; } // console.log('a chkPhone: ', chkPhone); addPhoneList.push(chkPhone); }); if(addPhoneList.length < 1) { alert("연락처를 선택해주세요."); return false; } // 1. 기존 로직: 연락처 추가 처리 // addPhoneInfo(addPhoneList); // 2. Tabulator에 넣기 위한 포맷 변환 const formattedData = addPhoneList.map(num => ({phone: num})); // 3. 기존 테이블 데이터와 합치기 const existingData = tableL.getData(); const combinedData = existingData.concat(formattedData); // 4. 중복 제거 const result = removeDuplicatesAndCount(combinedData, 'phone'); // console.log('result: ', result); // 5. 테이블에 반영 // tableL.setData(result); // 6. 수량/가격 계산 setAllCntData(result); fn_priceClclt(); // 7. 팝업 닫기 $("#btnLatestAddPhoneClose").trigger("click"); }); //최근전송내역 팝업 선택 취소 버튼 처리 $(document).on('click', '#latestCancelPhone', function (){ $("input[name=latAddrChk]").prop("checked", false); }); //최근전송내역 팝업 삭제 버튼 처리 $(document).on('click', '#latestAddrDel', function (){ $(this).parent("#latestLi").remove(); }); //자주보내는 번호 팝업 선택추가 버튼 처리(체크내역 받는사람 리스트로 추가해주기) $(document).on('click', '#bookMarkAddPhone', function (){ var addPhoneList = []; //신규로 추가할 전화번호 저장변수 $("input:checkbox[name='bookAddrChk']:checked").each(function(index){ var chkPhone = $(this).val(); if(!checkHpNum(chkPhone)){ alert("올바른 전화번호가 아닙니다."); return false; }else{ addPhoneList.push({phone: removeDash(chkPhone.trim())}); } }); if(addPhoneList.length > 0){ //연락처 추가해 주기 addPhoneInfo(addPhoneList); $("#btnLatestAddPhoneClose").trigger("click"); } else { alert("연락처를 선택해주세요."); return false; } //중복연락처 제거 //var removeDuplData = dupliPhoneData(addPhoneList); //받는사람 목록에 추가 //tableL.addData(removeDuplData); //총 받는사람 수 계산 //totRows = tableL.getRows().length; //updateTotCnt(totRows); //결제 금액 구하기 //totalPriceSum(totRows); }); //자주보내는 번호 팝업 선택 취소 버튼 처리 $(document).on('click', '#bookMarkCancelPhone', function (){ $("input[name=bookAddrChk]").prop("checked", false); }); //자주보내는 번호 팝업 삭제 버튼 처리 $(document).on('click', '#bookMarkAddrDel', function (){ $(this).parent("#bookMarkLi").remove(); }); // 자주보내는 번호 팝업 닫기 버튼 처리 $(document).on('click', '#btnLatestAddPhoneClose', function (){ // 자주보내는 번호 체크박스 해제처리 setCheckBoxUnChecked(); }); // 자주보내는 번호 체크박스 해제처리 function setCheckBoxUnChecked() { $("input[name=latAddrChk]").prop("checked", false); $("input[name=bookAddrChk]").prop("checked", false); } }); var tableErrorData = []; var totRows = 0; // 좌측 받는사람 총 갯수 /* * 토탈 카운트 화면에 노출 * 변수 없는 리스트만 체크 */ function updateTotCnt(cnt){ $("#rowTotCnt").text(cnt); } //주소록 불러오기에서 수신자 리스트 화면에 추가해주기 function addPhoneInfo(taData){ if(taData == null){ alert("연락처 정보가 없습니다."); return; } // if(taData.length > 500){ // alert("최대 발송 건수는 500건 입니다."); // return; // } /* * 주소록 데이터 화면에 추가 */ this.fn_displayJsonToHtmlTable(taData); /* * 토탈 카운트 화면에 노출 */ this.updateTotCnt(); } /* * 주소록 데이터 화면에 추가 */ function fn_displayJsonToHtmlTable(taData){ // fn_viewDataInit01(); // 치환문자가 있으면 데이터 초기화 var $htmlBody = $('#wrap01_body'); var addHtml = '
$PHONE$
' +'\t$NAME$
' +'\t