rMateGridH5 API Reference

알메이트 그리드는 브라우져에서 DataGrid를 표현하는 JavaScript UI 컴포넌트입니다.

Reference 사용시 주의점

• Class에서 지원되는 Members는 레이아웃 XML에서는 attribute로 설정하면 되나, JavaScript에서 작업할 때는 구분하여 작업해야 합니다.
  가령 DataGrid의 horizontalScrollPolicy 와 sortableColumns 속성은 레이아웃 XML에서는 다음과 같이 설정합니다.

        <DataGrid id="dg1" horizontalScrollPolicy="auto" sortableColumns="true">\
            <columns>\
                <DataGridColumn dataField="From" width="110"/>\
                <DataGridColumn dataField="Subject" width="140"/>\
            </columns>\
        </DataGrid>\

하지만 JavaScript에서 설정할 경우에는 속성에 따라 다음과 같이 getter, setter형식으로 작업하거나, 변수형식으로 작업하셔야 합니다.

   dataGrid.setHorizontalScrollPolicy("auto");		// getter, setter 형
   dataGrid.sortableColumns = fale;					// 변수형

따라서 Class의 속성을 JavaScript에서 조작할 때에는 속성이 getter, setter 형인지, 변수형인지 조사한 후에 작업하시기 바랍니다.
이 문서에서 Members(속성)을 조회하면 getter, setter형일 경우, 아래에 "getter, setter함수를 사용합니다" 라는 문구가 붙어 있습니다.

• Class에서 지원되는 Style은 레이아웃 XML에서는 attribute로 설정하면 되나, JavaScript에서 작업할 때는 getStyle, setStyle 함수로 작업해야 합니다.
  가령 DataGrid의 backgroundColor 스타일은 레이아웃 XML에서는 다음과 같이 설정합니다.

        <DataGrid id="dg1" backgroundColor="#e0e0e0">\
            <columns>\
                <DataGridColumn dataField="From" width="110"/>\
                <DataGridColumn dataField="Subject" width="140"/>\
            </columns>\
        </DataGrid>\

하지만 JavaScript에서 설정할 경우에는 속성에 따라 다음과 같이 getStyle, setStyle 함수를 사용합니다.

   var bgColor = dataGrid.getStyle("backgroundColor");
   dataGrid.setStyle("backgroundColor", "#e0e0e0");

또한 사용되는 스타일명은 CSS와 달리 무조건 카멜 표기법으로 써야합니다. 즉 background-color로 쓰지 않고 backgroundColor 형식으로 써야 합니다.

• Class에서 지원되는 Event는 크게 두 종류로 HTML에서 발생하는 이벤트와 그리드 시스템이 자체적으로 발생시키는 이벤트입니다.
  이때 이벤트 처리 함수를 등록할 때에는 이벤트의 종류에 따라 HTML이벤트는 addEvent, removeEvent를, 그리드 자체 이벤트는 addEventListener, removeEventListener를 사용하셔야 합니다.

   dataGrid.addEvent("keydown", keyboardEventHandler);			// HTML 이벤트
   dataGrid.removeEvent("keydown", keyboardEventHandler);		// HTML 이벤트
   
   dataGrid.addEventListener("itemClick", itemClickEventHandler);			// 그리드 자체 이벤트
   dataGrid.removeEventListener("itemClick", itemClickEventHandler);		// 그리드 자체 이벤트

이 문서에서 이벤트의 Type이 MouseEvent, KeyboardEvent 등으로 표기된 것은 HTML 이벤트를 의미합니다.

HTML에서 그리드 생성하는 방법

1. HTML의 head에 css와 js 파일을 include합니다.

<!-- rMateGridH5 CSS -->
<link rel="stylesheet" type="text/css" href="../rMateGridH5/Assets/rMateH5.css"/>
<!-- rMateGridH5 라이센스 -->
<script type="text/javascript" src="../LicenseKey/rMateGridH5License.js"></script>
<!-- rMateGridH5 라이브러리 -->
<script type="text/javascript" src="../rMateGridH5/JS/rMateGridH5.js"></script>

2. 기능에 따라 추가적인 js 파일을 include합니다.

<!-- js-xlsx 라이브러리 -->
<script type="text/javascript" src="../rMateGridH5/JS/jszip.min.js"></script>
<script type="text/javascript" src="../rMateGridH5/JS/xlsx.min.js"></script>

3. 그리드가 생성될 div를 body에 생성합니다.

	<div class="content">
		<!-- 그리드가 삽입될 DIV -->
		<div id="gridHolder"></div>
	</div>

4. 그리드를 생성하는 JavaScript를 head에 넣어줍니다.

  // rMate 그리드 생성 준비가 완료된 상태 시 호출할 함수를 지정합니다.
  var jsVars = "rMateOnLoadCallFunction=gridReadyHandler";

  // rMateDataGrid 를 생성합니다.
  // 파라메터 (순서대로)
  //  1. 그리드의 id ( 임의로 지정하십시오. )
  //  2. 그리드가 위치할 div 의 id (즉, 그리드의 부모 div 의 id 입니다.)
  //  3. 그리드 생성 시 필요한 환경 변수들의 묶음인 jsVars
  //  4. 그리드의 가로 사이즈 (생략 가능, 생략 시 100%)
  //  5. 그리드의 세로 사이즈 (생략 가능, 생략 시 100%)
  rMateGridH5.create("grid1", "gridHolder", jsVars, "100%", "100%");

5. 그리드가 생성될 때 불려지는 rMateOnLoadCallFunction 함수에서 레이아웃과 데이터를 넣어줍니다.

  // 그리드의 속성인 rMateOnLoadCallFunction 으로 설정된 함수.
  // rMate 그리드의 준비가 완료된 경우 이 함수가 호출됩니다.
  function gridReadyHandler(id) {
      // rMateGrid 관련 객체
      gridApp = document.getElementById(id);	// 그리드를 포함하는 div 객체
      gridRoot = gridApp.getRoot();	// 데이터와 그리드를 포함하는 객체

      gridApp.setLayout(layoutStr);
      gridApp.setData(gridData);
  }

  var gridApp, gridRoot, dataGrid;

• 그리드의 생성에 필요한 layout xml 을 다음과 같은 형식으로 작성됩니다.

    var layoutStr = '\
    <?xml version="1.0" encoding="utf-8"?>\
    <rMateGrid>\
        <NumberFormatter id="numfmt" useThousandsSeparator="true"/>\
        <DataGrid id="dg1" horizontalScrollPolicy="auto" verticalAlign="middle" textAlign="center">\
            <columns>\
                <DataGridColumn dataField="From" width="110"/>\
                <DataGridColumn dataField="Subject" width="140"/>\
                <DataGridColumn dataField="ReceiveDate" headerText="Date"/>\
                <DataGridColumn dataField="CC"/>\
                <DataGridColumn dataField="Level"/>\
                <DataGridColumn dataField="Length" textAlign="right" formatter="{numfmt}"/>\
                <DataGridColumn dataField="AttachCount" textAlign="right"/>\
            </columns>\
        </DataGrid>\
    </rMateGrid>';

• 그리드의 생성에 데이터는 JavaScript 배열, XML, JSON, CSV, TSV형식이 가능하며 배열일 경우 다음과 같은 형식으로 작성됩니다.

   var gridData = [
		{From: "Amit", Subject: "GMC-1 Release1", ReceiveDate: "2016/09/06", SendDate: "2016/09/06", CC: "Jim", Length: 451572, Level: 1, AttachCount: 0},
		{From: "Amit", Subject: "GMC-1 Release3", ReceiveDate: "2016/08/06", SendDate: "2016/08/05", CC: "Jim", Length: 693572, Level: 3, AttachCount: 1},
		{From: "Amit", Subject: "GMC-1 Release3", ReceiveDate: "2016/08/06", SendDate: "2016/08/06", CC: "Jim", Length: 8281, Level: 1, AttachCount: 12}
   ];