들어가며

이번 강좌에서는 지난 강좌인 Cell Button에서 언급한 팝업 메뉴를 자세히 알아보도록 하겠습니다.

이론

RealGrid는 데이터 셀에 기본적인 편집기(Cell Editor) 외에 CellButton을 표시할 수 있다는것을 지난 강좌에서 배웠습니다. 셀 버튼의 유형을 popup 으로 지정하여 팝업메뉴를 사용할 수 있습니다.

팝업메뉴를 사용하기 위해 어떠한 작업이 필요한지 알아보도록 하겠습니다.

  1. DataColumn의 button 속성을 popup으로 지정합니다.
  2. MenuItem들로 이루어진 메뉴를 작성합니다.
    • label : 메뉴에 표시될 명칭을 지정합니다.
    • type : 메뉴 항목의 형태, ‘normal’, ‘check’, ‘radio’, ‘separator’ 를 사용할 수 있습니다.
    • group : 라디오 버튼을 사용할 때의 그룹을 지정합니다. 동일 그룹으로 지정된 메뉴항목들 안에서 하나만 선택할 수 있습니다.
    • enabled : 사용 여부를 지정합니다.
    • checked : type이 ‘check’이거나 ‘radio’일때 체크 표시 여부를 지정합니다.
    • tag : 테그를 지정합니다.
    • children : 하위 메뉴가 필요할때 하위 메뉴에 대한 메뉴항목들을 지정합니다.
  3. GridBase.addPopupMenu()을 사용하여 2번에서 만들어진 메뉴를 등록합니다.
  4. 팝업메뉴를 사용하려는 DataColumn.popupMenu 에 3번에서 등록한 이름을 지정 합니다.

이런 과정을 거쳐야 팝업메뉴가 사용가능 합니다.

실습

실습에서는 직업 컬럼에 팝업메뉴를 연결하고 팝업 메뉴를 클릭시 발생하는 콜백함수를 확인해보도록 하겠습니다.

  1. 메뉴 항목들로 이루어진 팝업메뉴를 만들고 그리드에 메뉴를 등록해보도록 하겠습니다. 주석을 확인해보면서 메뉴 항목의 기능을 습득하세요.

     $("#btnAddPopupMenu").click(function () {    
         // popup menus
         var menu = [{
             label: "menu1 입니다.",         // menu1은 활성화 되어 있고 하위 메뉴를 가지고 있습니다.
             enabled: true,
             children: [{
                 label: "submenu1 입니다."
             }, {
                 label: "submenu2 입니다."
             }]
         }, {
             label: "menu2 입니다",
             enabled: false                 // menu2 는 비활성화 되어 있습니다.
         }, {
             label: "-"                     // menu2 와 menu3 사이에 구분선이 그어집니다. 
                                            // type: "separator" 와 label: "-" 는 같은 기능을 합니다.
         }, {
             label: "menu3 입니다",            
             type: "check",                 // menu3은 체크를 할 수 있는 아이템
             checked: true,                 // menu3은 기본값으로 체크되어 있습니다.
             tag: "check_menu"              // 해당 메뉴항목이 클릭되어 있는지의 여부를 확인하기 위해 테그를 지정했습니다.
         }, {
             label: "group menu",            
             children: [{                   // group menu는 하위 메뉴를 가지고 있습니다.
                 label: "group1 - 첫번째",    // menu1의 하위 메뉴와는 다르게 라디오 버튼을 사용하며,   
                 type: "radio",             // 라디오 버튼은 group1, group2 두개의 그룹으로 이루어져 있습니다.
                 group: "group1",            
                 checked: true              // "group1 - 첫번째"만 체크 되어 있습니다.
             }, {
                 label: "group1 - 두번째",
                 type: "radio",
                 group: "group1",
                 enabled: false             // "group1 - 두번째"는 비활성화 되어 체크할 수 없습니다.  
             }, {
                 label: "group1 - 세번째",
                 type: "radio",
                 group: "group1"
             }, {
                 label: "group2 - 첫번째",    // group2는 어느것도 체크되어 있지 않습니다.
                 type: "radio",             // 그러나 팝업메뉴를 통해 체크할 수 있습니다.
                 group: "group2"
             }, {
                 label: "group2 - 두번째",
                 type: "radio",
                 group: "group2"                
             }]
         }];
    
    
         gridView.addPopupMenu("menu1", menu);   //"menu1"이란 이름으로 위에서 만든 팝업메뉴를 등록합니다.
    
     });
  2. 메뉴항목을 클릭했을때 발생하는 콜백함수를 설정 합니다.

     $("#btnSetCallback").click(function () {
         gridView.onMenuItemClicked = function (grid, data) {
             var s = data.label + (data.checked ? " checked" : "");
             if (data.tag)
                 s += "\n" + "tag: " + data.tag;
             alert(s);
         };     
     });
  3. 직업 컬럼에 팝업메뉴를 연결 합니다.

     $("#btnSetColumn").click(function () {
         var col = gridView.columnByName("col1");
         col.button = "popup";
         col.popupMenu = "menu1";
    
         gridView.setColumn(col);
     });

실행화면

  1. 버튼을 클릭하면 그리드에 팝업메뉴를 등록합니다. 화면에는 아무 변화가 없습니다.

  2. 버튼을 클릭하면 콜백 함수를 설정합니다. 화면에는 아무 변화가 없습니다.

  3. 버튼을 클릭하면 직업 컬럼에 팝업메뉴를 연결합니다.

  4. 직업 컬럼을 선택하여 팝업 메뉴를 실행해보면서 결과를 확인해 보세요.

전체 소스코드

SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.112.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/realgridjs_eval.1.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.js"></script>

<script>
var gridView;
var dataProvider;

$(document).ready( function(){
    RealGridJS.setTrace(false);
    RealGridJS.setRootContext("/script");
    
    dataProvider = new RealGridJS.LocalDataProvider();
    gridView = new RealGridJS.GridView("realgrid");
    gridView.setDataSource(dataProvider);

    //필드 배열 객체를  생성합니다.
    var fields = [
        {
            fieldName: "field1"
        },
        {
            fieldName: "field2"
        },
        {
            fieldName: "field3"
        },
        {
            fieldName: "field4"
        },
        {
            fieldName: "field5"
        },
        {
            fieldName: "field6"
        },
        {
            fieldName: "field7"
        },
        {
            fieldName: "field8"
        },
        {
            fieldName: "field9"
        },
        {
            fieldName: "field10"
        }
    ];
    //DataProvider의 setFields함수로 필드를 입력합니다.
    dataProvider.setFields(fields);

    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",
            header : {
                text: "직업"
            },
            width : 60
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "성별"
            },
            width: 50
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "이름"
            },
            width: 80
        },
        {
            name: "col4",
            fieldName: "field4",
            header : {
                text: "국어"
            },
            width: 80
        },
        {
            name: "col5",
            fieldName: "field5",
            header : {
                text: "수학"
            },
            width: 80
        },
        {
            name: "col6",
            fieldName: "field6",
            header : {
                text: "민법"
            },
            width: 80
        },
        {
            name: "col7",
            fieldName: "field7",
            header : {
                text: "한국사"
            },
            width: 80
        },
        {
            name: "col8",
            fieldName: "field8",
            header : {
                text: "영어"
            },
            width: 80
        },
        {
            name: "col9",
            fieldName: "field9",
            header : {
                text: "과학"
            },
            width: 80
        },
        {
            name: "col10",
            fieldName: "field10",
            header : {
                text: "사회"
            },
            width: 80
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    var data = [
        ["배우", "여자", "전도연", "0", "70", "90", "70", "60", "100", "80"],
        ["가수", "여자", "이선희", "1", "33", "90", "70", "60", "100", "80"],
        ["배우", "여자", "하지원", "2", "100", "90", "70", "60", "100", "80"],
        ["가수", "여자", "박정현", "3", "90", "90", "70", "60", "100", "80"],
        ["배우", "여자", "전지현", "4", "100", "90", "70", "60", "100", "80"],
        ["가수", "남자", "성시경", "7", "100", "100", "100", "100", "100", "100"],
        ["가수", "남자", "신해철", "8", "100", "100", "100", "100", "100", "100"],
        ["가수", "남자", "윤상", "9", "100", "100", "100", "100", "100", "100"],
        ["가수", "남자", "윤종신", "10", "100", "100", "100", "100", "100", "100"],
        ["가수", "여자", "이소라", "11", "100", "100", "100", "100", "100", "100"],
        ["배우", "여자", "강소라", "12", "100", "100", "100", "100", "100", "100"],
        ["가수", "남자", "타블로", "13", "100", "100", "100", "100", "100", "100"],
        ["가수", "남자", "이승환", "14", "100", "100", "100", "100", "100", "100"],
        ["가수", "남자", "토이", "15", "100", "100", "100", "100", "100", "100"]
    ];
    dataProvider.setRows(data);

    gridView.setOptions({
        indicator: {visible: true},        
        checkBar: {visible: false},
        stateBar: {visible: true},
        edit: {insertable: true, appendable: true, updatable: true, editable: true, deletable: true},
        sort: {enabled: false},
        panel: {visible: false}
    });

    dataProvider.setOptions({
        softDeleting: true
    })

    //메뉴 항목들로 이루어진 팝업메뉴를 만들고 그리드에 메뉴를 등록해보도록 하겠습니다.
    //주석을 확인해보면서 메뉴 항목의 기능을 습득하세요.
    $("#btnAddPopupMenu").click(function () {    
        // popup menus
        var menu = [{
            label: "menu1 입니다.",         // menu1은 활성화 되어 있고 하위 메뉴를 가지고 있습니다.
            enabled: true,
            children: [{
                label: "submenu1 입니다."
            }, {
                label: "submenu2 입니다."
            }]
        }, {
            label: "menu2 입니다",
            enabled: false                 // menu2 는 비활성화 되어 있습니다.
        }, {
            label: "-"                     // menu2 와 menu3 사이에 구분선이 그어집니다. 
                                           // type: "separator" 와 label: "-" 는 같은 기능을 합니다.
        }, {
            label: "menu3 입니다",            
            type: "check",                 // menu3은 체크를 할 수 있는 아이템
            checked: true,                 // menu3은 기본값으로 체크되어 있습니다.
            tag: "check_menu"              // 해당 메뉴항목이 클릭되어 있는지의 여부를 확인하기 위해 테그를 지정했습니다.
        }, {
            label: "group menu",            
            children: [{                   // group menu는 하위 메뉴를 가지고 있습니다.
                label: "group1 - 첫번째",    // menu1의 하위 메뉴와는 다르게 라디오 버튼을 사용하며,   
                type: "radio",             // 라디오 버튼은 group1, group2 두개의 그룹으로 이루어져 있습니다.
                group: "group1",            
                checked: true              // "group1 - 첫번째"만 체크 되어 있습니다.
            }, {
                label: "group1 - 두번째",
                type: "radio",
                group: "group1",
                enabled: false             // "group1 - 두번째"는 비활성화 되어 체크할 수 없습니다.  
            }, {
                label: "group1 - 세번째",
                type: "radio",
                group: "group1"
            }, {
                label: "group2 - 첫번째",    // group2는 어느것도 체크되어 있지 않습니다.
                type: "radio",             // 그러나 팝업메뉴를 통해 체크할 수 있습니다.
                group: "group2"
            }, {
                label: "group2 - 두번째",
                type: "radio",
                group: "group2"                
            }]
        }];


        gridView.addPopupMenu("menu1", menu);   //"menu1"이란 이름으로 위에서 만든 팝업메뉴를 등록합니다.

    });

    //메뉴항목을 클릭했을때 발생하는 콜백함수를 설정합니다.
    $("#btnSetCallback").click(function () {
        gridView.onMenuItemClicked = function (grid, data) {
            var s = data.label + (data.checked ? " checked" : "");
            if (data.tag)
                s += "\n" + "tag: " + data.tag;
            alert(s);
        };      
    });

    //직업 컬럼에 팝업메뉴를 연결 합니다. 
    $("#btnSetColumn").click(function () {
        var col = gridView.columnByName("col1");
        col.button = "popup";
        col.popupMenu = "menu1";

        gridView.setColumn(col);
    });
});    
</script>

HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnAddPopupMenu">AddPopupMenu</button> 버튼을 클릭하면 그리드에 팝업메뉴를 등록합니다. 화면에는 아무 변화가 없습니다. 

2. <button type="button" class="btn btn-primary btn-xs" id="btnSetCallback">SetCallback</button> 버튼을 클릭하면 콜백 함수를 설정합니다. 화면에는 아무 변화가 없습니다. 

3. <button type="button" class="btn btn-primary btn-xs" id="btnSetColumn">btnSetColumn</button> 버튼을 클릭하면 직업 컬럼에 팝업메뉴를 연결합니다. 

4. 직업 컬럼을 선택하여 팝업 메뉴를 실행해보면서 결과를 확인해 보세요.

<div id="realgrid" style="width: 100%; height: 250px;"></div>


데모 사이트


API 참조