====== 그리드 아이템 편집 기본 가이드 ====== 그리드 및 그리드 데이터부의 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; }