Index: arms/html/pdService/content-container.html =================================================================== diff -u -raec408f6b141ab406619f8f5d5c491004311ff3f -r6cda93b76ec474e47c8db3271409bfbf2689c5f6 --- arms/html/pdService/content-container.html (.../content-container.html) (revision aec408f6b141ab406619f8f5d5c491004311ff3f) +++ arms/html/pdService/content-container.html (.../content-container.html) (revision 6cda93b76ec474e47c8db3271409bfbf2689c5f6) @@ -40,12 +40,6 @@ class="display responsive no-wrap" id="pdserviceTable" > - - - c_id - c_title - - Index: reference/jquery-plugins/select2-4.0.13/src/scss/theme/default/layout.scss =================================================================== diff -u -r714eeef72077595531d3f8f4c3c4891f45af86d2 -r6cda93b76ec474e47c8db3271409bfbf2689c5f6 --- reference/jquery-plugins/select2-4.0.13/src/scss/theme/default/layout.scss (.../layout.scss) (revision 714eeef72077595531d3f8f4c3c4891f45af86d2) +++ reference/jquery-plugins/select2-4.0.13/src/scss/theme/default/layout.scss (.../layout.scss) (revision 6cda93b76ec474e47c8db3271409bfbf2689c5f6) @@ -785,4 +785,92 @@ }else{ return false } -}; \ No newline at end of file +}; + + +//////////////////////////////////////////////////////////////////////////////////////// +//데이터 테이블 +//////////////////////////////////////////////////////////////////////////////////////// +// -------------------- 데이터 테이블을 만드는 템플릿으로 쓰기에 적당하게 리팩토링 함. ------------------ // +function dataTable_build(jquerySelector, ajaxUrl, jsonRoot, columnList, rowsGroupList, columnDefList, selectList, orderList, buttonList) { + + var jQueryElementID = jquerySelector; //"#reqStatusTable"; + var reg = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi; + var jQueryElementStr = jQueryElementID.replace(reg,''); + console.log("jQueryElementStr ======== " + jQueryElementStr ); + console.log("dataTableBuild :: jQueryElementID -> " + jQueryElementID); + console.log("dataTableBuild :: columnList -> " + columnList); + console.log("dataTableBuild :: rowsGroupList -> " + rowsGroupList); + + console.log("dataTableBuild :: href: " + $(location).attr("href")); + console.log("dataTableBuild :: protocol: " + $(location).attr("protocol")); + console.log("dataTableBuild :: host: " + $(location).attr("host")); + console.log("dataTableBuild :: pathname: " + $(location).attr("pathname")); + console.log("dataTableBuild :: search: " + $(location).attr("search")); + console.log("dataTableBuild :: hostname: " + $(location).attr("hostname")); + console.log("dataTableBuild :: port: " + $(location).attr("port")); + + var tempDataTable = $(jQueryElementID).DataTable({ + ajax: { + url: ajaxUrl, + dataSrc: '' + }, + destroy: true, + processing: true, + responsive: false, + columns: columnList, + rowsGroup: rowsGroupList, + columnDefs: columnDefList, + select: selectList, + order: orderList, + buttons: buttonList, + language: { + processing: ' ' + }, + drawCallback: function() { + console.log("dataTableBuild :: drawCallback"); + if ($.isFunction(dataTableCallBack )) { + //데이터 테이블 그리고 난 후 시퀀스 이벤트 + dataTableCallBack(); + } + } + }); + + $(jQueryElementID + " tbody").on("click", "tr", function () { + + if ($(this).hasClass("selected")) { + $(this).removeClass("selected"); + } else { + tempDataTable.$("tr.selected").removeClass("selected"); + $(this).addClass("selected"); + } + + var selectedData = tempDataTable.row(this).data(); + selectedData.selectedIndex = $(this).closest('tr').index(); + + var info = tempDataTable.page.info(); + console.log( 'Show page: '+info.page+' of '+info.pages ); + selectedData.selectedPage = info.page; + + dataTableClick(selectedData); + }); + + // ----- 데이터 테이블 빌드 이후 스타일 구성 ------ // + //datatable 좌상단 datarow combobox style + $(".dataTables_length").find("select:eq(0)").addClass("darkBack"); + $(".dataTables_length").find("select:eq(0)").css("min-height", "30px"); + //min-height: 30px; + + // ----- 데이터 테이블 빌드 이후 별도 스타일 구성 ------ // + //datatable 좌상단 datarow combobox style + $("body").find("[aria-controls='" + jQueryElementStr + "']").css("width", "100px"); + $("select[name=" + jQueryElementStr + "]").css("width", "50px"); + + $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { + console.log(message); + jError("Notification : Ajax Error, retry plz !"); + }; + + return tempDataTable; +} +// -------------------- 데이터 테이블을 만드는 템플릿으로 쓰기에 적당하게 리팩토링 함. ------------------ // \ No newline at end of file Index: arms/js/pdService.js =================================================================== diff -u -rbf6872a6ccbbfdf62effa434d924b78b553067be -r6cda93b76ec474e47c8db3271409bfbf2689c5f6 --- arms/js/pdService.js (.../pdService.js) (revision bf6872a6ccbbfdf62effa434d924b78b553067be) +++ arms/js/pdService.js (.../pdService.js) (revision 6cda93b76ec474e47c8db3271409bfbf2689c5f6) @@ -1,10 +1,47 @@ -let selectId; // 제품 아이디 -let selectName; // 제품 이름 -let selectedIndex; // 데이터테이블 선택한 인덱스 -let selectedPage; // 데이터테이블 선택한 인덱스 -let selectVersion; // 선택한 버전 아이디 -let dataTableRef; // 데이터테이블 참조 변수 +//////////////////////////////////////////////////////////////////////////////////////// +//Page 전역 변수 +//////////////////////////////////////////////////////////////////////////////////////// +var selectId; // 제품 아이디 +var selectName; // 제품 이름 +var selectedIndex; // 데이터테이블 선택한 인덱스 +var selectedPage; // 데이터테이블 선택한 인덱스 +var selectVersion; // 선택한 버전 아이디 +var dataTableRef; // 데이터테이블 참조 변수 +//////////////////////////////////////////////////////////////////////////////////////// +//Document Ready +//////////////////////////////////////////////////////////////////////////////////////// +function execArmsDocReady () { + + // 사이드 메뉴 색상 설정 + setSideMenu("sidebar_menu_product", "sidebar_menu_product_manage"); + + // 파일 업로드 관련 레이어 숨김 처리 + $('.body-middle').hide(); + + // 데이터 테이블 로드 함수 + dataTableLoad(); + +} + +//////////////////////////////////////////////////////////////////////////////////////// +//탭 클릭 이벤트 처리 +//////////////////////////////////////////////////////////////////////////////////////// +// 탭 클릭 이벤트 +$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { + var target = $(e.target).attr("href"); // activated tab + + if (target == "#dropdown1") { + $('.body-middle').hide(); + } else { + if (selectId == undefined) { + $('.body-middle').hide(); + } else { + $('.body-middle').show(); + } + } +}); + // --- 에디터 설정 --- // CKEDITOR.replace("input_pdservice_editor"); CKEDITOR.replace("extendModalEditor"); @@ -214,34 +251,7 @@ }); -// document ready -function execArmsDocReady () { - // 사이드 메뉴 색상 설정 - setSideMenu("sidebar_menu_product", "sidebar_menu_product_manage"); - - // 파일 업로드 관련 레이어 숨김 처리 - $('.body-middle').hide(); - - // 데이터 테이블 로드 함수 - dataTableLoad(); - - // 탭 클릭 이벤트 - $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { - var target = $(e.target).attr("href"); // activated tab - - if (target == "#dropdown1") { - $('.body-middle').hide(); - } else { - if (selectId == undefined) { - $('.body-middle').hide(); - } else { - $('.body-middle').show(); - } - } - }); -}; - /** file upload **/ $(function () { 'use strict'; @@ -294,16 +304,37 @@ function dataTableLoad() { // 데이터 테이블 컬럼 및 열그룹 구성 var columnList = [ - { data: "c_id" }, - { data: "c_title" }, + { name: "c_id", + title: "제품(서비스) 아이디", + data: "c_id", + visible: false + }, + { + name: "c_title", + title: "제품(서비스) 이름", + data: "c_title", + render: function (data, type, row, meta) { + if (type === 'display') { + return ''; + } + + return data; + }, + className: "dt-body-left", + visible: true + }, ]; var rowsGroupList = []; - dataTableRef = dataTableBuild("#pdserviceTable", "pdService", "/getPdServiceMonitor.do", columnList, rowsGroupList); + var columnDefList = []; + var selectList = {}; + var orderList = [[ 1, 'asc' ]]; + var buttonList = []; - // ----- 데이터 테이블 빌드 이후 별도 스타일 구성 ------ // - //datatable 좌상단 datarow combobox style - $("body").find("[aria-controls='pdserviceTable']").css("width", "100px"); - $("select[name=pdserviceTable_length]").css("width", "50px"); + var jquerySelector = "#pdserviceTable"; + var ajaxUrl = "/auth-user/api/arms/pdService/getPdServiceMonitor.do"; + var jsonRoot = ""; + + dataTableRef = dataTable_build(jquerySelector, ajaxUrl, jsonRoot, columnList, rowsGroupList, columnDefList, selectList, orderList, buttonList); } // 데이터 테이블 구성 이후 꼭 구현해야 할 메소드 : 열 클릭시 이벤트