guide Getting Started
설치
개발자 페이지나 기타 전달 받은 모듈을 앱 페이지에 include한다.
<html>
<head>
<link href="/styles/realgrid-touch-style.css" rel="stylesheet">
<script type="text/javascript" src="/lib/realgrid-touch-lic.js"></script>
<script type="text/javascript" src="/lib/realgrid-touch.1.x.x.min.js"></script>
</head>
</html>
npm
npm i realgrid-touch
yarn add realgrid-touch
컨트롤 생성
먼저, 앱 페이지에 리스트 컨트롤이 생성될 container 요소가 준비돼야 한다. 또, 어떤 방식으로든 container의 높이가 지정되어야 한다.
<!-- 화면 전체를 리스트 컨트롤로 채운다. -->
<div id="realtouch" style="position: absolute; width: 100%; height: 100%">
</div>
<!-- 위치와 크기를 지정한다. -->
<div id="realtouch" style="position: relative; width: 90%; height: 500px; top: 50px; margin: auto;">
</div>
Full 모드인 경우 리스트 컨트롤의 내용이 모두 표시되도록 container의 높이를 설정하지 않는다.
<!-- full 모드일때 높이를 지정하지 않는다. -->
<div id="realtouch" style="width: 90%; border: 1px solid gray;">
</div>
컨트롤 설정 및 데이터 연결
HTML window의 DOMContentLoaded 이벤트 등에서 리스트 컨트롤을 초기화 한다.
var realtouch;
var data;
window.addEventListener('DOMContentLoaded', function () {
try {
initRt();
} catch (err) {
alert(err);
console.error(err);
}
});
function initRt() {
const data = data = RealTouch.createListData('data', {});
// html에서 준비한 container의 id를 지정한다.
const list = realtouch = RealTouch.craeteListControl(document, 'realtouch');
// 컨트롤 설정 및 옵션
list.setConfig({
...
});
// 데이터 연결
list.data = data;
// 데이터 로드
loadData(data);
}
function loadData(data) {
// 로컬/원격 데이터 로딩
$.ajax(...);
}