====== 그리드 인쇄 가이드 ====== ===== 예시 ===== 템플릿 위치: /HTML5/COMPONENT/GRID/grid_print_basic 템플릿 파일 * [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_print_basic.xml|grid_print_basic.xml]] * [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_print_basic.js|grid_print_basic.js]] * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/GRID/grid_print_basic|새창으로 실행]] echo ''; echo ''; echo ''; ==== 화면 스크립트 ==== // 화면 로드 이벤트 function screen_on_load() { // 그리드 컬럼 정보 설정 this.setcolumninfo(this.grd_data_1, this.grd_column_1); this.setcolumninfo(this.grd_data_2, this.grd_column_2); // 결제선/출력 대상 그리드 모두 체크 this.grd_sign.setcheckedallrow(true); this.grd_grid.setcheckedallrow(true); } // 페이지 로드 완료 이벤트 function web_on_pageload(objInst) { chk_pageload.setcheck(true); } // 리포트 초기화 버튼 이벤트 function btn_clear_on_mouseup(objInst) { chk_pageload.setcheck(false); web.clear(); } // 리포트 인쇄 버튼 이벤트 function btn_print_on_mouseup(objInst) { if (chk_pageload.getcheck(true)) { web.callscriptfunc("onprintclick()"); } else { screen.alert("not loaded"); } } function btn_report_basic_on_mouseup(objInst) { var html_info, report_option, arr_line; // 인쇄용 출력 옵션 report_option = { page_break: true, // 여러개 그리드 출력시, 그리드별 페이지 분할 여부 line_number: true // 순번 컬럼 포함 여부 }; arr_line = []; ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 기본 상단부 시작 ///////////////////////////////////////////////////////////////////////////////// arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push('xFrame5 Report'); arr_line.push(''); arr_line.push(''); arr_line.push('
'); arr_line.push(' '); arr_line.push(' '); arr_line.push('
'); arr_line.push('
'); ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 기본 상단부 끝 ///////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 내용 생성 시작 ///////////////////////////////////////////////////////////////////////////////// html_info = grd_data_1.getprinthtml(report_option, null, null); // 그리드 내용 HTML 표시 시작 arr_line.push(html_info.html_grid_start); arr_line.push(html_info.html_colgroup_arr.join('')); arr_line.push(html_info.html_thead_arr.join('')); arr_line.push(html_info.html_tbody_arr.join('')); arr_line.push(html_info.html_grid_end); ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 내용 생성 끝 ///////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 기본 하단부 시작 ///////////////////////////////////////////////////////////////////////////////// arr_line.push('
'); arr_line.push(''); arr_line.push(''); ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 기본 하단부 끝 ///////////////////////////////////////////////////////////////////////////////// // 웹브라우저 컴포넌트 내부 HTML 내용 설정, // 페이지 로드 완료시, on_pageload 이벤트 발생함 web.sethtml(arr_line.join('')); } // 리포트 생성 버튼 이벤트 function btn_report_on_mouseup(objInst) { var html_info, sign_name_arr, grid_info_arr, grid_info_count, grid_info_index, css_class_info, report_option; chk_pageload.setcheck(false); // 인쇄용 HTML 스타일 지정용 CSS 클래스 정의 오브젝트 설정 css_class_info = {}; css_class_info.table = 'xf_data'; css_class_info.thead = 'xf_data_head'; css_class_info.thead_tr = 'xf_data_head_tr'; css_class_info.th_linenumber = 'xf_th_linenumber'; css_class_info.th_column = 'xf_th_column'; css_class_info.tbody = 'xf_data_body'; css_class_info.tbody_tr = 'xf_data_body_tr'; css_class_info.td_linenumber = 'xf_td_linenumber'; css_class_info.td_column = 'xf_td_column'; // 인쇄용 출력 옵션 report_option = { page_break: this.chk_pagebreak.getcheck(), line_number: this.chk_linenumber.getcheck() }; arr_line = []; ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 기본 상단부 시작 ///////////////////////////////////////////////////////////////////////////////// arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push(''); arr_line.push('xFrame5 Report'); arr_line.push(''); arr_line.push(''); arr_line.push('
'); arr_line.push(' '); arr_line.push(' '); arr_line.push('
'); arr_line.push('
'); ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 기본 상단부 끝 ///////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 내용 생성 시작 ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 타이틀 표시용 HTML 생성 시작 arr_line.push('
' + fld_title.gettext() + '
'); // 인쇄용 타이틀 표시용 HTML 생성 끝 // 결재 대상 이름 배열을 구하고 HTML 생성 시작 sign_name_arr = this.getsignnamearr(); arr_line.push(this.reportsignhtml(sign_name_arr)); // 결재 대상 이름 배열을 구하고 HTML 생성 끝 // 인쇄용 대상 그리드 정보 배열 생성하고, HTML 생성 시작 grid_info_arr = this.getgridinfoarr(); grid_info_count = grid_info_arr.length; for (grid_info_index = 0; grid_info_index < grid_info_count; grid_info_index++) { // grid_info = { inst_grid: grd_data, column_index_arr: column_index_arr } grid_info = grid_info_arr[grid_info_index]; // 그리드별 페이지 분할 옵션을 사용하는 경우, 두번째 그리드용 테이블에 인쇄 페이지 분할용 CSS 설정 if (grid_info_index > 0 && report_option && report_option.page_break) { css_class_info.table = 'xf_data xf_data_newpage'; } html_info = grid_info.inst_grid.getprinthtml(report_option, css_class_info, grid_info.column_index_arr); // console.log(html_info); // 그리드 내용 HTML 표시 시작 arr_line.push(html_info.html_grid_start); arr_line.push(html_info.html_colgroup_arr.join('')); arr_line.push(html_info.html_thead_arr.join('')); arr_line.push(html_info.html_tbody_arr.join('')); arr_line.push(html_info.html_grid_end); // 그리드 내용 HTML 표시 끝 } // 인쇄용 대상 그리드 정보 배열 생성하고, HTML 생성 끝 ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 내용 생성 끝 ///////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 기본 하단부 시작 ///////////////////////////////////////////////////////////////////////////////// arr_line.push('
'); arr_line.push(''); arr_line.push(''); ///////////////////////////////////////////////////////////////////////////////// // 인쇄용 HTML 기본 하단부 끝 ///////////////////////////////////////////////////////////////////////////////// // 웹브라우저 컴포넌트 내부 HTML 내용 설정, 페이지 로드 완료시, on_pageload 이벤트 발생함 web.sethtml(arr_line.join('')); } // 출력 대상 그리드 정보 배열 리턴 function getgridinfoarr() { var row_count, row_index, grid_info_arr; // 결재 대상 이름 배열 생성 grid_info_arr = []; row_count = this.grd_grid.getrowcount(); for (row_index = 0; row_index < row_count; row_index++) { if (this.grd_grid.ischeckedrow(row_index) == false) { continue; } if (this.grd_grid.getitemtext(row_index, 1) == "grd_data_1") { grid_info_arr.push(this.getgridinfo(this.grd_data_1, this.grd_column_1)); } else { grid_info_arr.push(this.getgridinfo(this.grd_data_2, this.grd_column_2)); } } return grid_info_arr; } // 출력 대상 그리드 정보 오브젝트 리턴 function getgridinfo(grd_data, grd_column) { var row_index, row_count, column_index_arr; // 출력 대상 컬럼 인덱스 배열 생성 column_index_arr = []; row_count = grd_column.getrowcount(); for(row_index = 0; row_index < row_count; row_index++) { if (grd_column.ischeckedrow(row_index) == false) { continue; } // column_index_arr.push(row_index); column_index_arr.push(grd_column.getitemtext(row_index, 1)); } return { inst_grid: grd_data, column_index_arr: column_index_arr } } // 그리드 컬럼 정보 설정 function setcolumninfo(grd_data, grd_column) { var row, column_count, column_index; column_count = grd_data.getcolumncount(); for (column_index = 0; column_index < column_count; column_index++) { row = grd_column.addrow(); grd_column.setitemtext(row, 0, grd_data.getheadertext(0, column_index)); grd_column.setitemtext(row, 1, column_index); } grd_column.setcheckedallrow(true); } // 결재 대상 이름 배열 리턴 function getsignnamearr(grd_data, grd_column) { var row_count, row_index, sign_name_arr; // 결재 대상 이름 배열 생성 sign_name_arr = []; row_count = this.grd_sign.getrowcount(); for (row_index = 0; row_index < row_count; row_index++) { if (this.grd_sign.ischeckedrow(row_index) == false) { continue; } sign_name_arr.push(this.grd_sign.getitemdisplaytext(row_index, 0)); } return sign_name_arr; } function btnUpDown_grd_on_mouseup(objInst) { var inst_name, name_arr, is_up, grd_name; inst_name = objInst.getname(); name_arr = inst_name.split("_"); if(name_arr[0] == "btnDn") { is_up = false; } else { is_up = true;true } name_arr.splice(0, 1); grd_name = name_arr.join("_"); inst_grid = screen.getinstancebyname(grd_name); this.gridrowupdown(inst_grid, is_up, true); } function gridrowupdown(inst_grd, is_up, is_select) { var src_row_index, dst_row_index; src_row_index = inst_grd.getselectrow(); if (is_up) { dst_row_index = src_row_index - 1; } else { dst_row_index = src_row_index + 1; } if (inst_grd.moverow(src_row_index, dst_row_index, true)) { if (is_select) { inst_grd.setselectrow(dst_row_index); } } } // 인쇄용 결재선 생성 function reportsignhtml(sign_name_arr) { var html_sign_arr, html_head_arr, html_body_arr, i, sign_name_count; html_sign_arr = []; html_head_arr = []; html_body_arr = []; html_head_arr.push(''); html_body_arr.push(''); sign_name_count = sign_name_arr.length; for (i = 0; i < sign_name_count; i++) { html_head_arr.push(''); html_head_arr.push(sign_name_arr[i]); html_head_arr.push(''); html_body_arr.push(''); } html_head_arr.push(''); html_body_arr.push(''); html_sign_arr.push(''); html_sign_arr.push(''); html_sign_arr.push(html_head_arr.join('')); html_sign_arr.push(''); html_sign_arr.push(''); html_sign_arr.push(html_body_arr.join('')); html_sign_arr.push(''); html_sign_arr.push('
'); return html_sign_arr.join(''); }