그리드 인쇄 가이드

예시

템플릿 위치: /HTML5/COMPONENT/GRID/grid_print_basic

템플릿 파일

화면 스크립트

// 화면 로드 이벤트
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('<!doctype html>');
	arr_line.push('<html lang="ko">');
	arr_line.push('<head>');
	arr_line.push('<meta charset="utf-8">');
	arr_line.push('<meta name="viewport" content="width=device-width, initial-scale=1">');
	arr_line.push('<meta http-equiv="cache-control" content="no-cache">');
	arr_line.push('<meta http-equiv="pragma" content="no-cache">');
	arr_line.push('<link rel="stylesheet" type="text/css" href="./xf5/html/report.css"/>');
	arr_line.push('<link rel="shortcut icon" href="./xframe5.ico"/>');
	arr_line.push('<style>');
	// @page CSS 정보를 이용하여 스타일 지정
	// arr_line.push('@page { size: landscape; }'); // 가로인쇄
	// arr_line.push('@page { size: portrait; }'); // 세로인쇄
	arr_line.push('</style>');
	arr_line.push('<script type="text/javascript">');
	arr_line.push('/* 인쇄 버튼 이벤트 */');
	arr_line.push('function onprintclick() { window.print(); }');

	arr_line.push('/* 닫기 버튼 이벤트 */');
	arr_line.push('function opcloseclick() {');
	arr_line.push('    if (window.confirm("닫으시겠습니까?")) { window.close(); }');
	arr_line.push('}');

	arr_line.push('/* BODY onload 이벤트 */');
	arr_line.push('function onbodyload() {');
	arr_line.push('}');
	arr_line.push('</script>');
	arr_line.push('<title>xFrame5 Report</title>');
	arr_line.push('</head>');

	arr_line.push('<body oncontextmenu="return false;" onload="onbodyload();">');
	arr_line.push('<div class="xf_btnbox">');
	arr_line.push('    <button class="xf_print no_print" onclick="onprintclick()">인쇄</button>');
	arr_line.push('    <button class="xf_close no_print" onclick="opcloseclick()">닫기</button>');
	arr_line.push('</div>');
	arr_line.push('<div class="xf_report">');
	/////////////////////////////////////////////////////////////////////////////////
	// 인쇄용 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('</div>');
	arr_line.push('</body>');
	arr_line.push('</html>');
	/////////////////////////////////////////////////////////////////////////////////
	// 인쇄용 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('<!doctype html>');
	arr_line.push('<html lang="ko">');
	arr_line.push('<head>');
	arr_line.push('<meta charset="utf-8">');
	arr_line.push('<meta name="viewport" content="width=device-width, initial-scale=1">');
	arr_line.push('<meta http-equiv="cache-control" content="no-cache">');
	arr_line.push('<meta http-equiv="pragma" content="no-cache">');
	arr_line.push('<link rel="stylesheet" type="text/css" href="./xf5/html/report.css"/>');
	arr_line.push('<link rel="shortcut icon" href="./xframe5.ico"/>');
	arr_line.push('<style>');
	arr_line.push('</style>');
	arr_line.push('<script type="text/javascript">');
	arr_line.push('/* 인쇄 버튼 이벤트 */');
	arr_line.push('function onprintclick() { window.print(); }');

	arr_line.push('/* 닫기 버튼 이벤트 */');
	arr_line.push('function opcloseclick() {');
	arr_line.push('    if (window.confirm("닫으시겠습니까?")) { window.close(); }');
	arr_line.push('}');

	arr_line.push('/* BODY onload 이벤트 */');
	arr_line.push('function onbodyload() {');
	arr_line.push('}');
	arr_line.push('</script>');
	arr_line.push('<title>xFrame5 Report</title>');
	arr_line.push('</head>');

	arr_line.push('<body oncontextmenu="return false;" onload="onbodyload();">');
	arr_line.push('<div class="xf_btnbox">');
	arr_line.push('    <button class="xf_print no_print" onclick="onprintclick()">인쇄</button>');
	arr_line.push('    <button class="xf_close no_print" onclick="opcloseclick()">닫기</button>');
	arr_line.push('</div>');
	arr_line.push('<div class="xf_report">');
	/////////////////////////////////////////////////////////////////////////////////
	// 인쇄용 HTML 기본 상단부 끝
	/////////////////////////////////////////////////////////////////////////////////

	/////////////////////////////////////////////////////////////////////////////////
	// 인쇄용 HTML 내용 생성 시작
	/////////////////////////////////////////////////////////////////////////////////
	// 인쇄용 타이틀 표시용 HTML 생성 시작
	arr_line.push('<div class="xf_title">' + fld_title.gettext() + '</div>');
	// 인쇄용 타이틀 표시용 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('</div>');
	arr_line.push('</body>');
	arr_line.push('</html>');
	/////////////////////////////////////////////////////////////////////////////////
	// 인쇄용 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('<tr>');
	html_body_arr.push('<tr>');

	sign_name_count = sign_name_arr.length;
	for (i = 0; i < sign_name_count; i++) {
		html_head_arr.push('<th>');
		html_head_arr.push(sign_name_arr[i]);
		html_head_arr.push('</th>');

		html_body_arr.push('<td></td>');
	}
	html_head_arr.push('</tr>');
	html_body_arr.push('</tr>');

	html_sign_arr.push('<table class="xf_sign">');

    html_sign_arr.push('<thead class="xf_sign_head">');
	html_sign_arr.push(html_head_arr.join(''));
    html_sign_arr.push('</thead>');

    html_sign_arr.push('<tbody class="xf_sign_body">');
	html_sign_arr.push(html_body_arr.join(''));
    html_sign_arr.push('</tbody>');

	html_sign_arr.push('</table>');

	return html_sign_arr.join('');
}

  • guide/component/grid/grid_print_basic.txt
  • 마지막으로 수정됨: 2023/05/11 16:20
  • 저자 127.0.0.1