−목차

그리드 아이템 편집 기본 가이드

그리드 및 그리드 데이터부의 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

템플릿 파일

화면 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
// 화면 로드 이벤트
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;
}