그리드 라인넘버 기본 가이드

그리드 라인넘버 속성 관련 예시 화면이다.

그리드 라인넘버 컬럼은 데이터의 일련번호 정보를 보여주기 위한 그리드 기능이다.

관련 속성으로 linenumber_show, linenumber_title, linenumber_width, linenumber_resizable이 있다.

관련 API로 getlinenumbershow, setlinenumbershow, getlinenumberwidth, setlinenumberwidth이 있다.

관련 API로 getlinenumberresizable, setlinenumberresizable이 있다.

관련 EVENT로 on_headerclick, on_itemclick, on_statitemclick이 있다.

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

템플릿 파일

• grid_linenumber_basic.xml
• grid_linenumber_basic.js
• 새창으로 실행

// "setlinenumbershow" 버튼 이벤트
function btn_setlinenumbershow_on_mouseup(objInst)
{
   // 라인넘버 컬럼 표시 토글 처리
	this.grd.setlinenumbershow(!this.grd.getlinenumbershow());
}

// "setlinenumberbackcolorex" 버튼 이벤트
function setlinenumberbackcolorex_on_mouseup(objInst)
{
	// 두번째 행의 라인넘버 컬럼 배경색 변경
	this.grd.setlinenumberbackcolorex(1, factory.rgb(255, 0, 0));
}

// "setlinenumbertitle" 버튼 이벤트
function setlinenumbertitle_on_mouseup(objInst)
{
	// 순번 컬럼 헤더 타이틀 변경
	this.grd.setlinenumbertitle(this.grd.getlinenumbertitle() + "*");
}

// "setlinenumberwidth" 버튼 이벤트
function btn_setlinenumberwidth_on_mouseup(objInst)
{
	// 라인넘버 컬럼 너비 10 증가 처리
	this.grd.setlinenumberwidth(this.grd.getlinenumberwidth() + 10);
}

// "setlinenumberresizable" 버튼 이벤트
function btn_setlinenumberresizable_on_mouseup(objInst)
{
	// 라인넘버 컬럼 너비를 변경가능 여부 토글 처리
	this.grd.setlinenumberresizable(!this.grd.getlinenumberresizable());
}

// 헤더행 라인넘버 컬럼 클릭시 컬럼 파라미터 값이 -1로 전달됨
function grd_on_headerclick(objInst, nHeaderRow, nHeaderCol)
{
	if (nHeaderCol == -1) {
		screen.alert("헤더행 라인넘버 컬럼 클릭, 열 = -1, 행 = " + nHeaderRow);
	}
}

// 데이터행 라인넘버 컬럼 클릭시 컬럼 파라미터 값이 -1로 전달됨
function grd_on_itemclick(objInst, nClickRow, nClickColumn, bBtnClick, nImgIndex, strImgUrl)
{
	if (nClickColumn == -1) {
		screen.alert("데이터행 라인넘버 컬럼 클릭, 열 = -1, 행 = " + nClickRow);
	}
}

// 통계행 라인넘버 컬럼 클릭시 컬럼 파라미터 값이 -1로 전달됨
function grd_on_statitemclick(objInst, nStatRowFlag, nStatColumnFlag, nRow, nColumn)
{
	if (nColumn == -1) {
		screen.alert("통계행 라인넘버 컬럼 클릭, 열 = -1, 행 = " + nRow);
	}
}