====== 그리드 이미지 가이드 ======
그리드 데이터부의 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
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_image_basic.xml|grid_image_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_image_basic.js|grid_image_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/GRID/grid_image_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// "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);
}