SBGRID

전체메뉴보기

적용예시

컨텍스트 메뉴(contextmenu)

그리드에서 우클릭을 하여 함수를 설정할 수 있는 컨텍스트 메뉴를 생성합니다.

상세설명

contextmenu

속 성 : SBGridProperties.contextmenu = value;
- value(선택) : [boolean] 그리드 contextmenu 사용 여부
  - true : 사용
  - false (default) : 사용하지 않음
속 성 : SBGridProperties.contextmenulist = value;
- value(선택) : [boolean] contextmenu를 구성하는 JSON데이터 변수
  - ex) var objMenuList = {
    "ADD":{
    "name" : "ADD ROW", //컨텍스트메뉴에 표시될 이름
    "accesskey" : "a", //단축키
    "callback" : ctxt_addRow, //콜백함수명
    "callbackparam" : ['datagrid1', false] //콜백함수 파라미터
    },
    "Delete":{
    "name":"DELETE",
    "accesskey" : "d",
    "callback" : ctxt_delRow
    }
    };

제약사항

컨텍스트 메뉴를 생성하는별도의 JSON 데이터가 필요합니다.

예시

마우스 오른쪽 클릭 후 컨텍스트 메뉴를 확인해 보세요

							var datagrid;
							var SBGridProperties = {};
							var objMenuList = {
								"Sub Menu":{
									"name":"일반 컨텍스트 메뉴",
									"items":{
										"ADD":{
											"name" : "행 추가(A)",
											"icon" : "add",
											"accesskey" : "a",
											"callback" : ctxt_addRow
										},
										"Delete":{
											"name":"행 삭제(D)",
											"icon":"delete",
											"accesskey" : "d",
											"callback" : ctxt_delRow
										},
										"sep1": "------------",
										"Hidden":{
											"name":"열 숨기기(H)",
											"icon":"hidden",
											"accesskey" : "h",
											"callback" : ctxt_colHidden
										},
										"Hidden Cancel":{
											"name":"열 숨기기 취소(C)",
											"icon":"cancel",
											"accesskey" : "c",
											"callback" : ctxt_hiddenCancel
										},
										"sep7": "------------",
										"sub2":{
											"name":"callback 이벤트 발생(E)",
											"accesskey":"e",
											"callback":sub_callfun,
											"callbackparam" : ['datagrid', false]
										}
									}
								},
								"sep2": "---------",
								"Sub Menu2":{
									"name":"입력 컨텍스트 메뉴",
									"items":{
										"academy": {
											"name": "학원명 입력", 
											"type": 'text', 
											"value": "", 
										},
										"sep3": "---------",
										"name": {
											"name": "설립자 입력", 
											"type": 'text'
										},
										"startTime": {
											"name": "강의시간 입력", 
											"type": 'select', 
											"options": {"14:00":"14:00","15:00":"15:00","16:00":"16:00"} 
										},				
										"startDay": {
											"name": "비고", 
											"type": 'textarea', 
											"value": "",
											"disabled": true
										},
										"sep4": "---------",
										"key": {
											"name": "적용", 
											"callback": input_callback
										}
									}
								}
							};
					
							function createGrid(){
								SBGridProperties.parentid = 'SBGridArea';
								SBGridProperties.id = 'datagrid';
								SBGridProperties.jsonref = 'fData';	
								SBGridProperties.extendlastcol = 'scroll';
								SBGridProperties.selectmode = 'free';
								SBGridProperties.contextmenu = true;
								SBGridProperties.contextmenulist = objMenuList;
								SBGridProperties.columns = [
									{caption : ['학원명'],    ref : 'academy',      width : '150px',  style : 'text-align:center',    type : 'input'},
									{caption : ['설립자'],    ref : 'name',	     width : '80px',   style : 'text-align:center',    type : 'input'},
									{caption : ['설립일'],	   ref : 'startDay',     width : '130px',  style : 'text-align:center',    type : 'input'},
									{caption : ['휴대전화'],  ref : 'phone',        width : '170px',  style : 'text-align:center',	  type : 'input'},
									{caption : ['수강과목'],  ref : 'curriculum',   width : '60px',   style : 'text-align:center',	  type : 'output'},
									{caption : ['강의시간'],  ref : 'startTime'	,   width : '110px',  style : 'text-align:center',	  type : 'output'},
									{caption : ['수강료'],	   ref : 'pay',		     width : '100px',  style : 'text-align:center',	  type : 'output'},
									{caption : ['카드번호'],  ref : 'cardNum',	 	width : '130px',  style : 'text-align:center',	  type : 'output'}
								];
					
								datagrid = _SBGrid.create(SBGridProperties);
							};
							
							function ctxt_addRow(){
								var nRow = datagrid.getRow();
								if(nRow > 0){
									datagrid.insertRow(nRow, 'above', []);	
								}
							}
					
							function ctxt_delRow(){
								var nRow = datagrid.getRow();
								if(nRow > 0){
									datagrid.deleteRow(nRow);	
								}
							}
					
							var arrCol = [];
							function ctxt_colHidden(){
								var nCol = datagrid.getCol();
								if(nCol > -1){
									arrCol.push(nCol);
									datagrid.setColHidden(nCol, true, true);
								}
							}
							
							function ctxt_hiddenCancel(){
								var len = arrCol.length;
								if(len == 0){
									return false;
								}
								datagrid.setColHidden(arrCol[len-1], false, true);
								arrCol.pop();
							}
							
							function sub_callfun(arg1, arg2, arg3){
								alert("****** SUB 메뉴 이벤트 발생 ******");
								console.log("첫번째 파라미터 : ", arg1);
								console.log("두번째 파라미터 : ", arg2);
								console.log("세번째 파라미터 : ", arg3);
							}
							
							function input_callback(objVal){
								var nRow = datagrid.getRow();
								if(!_.isEmpty(objVal)){
									if(!_.isUndefined(objVal.academy)){
										datagrid.setCellData(nRow, datagrid.getColRef('academy'), objVal.academy);
										datagrid.setCellStyle('background-color', nRow, datagrid.getColRef('academy'), nRow, datagrid.getColRef('academy'), 'yellow');
									}
									if(!_.isUndefined(objVal.name)){
										datagrid.setCellData(nRow, datagrid.getColRef('name'), objVal.name);
										datagrid.setCellStyle('background-color', nRow, datagrid.getColRef('name'), nRow, datagrid.getColRef('name'), 'yellow');
									}
									if(!_.isUndefined(objVal.startTime)){
										datagrid.setCellData(nRow, datagrid.getColRef('startTime'), objVal.startTime);
										datagrid.setCellStyle('background-color', nRow, datagrid.getColRef('startTime'), nRow, datagrid.getColRef('startTime'), 'yellow');
									}
								}
							}