contextmenu 적용
마우스의 우측 버튼 클릭을 통해 contextmenu를 출력할 수 있습니다.
header의 영역과 data영역 2군데 별도의 형태의 설정이 가능하며, data영역 중 특정 컬럼에서의 별도의 형태의 생성도 가능합니다.
qcell.setContextmenu(
{
header: {
id: "header-contextmenu",
contents:
[
{icon: '<i class="fas fa-plus"></i>', label: '메뉴header-a', callback: function(){qcell.addRow();}},
{divine: true},
{icon: '<i class="fas fa-minus"></i>', label: '메뉴header-b', callback: function(){qcell.removeRow();}}
]
},
data: {
base: {
id: 'base-contextmenu',
contents:
[
{icon: '<i class="fas fa-plus"></i>', label: '메뉴base-a', callback: function(){qcell.addRow();}},
{icon: '<i class="fas fa-minus"></i>', label: '메뉴base-b', callback: function(){qcell.removeRow();}},
{divine: true},
{label: 'base-c', items:
[
{icon: '<i class="fas fa-copy"></i>', label: 'base-c-1', callback: "objClick" },
{icon: '<i class="fas fa-paste"></i>', label: 'base-c-2', callback: "objClick" }
]
, disabled: true
}
]
},
except: [
{
col: 3,
id: 'except1-contextmenu',
contents:[
{label: 'except1-d', items:
[
{icon: './images/hard.png', label: 'except1-d-1', items:
[
{icon: './images/flash.png', label: 'except1-d-1-1', callback: "objClick" },
{label: 'except1-d-1-2', callback: "objClick" }
],
callback: "objClick"
},
{label: 'except1-d-2', items:
[
{label: 'except1-d-2-1', callback: "objClick" },
{label: 'except1-d-2-2', callback: "objClick" },
],
callback: "objClick"
}
],
callback: "objClick"
}
]
}
]
}
}
function objClick(obj){
alert(obj.label + ' click');
}