SMART datagrid v1.4 > Examples

Back  Forward

Edit Keys  Example

SMART datagrid는 기간 업무용 어플리케이션을 위한 개발 및 사용자 툴로서 사용자가 데이터를 보다 쉽고 정확하게 다룰 수 있도록 다양한 사용자 인터페이스 방식을 지원한다. 특히, 대부분의 동작을 키보드로 무난히 수행할 수 있도록 하고 있다. 또, 중요한 입력 지점마다 이벤트를 발생시켜서 융통성있는 어플리케이션을 개발할 수 있도록 한다. 

키보드 동작과 관련된 설정들은 주로 GridBase.editOptions에 포함되어 있다. 

1. 포커스셀 이동

셀 사이의 이동은 기본적으로 방향키를 이용하는데, useTabKeytrue면 tab 키로 다음 셀, shift+tab 키로 이전 셀로 이동할 수 있다. 

tab 키로 셀 간 이동 기본값 true

또, enterToTabtrue면, enter 키 입력 시 다음 셀로 이동한다. 

enter 키로 다음 셀 이동 기본값 true. enter 키는 어플리케이션 요구 사항에 따라 여러가지 방식으로 사용될 수 있는데, enterToNextRowtrue면 다음 셀 대신 다음 행으로 이동한다. 또, enterToEdittrue면 셀 이동 대신 편집기를 표시한다. 

enter 키로 다음 행 이동 기본값 false

enter 키 입력시 편집기 표시 기본값 false

마지막셀에서 tab키로 이동시 그리드에서 포커스 아웃됨. 'Button to be Focusout'버튼에 포커스가 간것을 확인할수 있다. 기본값 false

Grid - 1
0 rows

 

home 키는 첫번째 컬럼셀로, end키는 마지막 컬럼셀로 이동한다. ctr+home은 첫번째 행, ctrl+end는 마지막 행으로 이동한다. 

그리드 어플리케이션에 자주 요구되는 ui 중 하나는 마지막 셀에서 enter 키 입력 시 다음 행으로 이동하는 것이다. 

마지막 컬럼셀에서 tab 키나 enter 키로 다음 행 첫 번째 셀로 이동. 

처음 컬럼셀에서 shift+tab 키나 shift+enter 키로 이전 행 마지막 셀로 이동. 

오른쪽 방향키는 적용되지 않는다. 

2. 편집 키

insert 키를 누르면 현재 행 위치에 새로운 행 삽입 추가를 시작한다. 만일 appendWhenInsertKeytrue면 삽입 대신 마지막 행 다음에 행 추가를 시작한다. 

insert 키 입력시 마지막 행 다음에 행 추가. 기본값 false

또, appendWhenExitLasttrue면, 마지막 행 마지막 셀에서 tab 키나 enter 키를 누르면 행 추가를 시작한다. 우선 crossWhenExitLasttrue여야 한다. 

마지막 컬럼셀에서 tab 키나 enter 키로 다음 행 첫 번째 셀로 이동. 

마지막 행 마지막 셀에서 tab 키나 enter 키를 누르면 행 추가 기본값 false

commitOnLastCelltrue면, 편집 중인 행에서 useTabKey, enterToTabtrue일 때 마지막 셀에서 tab이나 enter키를 누르면 행 편집이 완료된다. 

마지막 컬럼셀에서 enter나 tab키를 누르면 행 편집 완료. 기본값 false

이미 수정/추가 상태인 행에서 편집기가 표시되지 않은 상태에서 ctrl+따옴표키를 누르면 이전 행의 값을 가져와 저장한다. 기본값 true

Grid - 2
0 rows

셀 편집 중 esc 키를 누르면 셀 편집이 취소되고, 행 편집 중이지만 셀 편집이 아닐 때 esc를 누르면 행 편집이 취소된다. deletabletruectrl+del 키로 선택된 행들을 삭제할 수 있다. 또, copyEnabled, pasteEnabledtrue이면, 각각 ctrl+c, ctrl+v 키로 클립보드 복사 및 붙여넣기를 할 수 있다. 

또한, EditOptions.editabletrue면 편집 가능한 데이터셀에서 키보드 문자 입력을 시작하자 마자 편집기가 표시되고 셀 편집이 시작된다. 

트리뷰에서 사용되는 키 입력들에 대해서는 트리 편집 예제를 참조한다. 


소스보기 JSP 

See Also
GridBase.editOptions
EditOptions
Examples
셀 편집
Edit Events
트리 편집
ReadOnly & Editable