Skip to content

Latest commit

 

History

History
204 lines (174 loc) · 5.34 KB

README.md

File metadata and controls

204 lines (174 loc) · 5.34 KB

컨텍스트 메뉴

기본 코드

예제들의 기본이 되는 코드부터 살펴보겠습니다. 서버로부터 예제 데이터를 가져와서 표시해주기까지만 적용된 상태입니다.

기본 코드의 실행결과는 아래 링크에서 확인할 수 있습니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="/lib/realgrid-style.css" rel="stylesheet" />
		<script type="text/javascript" src="/lib/realgrid-lic.js"></script>
		<script type="text/javascript" src="/lib/realgrid.2.3.3.min.js"></script>
		<script type="text/javascript" src="/js/jquery-3.4.0.min.js"></script>
        <script type="text/javascript" src="/js/jszip.min.js"></script>
	</head>
	<body>
		<div id="realgrid" style="width: 100%; height: 440px;">
		</div>
	</body>
</html>

<script>
    const provider = new RealGrid.LocalDataProvider();
    const gridView = new RealGrid.GridView("realgrid");
    gridView.setDataSource(provider);

    provider.setFields([
        { fieldName: "KorName" },
        { fieldName: "Gender" },
        { fieldName: "Age" },
        { fieldName: "Phone" },
        { fieldName: "ProductId" },
        { fieldName: "KorCountry" },
        { fieldName: "OrderDate" },
        { fieldName: "CardNumber" },
    ]);

    gridView.setColumns([
        { fieldName: "KorName",      name: "KorName"},
        { fieldName: "Gender",       name: "Gender"},
        { fieldName: "Age",          name: "Age"},
        { fieldName: "Phone",        name: "Phone"},
        { fieldName: "ProductId",    name: "ProductId"},
        { fieldName: "KorCountry",   name: "KorCountry"},
        { fieldName: "OrderDate",    name: "OrderDate"},
        { fieldName: "CardNumber",   name: "CardNumber"},
    ]);

    var data_url = 
        "https://raw.githubusercontent.com/realgrid/" +
        "open-tutorial/main/datas/data-001.json";
    $.getJSON(data_url, function (data) {
        console.log(data);
        provider.fillJsonData(data, { fillMode: "set" });
    });
</script>

컨텍스트 메뉴 보이기

예제 코드의 실행결과는 아래 링크에서 확인할 수 있습니다.

...
<script>
    ...
    gridView.setContextMenu([
        {
            label: "Menu1"
        },
        {
            label: "Menu2"
        },
        {
            label: "-" // menu separator를 삽입합니다.
        },
        {
            label: "ExcelExport"
        }
    ]);
    ...
</script>

onContextMenuItemClicked 이벤트

예제 코드의 실행결과는 아래 링크에서 확인할 수 있습니다.

...
<script>
    ...
    gridView.onContextMenuItemClicked = function(grid, item, clickData) {
        console.log(item, clickData);

        if (item.label == "ExcelExport") {
            grid.exportGrid({
                type: "excel",
                target: "local"
            });
        }
    };
    ...
</script>

onContextMenuPopup 이벤트

예제 코드의 실행결과는 아래 링크에서 확인할 수 있습니다.

...
<script>
    ...
    gridView.onContextMenuPopup = function (grid, x, y, clickData) {
        //헤더셀 영역에서는 컨텍스트 메뉴 실행하지 않음
        return clickData.cellType != "header";
    };
    ...
</script>

동적 컨텍스트 메뉴

예제 코드의 실행결과는 아래 링크에서 확인할 수 있습니다.

...
<script>
    var menuHeader = [
        {
            label: "엑셀 내보내기",
            tag: "excel"
        }, 
        {
            label: "필터 만들기",
            tag: "filter"
        }, 
        {
            label: "-"
        }, 
        {
            label: "컬럼 감추기",
            tag: "column",
            columnVisible: true
        }, 
    ];

    var menuData = [
        {
            label: "엑셀 내보내기",
            tag: "excel"
        }, 
        {
            label: "-"
        }, 
        {
            label: "..."
        }, 
    ];
    ...
    gridView.onContextMenuPopup = function (grid, x, y, clickData) {
        if (clickData.cellType != "header") {
            grid.setContextMenu(menuHeader);
        } else {
            grid.setContextMenu(menuData);
        }
    };

    gridView.onContextMenuItemClicked = function (grid, item, clickData) {
        if (item.tag == "column") {
            menuHeader[3].columnVisible = !menuHeader[3].columnVisible;
            if (menuHeader[3].columnVisible) {
                menuHeader[3].label = "컬럼 감추기";
            } else {
                menuHeader[3].label = "컬럼 보이기";
            }

            var columns = grid.getColumns();
            for (var i in columns) {
                grid.setColumnProperty(columns[i].name, "visible", menuHeader[3].columnVisible);
            }
        }
    };    
    ...
</script>