그리드 이미지 가이드

그리드 데이터부의 image 속성 및 input_type이 9:image 속성 예시 화면이다.

그리드 데이터부의 image 관련 속성은 input_type이 0:editbox 인 경우 또는 10:image인 경우에 따라 적용되는 방식이 다르다.

input_type이 0:editbox인 경우, 아이템 데이터인 텍스트와 함께 이미지를 표시한다.

input_type이 10:image인 경우, 아이템 데이터는 이미지 관련 정보로 처리되며, 이미지만 표시한다.

input_type이 10:image인 경우에만, 컬럼 데이터부 “Image” 그룹의 속성값이 사용된다.

관련 속성으로 image, image_horzalign, image_vertalign, image_margin, image_mouse_cursor가 있다.

관련 컬럼 API로 getcolumnimage, setcolumnimage, getcolumnimageshow, setcolumnimageshow가 있다.

관련 아이템 API로 getitemimage, setitemimage, getitemimageshow, setitemimageshow가 있다.

관련 이벤트로 on_itemclick이 있다.

예시

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

템플릿 파일

화면 스크립트

// "setcolumnimage" 버튼 이벤트
function btn_setcolumnimage_on_mouseup(objInst)
{
	var column_image;

	column_image = this.grd.getcolumnimage(0);
	if (column_image == "/HTML5/COMPONENT/GRID/accd_max.jpg") {
		this.grd.setcolumnimage(0, "/HTML5/COMPONENT/GRID/accd_avg.jpg");
	}
	else {
		this.grd.setcolumnimage(0, "/HTML5/COMPONENT/GRID/accd_max.jpg");
	}
}

// "setcolumnimageshow" 버튼 이벤트
function btn_setcolumnimageshow_on_mouseup(objInst)
{
	// 특정 컬럼의 이미지 숨김 토글 처리
	this.grd.setcolumnimageshow(0, !this.grd.getcolumnimageshow(0));
}

// "setitemimageshow" 버튼 이벤트
function btn_setitemimageshow_on_mouseup(objInst)
{
	// 특정 아이템의 이미지 숨김 토글 처리
	this.grd.setitemimageshow(1, 0, !this.grd.getitemimageshow(1, 0));
}

// "setitemimage" 버튼 이벤트
function btn_setitemimage_on_mouseup(objInst)
{
	var item_image;

	// 특정 아이템의 이미지 변경 설정
	item_image = this.grd.getitemimage(1, 0);
	if (item_image == "/HTML5/COMPONENT/GRID/accd_max.jpg") {
		this.grd.setitemimage(1, 0, "/HTML5/COMPONENT/GRID/accd_avg.jpg");
	}
	else {
		this.grd.setitemimage(1, 0, "/HTML5/COMPONENT/GRID/accd_max.jpg");
	}
}

/**
 * 그리드 아이템 클릭 이벤트 처리
 * @param objInst 이벤트가 발생한 그리드 오브젝트
 * @param nClickRow 이벤트가 발생한 그리드 행 인덱스 (Zero-Based)
 * @param nClickColumn 이벤트가 발생한 그리드 열 인덱스 (Zero-Based)
 * @param bBtnClick 아이템의 버튼이 클릭되었는지 여부
 * @param nImgIndex 아이템의 이미지가 클릭된 경우, 아이템 이미지 인덱스 (이미지가 클릭되지 않은 경우, -1)
 * @param strImgUrl 아이템의 이미지가 클릭된 경우, 아이템 이미지 URL (이미지가 클릭되지 않은 경우, 공백문자열)
 */
function grd_event_on_itemclick(objInst, nClickRow, nClickColumn, bBtnClick, nImgIndex, strImgUrl)
{
	factory.consoleprint("on_itemclick> nClickRow = " + nClickRow);
	factory.consoleprint("on_itemclick> nClickColumn = " + nClickColumn);
	factory.consoleprint("on_itemclick> bBtnClick = " + bBtnClick);
	factory.consoleprint("on_itemclick> nImgIndex = " + nImgIndex);
	factory.consoleprint("on_itemclick> strImgUrl = " + strImgUrl);
}

목차

그리드 이미지 가이드

예시

화면 스크립트