[API/UI]

GridEntry

개요

GridEntry 클래스는 Grid에서 다수의 데이터 입력을 제공합니다.
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)
mc.grid.GridEntry(options)
생성자
Parameters :
• {Hash} options, Grid 클래스에 반영할 options
Returns :
• 없음
grid.GridEntry
생성자
mainGridEntry (HTMLElement/String)
mainGridEntry(showTo)
option 설정, HTMLElement생성, Event를 설정합니다.
Parameters :
• {HTMLElement/String} showTo, showTo 엘리먼트
Returns :
• 없음
grid.GridEntry
option 설정, HTMLElement생성, Event를 설정합니다.
clickGrid (EventObject, HTMLElement, Hash)
clickGrid(e, tg, opts)
click 이벤트가 발생했을 때 실행합니다.
Radio --> CheckBox 순서로 fire됩니다.
Parameters :
• {EventObject} e, EventObject
• {HTMLElement} target, target element
• {Hash} options, event를 설정할 때 지정한 options
Returns :
• 없음
grid.Grid
click 이벤트가 발생했을 때 실행합니다.
dbClickGrid ()
dbClickGrid()
dbclick 이벤트가 발생했을 때 실행합니다.
오버라이드용 메소드입니다.
Parameters :
• 없음
Returns :
• 없음
grid.Grid
dbclick 이벤트가 발생했을 때 실행합니다.
getDragGroupNode () : HTMLElement
getDragGroupNode()
drag group node를 반환합니다
Parameters :
• 없음
Returns :
• {HTMLElement}
grid.Grid
drag group node를 반환합니다.
getFirstNode () : HTMLElement
getFirstNode()
header에 표시된 첫 번째 <td> 엘리먼트를 반환합니다.
Parameters :
• 없음
Returns :
• {HTMLElement}
grid.Grid
header에 표시된 첫 번째 <td> 엘리먼트를 반환합니다.
getOutside () : HTMLElement
getOutside()
Grid의 최상위 parent 엘리먼트를 반환합니다.
Parameters :
• 없음
Returns :
• {HTMLElement}
grid.Grid
Grid의 최상위 parent 엘리먼트를 반환합니다.
getlistBox () : HTMLElement
getlistBox()
listBox 엘리먼트를 반환합니다.
Parameters :
• 없음
Returns :
• {HTMLElement}
grid.Grid
listBox 엘리먼트를 반환합니다.
getResizingNode () : HTMLElement
getResizingNode()
resizing을 위한 drag node를 반환합니다.
Parameters :
• 없음
Returns :
• {HTMLElement}
grid.Grid
resizing을 위한 drag node를 반환합니다.
keydownGrid (EventObject, HTMLElement, Hash)
keydownGrid(e, tg, opts)
keydown 이벤트가 발생했을 때 실행합니다.
Parameters :
• {EventObject} e, EventObject
• {HTMLElement} target, target element
• {Hash} options, event를 설정할 때 지정한 options
Returns :
• 없음
grid.Grid
keydown 이벤트가 발생했을 때 실행합니다.
mainGrid (HTMLElement/String)
mainGrid(showTo)
option 설정, HTMLElement생성, Event를 설정합니다.
Parameters :
• {HTMLElement/String} showTo, showTo 엘리먼트
Returns :
• 없음
grid.Grid
option 설정, HTMLElement생성, Event를 설정합니다.
mousedownGrid (EventObject, HTMLElement, Hash)
mousedownGrid(e, tg, opts)
mousedown 이벤트가 발생했을 때 실행합니다.
Parameters :
• {EventObject} e, EventObject
• {HTMLElement} target, target element
• {Hash} options, event를 설정할 때 지정한 options
Returns :
• 없음
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에 반영