| 사항 | 설명 | 비고 | |
|---|---|---|---|
| HTML 태그 형태 | <sbux-contextmenu></sbux-contextmenu> |
||
| 필수 속성 | id, name | ||
| uitype 속성 값 | 없음 | ||
| 자식 Dom 구조 | <menu-item> |
context menu 를 구성하기 위한 구조 | |
| 이벤트 | callback 속성명으로 사용자 지정 함수 callback | ||
| 예시) Context Menu 컴포넌트 |
|---|
|
<sbux-datepicker id="idxDateInLine" name="edu_dt" uitype="date" mode="inline" show-weeks="true" starting-day="1" format-day-title="yyyy년 mm월" format-month-title="yyyy년" date-format="yyyy/mm/dd" contextmenu-id="idxCtxtMenu"></sbux-datepicker> <sbux-input id="idxUserName" name="useName" style="width:40%;" uitype="text" contextmenu-id="idxCtxtMenu"></sbux-input>
<script> function fnCtxtCallback(eventName,eventType,eventKey,eventValue,target,etc,userCustom){ swtich(eventType){ case 'beforeOpen' : console.log('context menu 가 나타나기 직전'); break; case 'afterItemClick': console.log('context menu 의 item 을 클릭 후 닫히기 전'); } console.log('eventName',eventName); console.log("eventType",eventType); console.log("eventKey",eventKey); console.log("eventValue",eventValue); console.log("eventTarge",target); console.log("eventEtc",etc); console.log("userCustom",userCustom); } </script> <!-- callback 함수는 사용자가 정의한 함수입니다. callback 함수는 context menu 내 item 을 선택하고 닫힐 때 호출됩니다. callback 함수의 인자 값으로 사용자가 임의로 추가할 수 있으며, 임의 추가하는 경우에는 Sytem 이 부여하는 전달값 뒤에 붙여서 반환합니다. System 이 부여하는 전달값은 첫번째 - eventName : 'callback', 두번째 - eventType : 'beforeOpen' | 'afterItemClick', 세번째 - eventKey : undefined | item Key, (선택한 item 의 id) 다섯번째 - eventValue: undefined | item value, (선택한 item 의 value) 여섯번째 - target : target object, (context menu 를 호출한 컴포넌트) 일곱번째 - etc : selected Info (지정된 컴포넌트의 선택사항의 정보) 입니다. --> <sbux-contextmenu id="idxCtxtMenu" name="ctxtMenu" css-class="userCSS_Class" z-index="999" callback="fnCtxtCallback(edu_dt)" callback-before-open="fnCtxtCallback"> <menu-item id="Act 1" text="Act 1" value="Act 1 Item" glyphicon="edit" accesskey="a"></menu-item> <menu-item id="divider" divider></menu-item> <menu-item id="Act 2" text="Act 2" value=""> <menu-item id="Act 2_1" text="Act 2_1" disabled></menu-item> <menu-item id="Act` 2_2" text="Act 2_2"> <menu-item id="Act 2_2_1" text="Act 2_2_1"></menu-item> <menu-item id="Act 2_2_2" text="Act 2_2_2"></menu-item> </menu-item> <menu-item id="Act 2_3" text="Act 2_3"></menu-item> <menu-item id="divider" divider></menu-item> <menu-item id="Act 2_4" text="Act 2_4"> <menu-item id="Act 2_4_1" text="Act 2_4_1"></menu-item> <menu-item id="Act 2_4_2" text="Act 2_4_2"> <menu-item id="Act 2_4_2_1" text="Act 2_4_2_1"></menu-item> <menu-item id="Act 2_4_2_2" text="Act 2_4_2_2"></menu-item> </menu-item> </menu-item> </menu-item> <menu-item id="Act 3" text="Act 3"></menu-item> <menu-item id="Act 4" text="Act 4"> <menu-item id="Act 4_1" text="Act 4_1"></menu-item> <menu-item id="Act 4_2" text="Act 4_2"></menu-item> </menu-item> </sbux-contextmenu> |
| 예시) Tree 컴포넌트와 연결된 Context Menu 컴포넌트 |
|---|
|
<script> function fnCtxtCallback(eventName,eventType,eventKey,eventValue,target,etc,userCustom){
console.log('eventName',eventName); console.log("eventType",eventType); console.log("eventKey",eventKey); console.log("eventValue",eventValue); console.log("eventTarge",target); console.log("eventEtc",etc); console.log("userCustom",userCustom);
// 편집을 위해 선택한 node 의 정보를 전달 $('#eNodeNm').val(etc.text); $('#eNodeVal').val(etc.value);
// 특정조건일때 disabled if (etc.text == '열정팀'){ $(eventKey.delete.$node).addClass('sbux-ctxt-meu-disable'); } else { $(eventKey.delete.$node).removeClass('sbux-ctxt-meu-disable'); } };
function fnCtxt(target, ctxtmenu, type,nodeName,nodeValue,nodeDept){ var targetName = target.attr('name'); switch(type){ case 'edit': // 첫번째 param : 대상 model 명 // 두번째 param : 선택한 id, 공백일 경우 선택으로 저장된 노드의 값을 읽어옴 // console.log('선택Node',SBUxMethod.nodeStatus(targetName)); // 세번째 parma : 변경할 Node 의 object SBUxMethod.edit(targetName,'',{text:$(nodeName).val(), value:$(nodeValue).val(), dept:$(nodeDept).val()} ); break; case 'delete': // 첫번재 param : 대상 model 명 // 두번재 param : 삭제할 id , 공백일 경우 선택으로 저장된 노드를 삭제 SBUxMethod.remove(targetName,''); break; case 'sbling': case 'child': // type 이 undefined 이거나 공백일때는 child 를 default 로 함 SBUxMethod.add(targetName,'',{text:$(nodeName).val(), value:$(nodeValue).val(), dept:$(nodeDept).val()},type); break; case 'crud': var sendData = SBUxMethod.getUpdateData(targetName,'all','status2'); console.log(sendData); break; default: break; } } var arrTreeData = [ {"id":"1", "text":"소프트보울", "value":"sb", "pid":""}, {"id":"1_1", "text":"사업지원팀", "value":"sb-01", "pid":"1" , "dept":"001"}, {"id":"1_2", "text":"감동팀", "value":"sb-02", "pid":"1" , "dept":"002"}, {"id":"1_3", "text":"혁신팀", "value":"sb-03", "pid":"1" , "dept":"003"}, {"id":"1_4", "text":"창조팀", "value":"sb-04", "pid":"1" , "dept":"004"}, {"id":"1_5", "text":"열정팀", "value":"sb-05", "pid":"1" , "dept":"005"} ]; </script> <sbux-tree id="idxTree_norm" name="tree_norm" uitype="normal" storage-data="object" jsondata-ref="arrTreeData" expand-type="icon" show-delete-confirm="true" contextmenu-id="idx_ctxt_menu_tree"> </sbux-tree> <sbux-contextmenu id="idx_ctxt_menu_tree" name="ctxt_menu" uitype="normal" callback="fnCtxtCallback" callback-before-open="fnCtxtCallback" > <menu-item id="edit" text="Edit" value="Edit Item" glyphicon="edit" accesskey="e" > <menu-item type="text" id="eNodeNm" text="노드명" value=""></menu-item> <menu-item type="text" id="eNodeVal" text="Value" value=""></menu-item> <menu-item type="text" id="eNodeDept" text="부서ID" value=""></menu-item> <menu-item type="button" id="newadapt" text="적용" onclick="fnCtxt(that, this, 'edit',eNodeNm,eNodeVal,eNodeDept)"> </menu-item> </menu-item> <menu-item id="delete" text="Delete" accesskey="d" onclick="fnCtxt(that,this,'delete',eNodeNm,eNodeVal,eNodeDept)" ></menu-item> <menu-item id="divider" divider></menu-item> <menu-item id="Sbling New" text="형제노드추가" value="snew" > <menu-item type="text" id="sNodeNm" text="노드명" value="신규노드"></menu-item> <menu-item type="text" id="sNodeVal" text="Value" value="New Value"></menu-item> <menu-item type="text" id="sNodeDept" text="부서ID" value="부서ID"></menu-item> <menu-item type="button" id="newadapt" text="적용" onclick="fnCtxt(that,this,'sbling',sNodeNm,sNodeVal,sNodeDept)"> </menu-item> </menu-item> <menu-item id="Child New" text="자식노드추가" value="cnew" > <menu-item type="text" id="cNodeNm" text="노드명" value="신규노드"></menu-item> <menu-item type="text" id="cNodeVal" text="Value" value="New Value"></menu-item> <menu-item type="text" id="cNodeDept" text="부서ID" value="부서ID"></menu-item> <menu-item type="button" id="newadapt" text="적용" onclick="fnCtxt(that,this,'child',cNodeNm,cNodeVal,cNodeDept)"> </menu-item> </menu-item> <menu-item id="CRUD" text="데이터확인" value="crud" onclick="fnCtxt(that,this,'crud')"> </menu-item> </sbux-contextmenu> |
