====== jquery-barcode 샘플 가이드 ======
이 화면은 https://barcode-coder.com/en/ 사이트에서 제공하는 라이브러리를 이용한 바코드 생성 샘플 화면이다.
템플릿이 저장된 디렉토리의 jquery-barcode.min.js 파일(Version : 2.2)을 활용하세요.
라이브러리에 대한 자셍한 설명은 https://barcode-coder.com/en/ 사이트를 참조하세요.
===== 예시 =====
템플릿 위치: /HTML5/OSS/barcode_coder
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/OSS/barcode_coder.xml|barcode_coder.xml]]
* [[xf5projecthome>template/screen/HTML5/OSS/barcode_coder.js|barcode_coder.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/OSS/barcode_coder|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
function b1_on_mouseup(objInst)
{
// 바코드 생성 라이브러리 로드 (프로젝트 환경에 따라 경로를 달라질 수 있음)
// 템플릿이 저장된 디렉토리의 jquery-barcode.min.js 파일을 활용하세요.
// screen.loadjs("./project/terminal/ext/lib/jquery-barcode.min.js");
screen.loadjs("./ext/lib/jquery-barcode.min.js");
}
function btn_generatebarcode_on_mouseup(objInst)
{
var barcode_data, div_jdom, i, row_count;
// DIV 오브젝트에 해당하는 jQuery 오브젝트를 구함
div_jdom = this.div_barcode.getjdom();
row_count = this.grd.getrowcount();
for (i = 0; i < row_count; i++) {
// 바코드 데이터를 구해 바코드 생성 API 호출 (jquery-barcode.min.js 라이브러리 기능)
barcode_data = this.grd.getitemtext(i, 0);
div_jdom.barcode(barcode_data, "code128", { barHeight:30 });
// 바코드 생성 내용을 DIV로 감싸서 그리드 아이템에 값 설정
this.grd.setitemtext(i, 1, '
' + this.div_barcode.getinnerhtml() + '
', false);
}
// 그리드 Refresh
this.grd.refresh();
// 바코드 생성 API 호출 (jquery-barcode.min.js 라이브러리 기능)
div_jdom.barcode("1234567890128", "code128", { barHeight:30 });
}
function btn_printbarcodegrid_on_mouseup(objInst)
{
var html_tbody, arr_line;
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('
');
var html_info = this.grd.getprinthtml({
page_break: true, // 여러개 그리드 출력시, 그리드별 페이지 분할 여부
line_number: true // 순번 컬럼 포함 여부
});
// 그리드 내용 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(''));
// barcode 출력 부분을 inline-block 형태로 변경
// arr_line.push(html_info.html_tbody_arr.join(''));
html_tbody = html_info.html_tbody_arr.join('');
html_tbody = html_tbody.replaceAll('data-type="barcode" style="display:block;', 'data-type="barcode" style="display:inline-block;margin:4px;');
arr_line.push(html_tbody);
arr_line.push(html_info.html_grid_end);
arr_line.push(html_info.html_grid_end);
// 그리드 내용 HTML 표시 끝
/////////////////////////////////////////////////////////////////////////////////
// 인쇄용 HTML 기본 하단부 시작
/////////////////////////////////////////////////////////////////////////////////
arr_line.push('
');
arr_line.push('');
arr_line.push('');
/////////////////////////////////////////////////////////////////////////////////
// 인쇄용 HTML 기본 하단부 끝
/////////////////////////////////////////////////////////////////////////////////
// 웹브라우저 컴포넌트 내부 HTML 내용 설정, 페이지 로드 완료시, on_pageload 이벤트 발생함
this.web.sethtml(arr_line.join(''));
}
function btn_print_on_mouseup(objInst)
{
var browser_window;
browser_window = this.web.getbrowserwindow();
browser_window.print();
}