guide:component:grid:grid_linenumber_basic [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 그리드 라인넘버 기본 가이드 ======

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

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

관련 속성으로 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

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_linenumber_basic.xml|grid_linenumber_basic.xml]]
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_linenumber_basic.js|grid_linenumber_basic.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/GRID/grid_linenumber_basic|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/COMPONENT/GRID/grid_linenumber_basic"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
// "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);
	}
}
</sxh>