====== 그리드 아이템 편집 기본 가이드 ======
그리드 및 그리드 데이터부의 editable 속성 값 예시 화면이다.
editable 속성은 사용자의 컬럼 데이터부 아이템 데이터 편집 가능 여부를 설정한다.
combobox/calendar/spinnumber_editable 속성은 편집 상태에서 각 입력 방식의 아이템 값을 사용자의 키 입력을 통한 변경 가능 여부를 지정한다.
그리드의 seteditable API 호출시 컬럼별/아이템별 editable 상태 정보는 유지된다.
그리드, 컬럼, 아이템별 editable 관련 API 호출 순서에 따라 적용된다.
관련 속성으로 editable이 있다.
관련 컬럼 데이터부 속성으로 editable, edit_focus_select이 있다.
관련 API로 geteditable, seteditable, getcolumneditable. setcolumneditable, getitemeditable, setitemeditable이 있다.
관련 편집 처리 API로 setitemeditstartex, setnextitemeditstart, setitemeditsel가 있다.
관련 이벤트로 on_itemeditshow, on_itemeditcomplete가 있다.
관련 실행파라미로 GRID_DBLCLICKEDIT, GRID_CLICKEDIT_TYPE, GRID_ITEMEDIT_ARROWKEYACTION, KEYMAP_GRID_ENTER_EDITMODE가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/GRID/grid_edit_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_edit_basic.xml|grid_edit_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_edit_basic.js|grid_edit_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/GRID/grid_edit_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 화면 로드 이벤트
function screen_on_load()
{
// 그리드 editable 상태 헤더에 표시
this.DisplayGridEditable();
}
// "seteditable" 버튼 이벤트
function btn_seteditable_on_click(objInst)
{
// 그리드 editable 속성 토글 처리
// 그리드의 seteditable API 호출시 컬럼별/아이템별 editable 상태 정보는 유지된다.
// 그리드, 컬럼, 아이템별 editable 관련 API 호출 순서에 따라 적용된다.
this.grd.seteditable(!this.grd.geteditable());
// 그리드 editable 상태 헤더에 표시
this.DisplayGridEditable();
}
// "setcolumneditable" 버튼 이벤트
function btn_setcolumneditable_on_click(objInst)
{
// 컬럼 editable 속성 토글 처리
this.grd.setcolumneditable(0, !this.grd.getcolumneditable(0));
// 그리드 editable 상태 헤더에 표시
this.DisplayGridEditable();
}
// "setitemeditable" 버튼 이벤트
function btn_setiitemeditable_on_click(objInst)
{
// 아이템 editable 속성 토글 처리
this.grd.setitemeditable(1, 0, !this.grd.getitemeditable(1, 0));
}
// 그리드 editable 상태 헤더에 표시
function DisplayGridEditable()
{
var i, count;
// 그리드 editable 속성 값을 그리드 헤더에 표시
if (this.grd.geteditable()) {
this.grd.setheadertext(0, 0, "그리드 editable 속성: true");
}
else {
this.grd.setheadertext(0, 0, "그리드 editable 속성: false");
}
count = this.grd.getcolumncount();
// 그리드 컬럼 데이터부 editable 속성 값을 그리드 헤더에 표시
for (i = 0; i < this.grd.getcolumncount(); i++) {
if (this.grd.getcolumneditable(i)) {
this.grd.setheadertext(2, i, "true");
}
else {
this.grd.setheadertext(2, i, "false");
}
}
}
// "setitemeditstartex" 버튼 이벤트
function btn_setitemeditstartex_on_click(objInst)
{
this.grd.setitemeditstartex(0, 0, true, true);
}
// "setnextitemeditstart" 버튼 이벤트
function btn_setnextitemeditstart_on_click(objInst)
{
var select_row, select_column;
select_row = this.grd.getselectrow();
select_column = this.grd.getselectcolumn();
this.grd.setnextitemeditstart(select_row, select_column, true, false);
}
// "setitemeditsel" 버튼 이벤트
function btn_setitemeditsel_on_click(objInst)
{
// 텍스트의 맨끝으로(블럭지정 안됨) 커서 이동
this.grd.setitemeditsel(-1, -1);
}
/**
* 그리드 아이템이 편집 상태가 시작/종료 시점에 발생하는 이벤트
*
* @param {Object} objInst 그리드 컴포넌트 인스턴스
* @param {number} nRow 그리드 행 인덱스 (Zero-Based)
* @param {number} nColumn 그리드 열 인덱스 (Zero-Based)
* @param {boolean} bShowEdit 편집 시작/종료 여부
*/
function grd_on_itemeditshow(objInst, nRow, nColumn, bShowEdit)
{
factory.consoleprint("on_itemeditshow> Start");
factory.consoleprint("on_itemeditshow> Grid Object Name = " + objInst.getname());
factory.consoleprint("on_itemeditshow> nRow = " + nRow);
factory.consoleprint("on_itemeditshow> nColumn = " + nColumn);
factory.consoleprint("on_itemeditshow> bShowEdit = " + bShowEdit);
}
/**
* 그리드 아이템이 편집 완료 시점에 발생하는 이벤트
*
* @param {Object} objInst 그리드 컴포넌트 인스턴스
* @param {number} nRow 그리드 행 인덱스 (Zero-Based)
* @param {number} nColumn 그리드 열 인덱스 (Zero-Based)
* @param {string} strPrevItemText 편집전 아이템 값
*
* @returns {number} 키 처리 방식
* 0 - 편집만 완료하고, 포커스가 이동하지 않음
* 1 - 그리드 내에서 다음으로 편집이 가능한 아이템으로 포커스 이동
* 2 - 편집된 값을 취소하고, 포커스가 이동하지 않음
*/
function grd_on_itemeditcomplete(objInst, nRow, nColumn, strPrevItemText)
{
factory.consoleprint("on_itemeditcomplete> Start");
factory.consoleprint("on_itemeditcomplete> Grid Object Name = " + objInst.getname());
factory.consoleprint("on_itemeditcomplete> nRow = " + nRow);
factory.consoleprint("on_itemeditcomplete> nColumn = " + nColumn);
factory.consoleprint("on_itemeditcomplete> strPrevItemText = " + strPrevItemText);
return 1;
}