ContextMenu
SBGrid는 컨텍스트 메뉴 기능을 제공합니다. (* 그리드 내에서 오른쪽 마우스 클릭을 하십시오.)
Context Menu 는 Html 로 직접 만드실 수 있습니다.
요약
마우스 우클릭 시 컨텍스트 메뉴가 나타납니다.입력값
var GridInitInfo = {
"bContextMenu" : true,
"arContextMenuList" : arContextMenuListTemp
}
datagrid1 = createSBDataGrid(GridInitInfo);
var arContextMenuListTemp =
[
{
"strTitle" : string 메뉴제목,
"bEnabled" : boolean 사용여부,
"strShortcutKey": string 단축키,
"fnFunction" : function 실행함수,
"arArguments" : array arguments
}
]
예)var arContextMenuListTemp = [{"strTitle":"행추가(I)", "bEnabled":true," strShortcutKey":'I', "fnFunction":ctxt_addRow, "arArguments": ['datagrid1']}]
상세설명
마우스 오른쪽 버튼클릭 후 클릭, 단축키를 통해 컨텍스트메뉴를 사용할 수 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta content="IE=9" http-equiv="X-UA-Compatible">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SoftBowl SBGrid Example</title>
<script type="text/javascript" src="../../kr/co/softbowl/js/Library/json-minified.js"></script>
<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../kr/co/softbowl/js/Library/json2.js"></script>
<script type="text/javascript" src="../../kr/co/softbowl/SBGrid.js"></script>
<script type="text/javascript" src="../../js/DATA_JSON_orgin.js"></script>
<script type="text/javascript">
SBGrid.DEF.DOMAIN = "../../";
<script>
<script type="text/javascript">
var datagrid1;
$(document).ready(function () {
__createElements();
});
function __createElements() {
var strCaption = "순번^동^명칭^주소^형태1^관리부서^전화번호^형태2^공급연수",
strStyle = "left:1px; top:5px; width:100%; height:500px; text-align:left;",
strWidth = "40,80,250,180,150,140,150,160,120";
var GridInitInfo = {
"strParentId" : "sbGridArea",
"strId" : "datagrid1",
"strCaption" : strCaption,
"strColWidth" : strWidth,
"strJsonRef" : "jsonRlt1.RESULT_LIST[0].records",
"strStyle" : strStyle,
"strBackColorAlternate" : "#f7f7f7",
"bContextMenu" : true, //ContextMenu 사용을 위해 true로 설정
"arContextMenuList" : arContextMenuListTemp, //ContextMenu의 정보를 담을 배열을 맵핑
"strSelectMode" : "free",
"strDataReplace" : "null?데이터가없습니다"
};
datagrid1 = createSBDataGrid(GridInitInfo);
var SBGridColumnInitInfo = [
{ "id": "col1", "type": "output", "ref": "_id","style" : "text-align:right; padding-right:5px;" },
{ "id": "col2", "type": "output", "ref": "동" , "style" : "padding-left:5px;" },
{ "id": "col3", "type": "output", "ref": "명칭" , "style" : "padding-left:5px;" },
{ "id": "col4", "type": "output", "ref": "주소" , "style" : "padding-left:5px;" },
{ "id": "col5", "type": "output", "ref": "형태1" , "style" : "padding-left:5px;" },
{ "id": "col6", "type": "output", "ref": "관리부서" , "style" : "padding-left:5px;" },
{ "id": "col7", "type": "output", "ref": "전화번호" , "style" : "text-align:right; padding-left:5px;" },
{ "id": "col8", "type": "output", "ref": "형태2" , "style" : "padding-left:5px;" },
{ "id": "col9", "type": "output", "ref": "공급면수" , "style" : "text-align:right; padding-left:5px;" }
];
datagrid1.createColumns(SBGridColumnInitInfo);
};
var arContextMenuListTemp =
[
{
"strTitle" : "행추가(I)",
"bEnabled" : true,
"strShortcutKey": 'I',
"fnFunction" : ctxt_addRow,
"arArguments" : ['datagrid1']
},
{
"strTitle" : "행삭제(D)",
"bEnabled" : true,
"strShortcutKey": 'D',
"fnFunction" : ctxt_delRow,
"arArguments" : ['datagrid1']
},
{
"strTitle" : "숨기기(W)",
"bEnabled" : true,
"strShortcutKey": 'W',
"fnFunction" : ctxt_colHidden,
"arArguments" : ['datagrid1',true]
},
{
"strTitle" : "숨기기취소(X)",
"bEnabled" : true,
"strShortcutKey": 'X',
"fnFunction" : ctxt_hiddenCancel,
"arArguments" : ['datagrid1']
}
];
function ctxt_addRow(){
var curRow = datagrid1.getRow();
if(curRow >= datagrid1.getFixedRows()){
datagrid1.insertRow(curRow);
}
}
function ctxt_delRow(){
var curRow = datagrid1.getRow();
if(curRow >= datagrid1.getFixedRows()){
datagrid1.deleteRow(curRow);
}
}
function ctxt_colHidden(strGridID, bIsHidden){
var objTargetGrid = SBGrid.getGrid(strGridID);
if(objTargetGrid != null){
if (SBGrid.DEF.is_chrome) {
if (bIsHidden) {
var nColWidth = objTargetGrid.m_arHiddenCol[objTargetGrid.col];
objTargetGrid.setColWidth(objTargetGrid.col, 0.1);
objTargetGrid.m_arHiddenCol[objTargetGrid.col] = nColWidth;
}else{
objTargetGrid.setColWidth(objTargetGrid.col, objTargetGrid.m_arHiddenCol[objTargetGrid.col]);
}
} else {
objTargetGrid.setColHidden(objTargetGrid.col, bIsHidden);
}
}
objTargetGrid = null;
};
function ctxt_hiddenCancel(strGridID){
var objTargetGrid = SBGrid.getGrid(strGridID);
if(objTargetGrid != null){
for(var i = 0; i<objTargetGrid.getCols(); i++){
objTargetGrid.setColHidden(i, false);
}
}
objTargetGrid = null;
};
</script>
</head>
<body>
<div id = "sbGridArea" ></div>
</body>
</html>