GridEntry 클래스의 주요 기능은 다음과 같습니다.
1. 다수의 데이터를 Grid에서 입력할 수 있습니다.
2. Calculator 메커니즘을 적용하여 입력할 때마다 값을 산출/표시합니다.
3. 각 콤포넌트에 지정한 체크 방법(기준)에 따라 입력한 값을 체크합니다.
4. 입력한 데이터를 서버로 전송합니다.
- 표시 필드의 값은 전송하지 않습니다.
5. 서버로 전송하기 전에 Grid 전체를 대상으로 Row 단위로 에러 체크를 행합니다.
- 이벤트가 발생하지 않은 Cell의 값을 체크할 수 있습니다.
- operator 메커니즘을 적용하여 다수의 Cell 값을 연결 체크할 수 있습니다.
- Grid Row 단위로 전체 Cell에 값을 입력하지 않았으면 체크하지 않습니다.
하나라도 값을 입력한 Cell이 있다면 해당 Row 전체를 체크합니다.
6. Grid의 각 Cell은 고유 id를 갖으며 options에 id를 지정해야 합니다.
- 서버 애플리케이션은 name이 아닌 지정한 id로 데이터를 추출할 수 있습니다.
7. 첫 번째 열에 자동으로 일련번호가 표시됩니다.
8. 필드의 우측 경계선을 드래그하여 필드의 넓이를 조정할 수 있습니다.
9. 우측 버튼을 클릭하여 Grid Row를 추가할 수 있습니다.
| Options | Component |
|---|---|
| adjustField {String} | grid.Grid |
|
options.width 값이 Grid에 표시할 각 필드의 width를 합산한 값보다 크거나 작은 경우
options.width에서 합산 값을 제외한 차이 길이를 adjustField에 지정한 필드에 설정합니다.
이때 이 값이 adjustMax보다 크거나 adjustMin 값보다 작으면 설정하지 않습니다.
단, Grid가 표시된 후에 사용자가 한 번이라도 필드의 width를 조정했다면
이 값이 우선해야 하므로 적용하지 않습니다.
이 값을 지정하면 allotEach보다 우선하여 적용합니다.
|
|
| adjustMax {Number} | grid.Grid |
|
adjustFiled에 값을 지정한 경우 자동으로 적용할 수 있는 최대 값
|
|
| adjustMin {Number} | grid.Grid |
|
adjustFiled에 값을 지정한 경우 자동으로 적용할 수 있는 최소 값
|
|
| allotEach {Boolean} | grid.Grid |
|
options.width 값이 Grid에 표시할 각 필드의 width를 합산한 값보다 크거나 작은 경우
options.width에서 합산 값을 제외한 차이 길이를 각 필드의 width 비율로 배분합니다.
정수 값으로 배분한 후 1과 같이 배분할 수 없는 나머지 값은 width가 가장 큰 필드에 배분합니다.
|
|
| autoChecked {Boolean} | grid.Grid |
detail 영역을 click했을 때 checked 설정/해제여부. default: true
true: mc.grid.GridCheckBox로 Grid에 checkbox를 설정한 경우,
detail 영역을 클릭하면 checkbox를 클릭한 것과 같은 처리를 행합니다.
checked된 상태이면 해제 처리를 행합니다.
checkbox가 하나인 경우에만 사용할 수 있으며 useCheckBox에도 true를 지정해야 합니다.
false: checkbox를 클릭해야만 check가 설정/해제 됩니다.
|
|
| buttonClass {String} | grid.GridEntry |
|
button wrapper 엘리먼트에 적용할 className
|
|
| buttonStyle {Hash} | grid.GridEntry |
|
button wrapper 엘리먼트에 적용할 style
|
|
| cancelConfirm {Hash} | grid.GridEntry |
입력 취소 확인 Message. default: 표시
cancelConfirm에 지정한 메시지가 MessageBox에 표시됩니다.
options.cancelConfirm에 ''를 지정하면 MessageBox가 표시되지 않습니다.
yes는 입력한 값을 취소하는 것을 의미하고, no는 취소를 취소하는 것이므로 입력한 값이 유지됩니다.
상세 내용은 MessageBox 클래스를 참조하세요.
cancelConfirm: {
title: {text: '입력 취소 확인'},
html: '"확인"을 클릭하면 입력한 자료가 지워집니다. <br />"아니오"를 클릭하면 지워지지 않습니다.',
buttons: {yes: '예', no: '아니오'}
}
|
|
| ccode {String} | grid.GridEntry |
|
component code : 'gridentry'
|
|
| cellBorder {String} | grid.GridEntry |
|
<td> 엘리먼트의 border-right에 적용할 className
detail cell의 border-right를 변경하려는 경우 CSS를 지정합니다.
|
|
| cellClass {String} | grid.Grid |
<td> 엘리먼트에 적용할 className
Grid인 경우 meta filed는 아래와 같은 구조로 되어 있으며 각 노드에 className과 style이 설정됩니다.
- DOM Tree
<tr class="checkedClass" style="checkedStyle">
<td class="mc-grid-dt-td cellClass" style="cellStyle">
<div class="fieldClass" style="fieldStyle">text
<input type="checkbox" class="typeClass" style="typeStyle" />
</div>
</td>
</tr>
위의 DOM Tree에서 볼 수 있듯이
- checkedClass와 checkedStyle은 radio/checkbox를 선택했을 때 <tr>에 설정되고
- cellClass와 cellStyle이 <td>에 설정되고
- fieldClass와 fieldStyle이 <div>에 설정됩니다.
- typeClass는 <input>에 설정합니다.
new mc.data.MetaField({
fields:[
{field: 'id', text: "Code", width: 70, style: 'color:red', hidden: true},
]
})
위와 같이 MetaField.fields에 작성한 width, style은 MethodChain 내부에서 cellStyle에 조합합니다.
MethodChain에서 설정하는 class와 style이 있으므로 이를 지정하기 전에 먼저 체크할 필요가 있습니다.
|
|
| cellStyle {Hash} | grid.Grid |
|
<td> 엘리먼트에 적용할 style
|
|
| createConfirm {Hash} | grid.GridEntry |
입력 확인 Message
createConfirm에 지정한 메시지가 MessageBox에 표시됩니다.
options.createConfirm에 ''를 지정하면 MessageBox가 표시되지 않습니다.
createConfirm: {
title: {text: '입력 자료 저장 확인'},
html: '"확인"을 클릭하면 입력한 자료를 저장합니다.<br /> "아니오"를 클릭하면 저장하지 않습니다.',
buttons: {yes: '확인', no: '아니오'}
}
|
|
| createTitle {Boolean} | grid.Grid |
|
Grid Title 작성 여부
true: title option을 기준으로 Grid Title을 작성합니다.
false: title option을 작성하더라도 Grid Title을 작성하지 않습니다.
|
|
| failureConfirm {Hash} | grid.GridEntry |
통신 실패 확인 Message
서버와 통신이 실패한 경우 failureConfirm에 지정한 메시지가 MessageBox에 표시됩니다.
options.failureConfirm에 ''를 지정하면 MessageBox가 표시되지 않습니다.
통신 실패가 발생하면 입력한 자료가 지워지지 않고 유지됩니다.
확인을 위한 버튼 하나가 표시됩니다.
failureConfirm: {
title: {text: '통신 실패 확인'},
html: '통신 장애로 인해 입력한 데이터가 서버에 저장되지 않았습니다.<br />',
buttons: {ok: '확인'}
}
|
|
| fieldMinWidth {Number} | grid.Grid |
|
Grid 각 field의 최소 넓이. default : 25
|
|
| formEntry {JSON} | grid.GridEntry |
|
Grid Row에 설정할 <form> 컴포넌트
|
|
| formOutsideClass {String} | grid.GridEntry |
|
form outside 엘리먼트에 적용할 className
|
|
| formOutsideStyle {String} | grid.GridEntry |
|
form outside 엘리먼트에 적용할 style
|
|
| gridEntry {JSON} | grid.GridEntry |
|
Grid Row에 설정할 컴포넌트
|
|
| gridMinWidth {Number} | grid.Grid |
|
Grid 최소 넓이. default : 100
|
|
| gridBoxStyle {Hash} | grid.Grid |
|
gridBox 엘리먼트에 설정할 style
|
|
| headerOverClass {String} | grid.Grid |
|
header에서 mouseover/mouseout 이벤트가 발생했을 때 설정할 className.
default: 'mc-grid-hd-over'
|
|
| height {Number} | grid.GridEntry |
|
Grid 전체 높이. default: 300
grid 높이를 Number 형태로 지정합니다.
표시할 grid보다 값을 작게 지정하면 스크롤이 생깁니다.
|
|
| initLines {Number} | grid.GridEntry |
|
처음 Grid에 표시할 row 수. default: 7
|
|
| insideClass {String} | grid.GridEntry |
|
inside 엘리먼트에 적용할 className
|
|
| insideStyle {Hash} | grid.GridEntry |
|
inside 엘리먼트에 적용할 style
|
|
| keyupMethod {keyupMethod} | grid.GridEntry |
keyup 이벤트가 발생할 때마다 실행할 method
Grid의 입력 cell에서 keyup 이벤트가 발생할 때마다 호출합니다.
배열의 첫 번째에 실행할 method 이름을 지정하고 두 번째 method의 오브젝트를 지정합니다.
두 번째를 지정하지 않으면 this를 사용합니다.
- keyupMethod()의 파라미터는 아래 순서로 설정됩니다.
- 순서/항목: (hash, this)
1. keyup 이벤트가 발생한 row의 각 cell을 {cell_id: cell_value} 형태로 설정합니다.
- cell_id는 options.gridEntry.ccode에 지정한 id가 설정됩니다.
id를 지정하지 않으면 다수의 노드 중에서 추출할 기준이 없으므로 id와 값을 설정하지 않습니다.
값을 받으려면 options.gridEntry.ccode에 id를 지정해야 합니다.
- cell_value에 cell_id의 값이 설정됩니다.
2. this는 GridEntry 오브젝트입니다.
- return 값 설정
1. cell에 값을 설정합니다.
- {cell_id: cell_value} 형태로 반환합니다.
- cell_id가 options.calculator에 작성되어 있다면 operator를 실행하여 다른 cell의 값도 재설정합니다.
2. 메시지를 표시할 수 있습니다.
- {message: {title: 'message title', text: 'message text}} 형태로 반환합니다.
- message이면서 값이 string 또는 number가 아니면 메시지를 표시합니다.
- 이미 다른 메시지가 표시된 상태이면 메시지가 표시되지 않을 수도 있습니다.
3. 처리할 내용이 없으면 false 또는 ''를 반환합니다.
|
|
| metaField {String} | grid.Grid |
|
Grid 데이터 Format을 포함한 MetaField 오브젝트 이름.
new mc.data.MetaField를 지정하거나 이를 생성한 오브젝트 이름을 지정합니다.
metaField에 지정한 순서, 형태를 기준으로 Grid의 sub-title을 설정하며
이를 기준으로 Grid row의 형식이 결정됩니다.
자세한 내용은 mc.data.MetaField를 참조하세요.
|
|
| mustEntryConfirm {Hash} | grid.GridEntry |
입력한 데이터 없음 확인 Message
Grid에 자료를 입력하지 않고 '저장' 버튼을 클릭했을 때 지정한 메시지가 MessageBox에 표시됩니다.
options.mustEntryConfirm에 ''를 지정하면 MessageBox가 표시되지 않습니다.
mustEntryConfirm: {
title: {text: '입력 데이터 없음'},
html: '입력한 자료가 없어 저장할 수 없습니다.',
buttons: {ok: '확인'}
}
|
|
| onFailure {String} | grid.GridEntry |
|
서버와 통신이 실패했을 때 실행할 메소드
서버와 통신이 실패했을때 실행할 메소드를 지정합니다.
파라미터 순서
- status, statusText, this 오브젝트
|
|
| onSuccess {Hash} | grid.GridEntry |
성공적으로 완료되었을 때 실행할 메소드
서버와 통신이 성공적으로 완료되었을 때 실행할 메소드를 지정합니다.
onSuccess()를 실행한 후 Grid에 입력한 값을 clear합니다.
Grid 데이터를 서버로 submit한 후 서버에서 처리 결과 등의 데이터를 받을 수 있습니다.
반환되는 데이터는 여러 형태가 가능하지만 확인 개념의 데이터이므로 text 또는 JSON 형태를 권장합니다.
서버에서 받은 responseText를 eval()하여 첫 번째 파라미터에 설정합니다.
서버에서 받은 데이터가 없을 때에는 첫 번째 파라미터에 {}가 설정됩니다.
파라미터 순서
- JSON 형태로 변환한 서버 데이터, 통신 오브젝트, this 오브젝트
|
|
| onTimeout {String} | grid.GridEntry |
|
HTTP 통신 시간 초과로 실패했을 때 실행할 메소드
파라미터 순서
- statusText('Timeout Abort'), this 오브젝트
|
|
| outsideClass {String} | grid.Grid |
|
Grid outside 엘리먼트에 반영할 className
|
|
| outsideStyle {Hash} | grid.Grid |
|
Grid outside 엘리먼트에 반영할 style
|
|
| prefix {String} | grid.GridEntry |
|
id 접두사. default: 'mc_gridentry_'
|
|
| realtimeCheck {Boolean} | grid.GridEntry |
operator의 실시간 실행 여부 options에 operator를 지정하면 row 단위로 각 cell의 값을 체크할 수 있습니다. true를 지정하면 cell에 값을 입력할 때마다 operator를 실행하여 체크를 행합니다. false를 지정하면 값을 입력할 때마다 실행하지 않고 create 버튼을 클릭했을 때 일괄적으로 실행합니다. true를 지정하면 실시간으로 체크할 수 있는 반면, 체크 대상을 전부 입력하지 않았는데도 체크를 하게 되어 경우에 따라서는 필요없는 메시지가 표시되어 입력에 방해가 될 수도 있습니다. |
|
| showFocus {Boolean} | grid.GridEntry |
다수의 checkbox/radio를 표시하는 시점 다수의 checkbox 또는 radio를 표시하는 경우 이를 랜더링할 때 표시하면 웹 페이지가 깔끔하지 못한 점이 있습니다. 이를 개선하기 위해 showFocus에 지정한 엘리먼트에 focus가 되면 그 때 표시합니다 showFocus에 엘리먼트 #id를 지정합니다. focus 처리를 해야하므로 showFocus는 데이터를 입력하는 엘리먼트를 지정해야 합니다. |
|
| showMessage {Boolean} | grid.GridEntry |
에러가 있을 때 error message 표시 여부 default: true, false: 표시하지 않음 각 컴포넌트에서 발생한 에러 표시 여부는 각 컴포넌트에 설정해야 하며 showMessage는 GridEntry 클래스의 메시지 표시 여부입니다. |
|
| successConfirm {Boolean} | grid.GridEntry |
저장 성공 확인 Message
successConfirm에 지정한 메시지가 MessageBox에 표시됩니다.
options.successConfirm에 ''를 지정하면 MessageBox가 표시되지 않습니다.
확인을 위한 버튼 하나가 표시됩니다.
successConfirm: {
title: {text: '저장 성공'},
html: '입력한 데이터가 서버에 저장되었습니다.<br /> "확인"을 클릭하세요.',
buttons: {ok: '확인'}
}
|
|
| textErrorClass {Hash} | grid.GridEntry |
|
operator 체크에서 에러가 발생했을 때 엘리먼트에 적용할 className
|
|
| title {Hash} | grid.Grid |
|
Grid 타이틀에 설정할 options
|
|
| total {Hash} | grid.GridEntry |
합계 표시에 적용할 options
total은 합계를 표시할 때 사용합니다.
total에는 아래와 같은 options이 있습니다.
1. position: total 표시 위치
- top: sub-title과 Grid 상단 사이에 표시되며 데이터를 입력할 때마다 값이 표시되므로
합계를 중요한 Grid 처리에 적합합니다.
- bottom: Grid 하단에 표시됩니다. 지정하지 않으면 bottom에 표시됩니다.
2. fields : total을 표시할 field
- options.gridEntry에 작성한 #id를 지정합니다.
- 합계가 의미하듯이 숫자 값을 대상으로 하며 checkbox, radio는 checked된 수를 합산하여 표시합니다.
- 문자열 #id를 지정하면 연결해서 표시됩니다만, 첫 문자가 숫자이면 값을 합산하게 되어 자칫
원하지 않은 결과가 표시될 수 있습니다.
- defaultColor, checkMinus를 지정할 수 있습니다.
|
|
| Method | Component |
|---|---|
mc.grid.GridEntry
(Hash)
|
grid.GridEntry |
|
생성자
|
|
mainGridEntry
(HTMLElement/String)
|
grid.GridEntry |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
clickGrid
(EventObject, HTMLElement, Hash)
|
grid.Grid |
|
click 이벤트가 발생했을 때 실행합니다.
|
|
dbClickGrid
()
|
grid.Grid |
|
dbclick 이벤트가 발생했을 때 실행합니다.
|
|
getDragGroupNode
() : HTMLElement
|
grid.Grid |
|
drag group node를 반환합니다.
|
|
getFirstNode
() : HTMLElement
|
grid.Grid |
|
header에 표시된 첫 번째 <td> 엘리먼트를 반환합니다.
|
|
getOutside
() : HTMLElement
|
grid.Grid |
|
Grid의 최상위 parent 엘리먼트를 반환합니다.
|
|
getlistBox
() : HTMLElement
|
grid.Grid |
|
listBox 엘리먼트를 반환합니다.
|
|
getResizingNode
() : HTMLElement
|
grid.Grid |
|
resizing을 위한 drag node를 반환합니다.
|
|
keydownGrid
(EventObject, HTMLElement, Hash)
|
grid.Grid |
|
keydown 이벤트가 발생했을 때 실행합니다.
|
|
mainGrid
(HTMLElement/String)
|
grid.Grid |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
mousedownGrid
(EventObject, HTMLElement, Hash)
|
grid.Grid |
|
mousedown 이벤트가 발생했을 때 실행합니다.
|
|
| Custom Event | Component |
|---|---|
| clickRadio (EventObject e, HTMLElement tg, Hash opts, Object this) | grid.Grid |
|
grid row의 radio를 체크/해제했을 때 fire됩니다.
|
|
| clickCheckbox (EventObject e, HTMLElement tg, Hash opts, Object this) | grid.Grid |
|
grid row의 checkbox를 체크/해제했을 때 fire됩니다.
|
|
| headerCheckbox (EventObject e, HTMLElement tg, Hash opts, Object this) | grid.Grid |
|
grid header의 checkbox를 체크/해제했을 때 fire됩니다.
|
|
| keydownCheckbox (EventObject e, HTMLElement tg, Hash opts, Object this) | grid.Grid |
|
grid row의 checkbox를 keydown했을 때 fire됩니다.
|
|
| keydownRadio (EventObject e, HTMLElement tg, Hash opts, Object this) | grid.Grid |
|
grid row의 radio를 keydown했을 때 fire됩니다.
|
|
| Examples | |
|---|---|
| combo | |
|
Grid에서 combo 사용
|
|
| header value | |
|
header 값을 Grid에 반영
|
|
| header checkbox | |
|
header의 checkbox 값을 Grid 각 row에 반영합니다.
|
|
| detail checkbox | |
|
Grid row에 checkbox를 표시/선택합니다.
|
|
| header radio | |
|
header의 radio 값을 Grid 각 row에 반영합니다.
|
|
| detail radio | |
|
Grid row에 radio를 표시/선택합니다.
|
|
| header select | |
|
select/option의 value 속성 값 또는 text를 Grid 각 row에 반영합니다.
|
|
| detail select | |
|
select/option의 value 속성 값 또는 text를 Grid row에 반영합니다.
|
|
| operator | |
|
Operator를 적용하여 cell 값 체크
|
|
| total bottom | |
|
cell 값을 합산하여 bottom에 표시
|
|
| total top | |
|
cell 값을 합산하여 top에 표시
|
|
| header datafield | |
|
header 서제스트 값을 Grid에 반영
|
|
| detail datafield | |
|
cell의 서제스트 값을 cell에 반영
|
|