이 클래스는 단독으로 사용할 수 없고 Combo 클래스의 부속 클래스로서 사용됩니다.
Suggest 클래스의 주요 기능은 다음과 같습니다.
1. NodeList 클래스에서 생성한 NodeList를 기준으로 suggest NodeList를 생성합니다.
- showFields에 다수의 필드를 지정한 경우 wrapper 엘리먼트를 만들고
필드 각각에 대해 엘리먼트를 만들어 wrapper 엘리먼트의 차일드 엘리먼트로 첨부합니다.
- 필드를 하나만 지정한 경우에는 wrapper 엘리먼트를 만들지 않습니다.
2. 서제스트 입력 창에서 입력한 값을 비교할 수 있도록 텍스트 형태의 NodeList를 생성합니다.
3. 서제스트 입력 창에서 입력한 값과 2번에서 생성한 NodeList 값을 비교하여 일치하는 Node를 추출합니다.
4. Combo 클래스는 입력과 전체적인 제어를 담당하고 Suggest는 이벤트 발생, 값 비교를 담당합니다.
| Options | Component |
|---|---|
| ccode {String} | combo.Suggest |
|
component code : 'suggest'
|
|
| detailData {JSON} | data.MetaFilter |
|
MetaData.detail 추출 결과
|
|
| eventNode {HTMLElement|String} | combo.NodeLIst |
|
이벤트를 설정할 HTMLElement 또는 #id
지정하지 않으면 inside 엘리먼트가 설정됩니다.
|
|
| filterData {Function} | data.MetaFilter |
MetaData.detail 데이터 추출 메소드
MetaData.detail 데이터를 추출하려는 조건을 함수로 작성합니다.
filterData() 함수 실행 결과를 detailData에 설정하고 이를 MetaData.detail로 사용합니다.
MetaData.detail 데이터가 변경되는 것은 아닙니다.
JSON 형태의 MetaData.Detail 전체 데이터를 파라미터로 넘겨 줍니다.
return도 JSON 형태이어야 합니다.
example
filterData: function(meta){
var filter = [];
mc.eachArray(meta, function(data){
if (data.elglish == 'baseball'){
filter[filter.length] = data;
}
}, this)
return filter;
}
|
|
| filterRow {Function} | data.MetaFilter |
MetaData.detail 데이터 추출 메소드
MetaData.detail 데이터를 추출하려는 조건을 함수로 작성합니다.
filterRow() 함수 실행 결과를 detailData에 설정하고 이를 MetaData.detail로 사용합니다.
MetaData.detail 데이터가 변경되는 것은 아닙니다.
MetaData.Detail을 row 단위로 반복하면서 Hash 형태의 row와 JSON index를 파라미터로 제공합니다.
Hash를 return하면 Metadata.detail의 row로 사용하고, false를 return하면 데이터에서 제외시킵니다.
sample
var sportsData = [
['code1', 'baseball'],
['code2', 'basketball']
];
var sportsFormat = new mc.data.ArrayFormat([
{index: 0, field: 'id'},
{index: 1, field: 'english'}
);
filterRow: function(meta, index){
return meta.elglish == 'baseball' ? meta : false;
}
|
|
| insideClass {String} | combo.NodeLIst |
|
inside 엘리먼트에 적용할 className
|
|
| insideStyle {Hash} | combo.NodeLIst |
|
inside 엘리먼트에 적용할 style
|
|
| maxNodes {Number} | combo.Suggest |
|
서제스트에 표시할 최대 노드수. default: 7
표시할 데이터가 maxNodes보다 많으면 스크롤 바가 표시됩니다.
|
|
| metaData {JSON} | data.MetaFilter |
|
Meta Data
MetaData 클래스로 생성한 MetaData 오브젝트(인스턴스) 또는 MetaData.detail을 지정
|
|
| nodeOverClass {String} | combo.Suggest |
|
노드에 mouse가 over되었을 때 설정할 className
default: 'mc-combo-over'
|
|
| nodeTemplate {String} | data.MetaFilter |
|
NodeList를 생성하기 위한 default 템플릿
템플릿을 변경하는 경우 작성되어 있는 속성을 포함시켜야 합니다.
|
|
| outsideClass {String} | combo.NodeLIst |
|
outside 엘리먼트에 적용할 className
|
|
| outsideStyle {Hash} | combo.NodeLIst |
|
outside 엘리먼트에 적용할 style
|
|
| overClass {String} | combo.NodeLIst |
|
mouseover가 발생했을 때 콤보박스 노드에 설정할 className
|
|
| parentBox {HTMLElement} | combo.Suggest |
|
suggest NodeList를 포함할 parent Element
|
|
| prefix {String} | combo.Suggest |
|
id 접두사. default: 'mc_suggest_'
|
|
| showFields {JSON} | combo.NodeLIst |
NodeList에 적용할 field 속성 집합
showFields는 NodeList 생성 기준이 되는 field 속성을 포함한 JSON 형태의 오브젝트입니다.
showFields를 작성하지 않으면 'E1010' 메시지가 표시됩니다.
example:
field에 width, style, className을 지정할 수 있습니다.
showFields: [{field: 'code', width: 90, style: '', className: ''},
{field: 'korean', width: 100}]
|
|
| showFields.field {Array|String} | combo.NodeLIst |
NodeList 생성 기준 필드
DataFormat에 작성한 field 중에서 NodeList에 표시할 field를 지정합니다.
DataFormat 작성 순서가 아닌 showFields.field에 작성한 순서로 NodeList에 표현됩니다.
example:
DataFormat을 sportsFormat과 같이 작성한 형태에서
var sportsFormat = new mc.data.ArrayFormat([
{index: 0, field: 'code'},
{index: 1, field: 'english'},
{index: 2, field: 'korean'}]
);
showFields: [{field: 'code'}, {field: 'korean'}, {field: 'english'}]와 같이
korean과 english 순서를 바꿔서 지정하면 code, korean, english 순서로 표시됩니다.
|
|
| showFields.width {Array} | combo.NodeLIst |
|
NodeList 각 Node(field)에 적용할 width
|
|
| suggestClass {String} | combo.Suggest |
|
서제스트 엘리먼트에 설정할 className
default: 'mc-combo-box'
|
|
| suggestField {String} | combo.Suggest |
|
서제스트 대상 필드
서제스트 입력 필드에서 값을 입력하면 같은 값을 가진 노드를 표시하게 됩니다.
이때 입력한 값과 suggestField로 지정한 노드의 값을 비교하게 됩니다.
suggestField를 지정하지 않으면 showFields의 첫 번째 필드와 비교를 행합니다.
showFields에 suggestField가 존재하지 않으면 'E1020' 에러 메시지가 표시됩니다.
|
|
| suggestOutsideClass {String} | combo.Suggest |
|
suggest outside 엘리먼트에 설정할 className
default: 'mc-combo-outside'
|
|
| width {Number} | combo.NodeLIst |
|
NodeList 전체 Width. default: 300
NodeList row에 다수의 Node가 표시되는 경우 전체 width를 지정합니다.
|
|
| wrapClass {String} | combo.NodeLIst |
|
wrapper 엘리먼트에 적용할 className
Row에 표시할 Node가 다수인 경우 이 전체를 포함할 wrapper 엘리먼트를 생성합니다.
|
|
| wrapStyle {String} | combo.NodeLIst |
|
wrapper 엘리먼트에 적용할 style
|
|
| wrapTemplate {String} | combo.NodeLIst |
|
wrapper Node 템플릿
템플릿을 변경하는 경우 작성되어 있는 속성을 포함시켜야 합니다.
default: <div id="{wrapID}" class="{wrapClass}" "{wrapStyle}">
|
|
| Method | Component |
|---|---|
clearData
()
|
data.MetaFilter |
|
datailData를 clear합니다.
|
|
clearList
()
|
combo.Suggest |
|
this.suggestList와 this.textList를 clear합니다.
|
|
filterData
(JSON)
|
data.MetaFilter |
|
MetaData.detail 전체 데이터 추출을 위한 오버라이드용 메소드입니다.
|
|
filterRow
(Hash, Number)
|
data.MetaFilter |
|
MetaData.detail 데이터를 row 단위로 추출할 오버라이드용 메소드입니다.
|
|
getAllData
() : JSON
|
data.MetaFilter |
|
MetaData.Detail 데이터에서 추출한 datailData를 반환합니다.
|
|
getChildNodes
(Number) : NodeList
|
combo.NodeLIst |
|
showFields에 다수의 필드를 지정한 경우에 실행하며 index번째의 child 노드를 반환합니다.
|
|
getChoiceLength
() : Number
|
combo.Suggest |
|
서제스트에 설정된 전체 row 수를 반환합니다.
|
|
getData
(Number, Number, String) : JSON
|
data.MetaFilter |
|
지정한 인덱스 범위의 데이터를 승순 또는 역순으로 반환합니다.
|
|
getFieldCount
() : Number
|
combo.NodeLIst |
|
showFields의 field 수를 반환합니다.
|
|
getFieldTotal
(String) : Number
|
combo.NodeLIst |
|
showFields에서 지정한 프로퍼티 값을 합산하여 반환합니다.
|
|
getFieldValue
(Number, String) : String/Number
|
combo.NodeLIst |
|
showFields에서 지정한 프로퍼티 값을 반환합니다.
|
|
getId
(String) : HTMLElement
|
combo.Suggest |
|
this.suggestList에서 지정한 id가 같은 엘리먼트를 반환합니다.
|
|
getIndex
(Number) : Hash
|
data.MetaFilter |
|
지정한 인덱스 번째의 데이터를 반환합니다.
|
|
getIndexChoice
(Number) : HTMLElement
|
combo.Suggest |
|
choiceList에서 지정한 인덱스 번째의 노드를 반환합니다.
|
|
getIndexNode
(Number) : HTMLElement
|
combo.Suggest |
|
지정한 인덱스 번째의 노드를 반환합니다.
|
|
getIndexNodes
(Number, Number, String) : NodeList
|
combo.Suggest |
|
지정한 인덱스 범위에 속한 노드를 승순/역순으로 반환합니다.
|
|
getIndexText
(Number) : String
|
combo.Suggest |
|
textList에서 지정한 인덱스 번째의 텍스트를 반환합니다.
|
|
getInside
() : HTMLElement
|
combo.NodeLIst |
|
inside 엘리먼트를 반환합니다.
|
|
getLength
() : Number
|
data.MetaFilter |
|
MetaData.Detail 데이터에서 추출한 datailData 건수를 반환합니다.
|
|
getList
(Boolean) : HTMLElement
|
combo.Suggest |
|
this.nodeList 또는 this.textList를 반환합니다.
|
|
getNodeCount
() : Number
|
combo.NodeLIst |
|
NodeList의 Node수를 반환합니다.
|
|
getNodes
() : NodeList
|
combo.NodeLIst |
|
NodeList 전체를 반환합니다.
|
|
getOutside
() : HTMLElement
|
combo.NodeLIst |
|
outside 엘리먼트를 반환합니다.
|
|
getTargetIndex
() : Number
|
combo.Suggest |
|
showFields에서 suggestField에 지정한 값과 매치되는 인덱스를 반환합니다.
|
|
getTextNodes
(Number) : NodeLIst
|
combo.NodeLIst |
|
NodeList에서 index번째에 지정한 NodeList 전체를 반환합니다.
|
|
hideOutside
()
|
combo.NodeList |
|
오버라이드용 메소드이며 outside 엘리먼트를 숨길 때 사용합니다.
|
|
initValue
()
|
combo.Suggest |
|
ComboBox 제어를 위한 프로퍼티 값을 초기화한다.
|
|
isChoiced
() : Boolean
|
combo.Suggest |
|
서제스트 노드의 선택 여부를 반환합니다.
|
|
isExistValue
(String) : Boolean
|
combo.Suggest |
|
입력한 값의 서제스트 존재 여부를 반환합니다.
|
|
isVisible
() : Boolean
|
combo.Suggest |
|
서제스트의 표시/비표시 상태를 반환합니다.
|
|
moveScroll
()
|
combo.Suggest |
|
커서가 위치한 곳으로 스크롤 바를 이동한다.
|
|
nextNode
()
|
combo.Suggest |
|
서제스트가 표시된 상태에서 down key를 눌렀을 때 실행합니다.
|
|
removeEvents
()
|
combo.Suggest |
|
Suggest 클래스에서 설정한 이벤트를 해제합니다.
|
|
resetReady
()
|
combo.Suggest |
|
Esc key를 눌렀을 때 실행합니다.
|
|
setChoiceNode
(Number)
|
combo.Suggest |
|
지정한 인덱스 번째의 노드에 nodeOverClass을 설정합니다.
|
|
setEvents
()
|
combo.Suggest |
|
Suggest 클래스에서 사용하는 이벤트를 설정합니다.
|
|
setSuggestHeight
()
|
combo.Suggest |
|
서제스트 높이를 설정합니다.
|
|
| Custom Event | Component |
|---|---|
| clearData (Object this) | data.MetaFilter |
|
datailData를 clear 할 때 fire 됩니다.
|
|
| clearList (Object this) | combo.Suggest |
|
this.suggestList와 this.textList를 clear할 때 fire 됩니다.
|
|
| click (EventObject e, HTMLElement tg, Object this) | combo.Suggest |
|
서제스트에서 노드를 click했을 때 fire됩니다.
|
|
| filteredData (Hash detaildata, Object this) | data.MetaFilter |
|
MetaData.detail에 조건을 지정하여 추출을 완료하였을 때 fire됩니다.
|
|
| mouseout (EventObject e, HTMLElement tg, Object this) | combo.Suggest |
|
서제스트 노드에서 mouseout 이벤트가 발생했을 때 fire 됩니다.
|
|
| mouseover (EventObject e, HTMLElement tg, Object this) | combo.Suggest |
|
서제스트 노드에서 mouseover가 발생했을 때 fire 됩니다.
|
|
| noData (Object this) | data.MetaFilter |
|
MetaData.detail 데이터가 없을 때 fire 됩니다.
|
|
| renderData (Object this) | combo.NodeList |
|
NodeList 생성을 완료했을 때 fire됩니다.
|
|