guide Html Layout
RealGrid-Touch 라이브러리가 제공하는 기본 layout들이 부족한 경우 직접 html로 데이터행을 표시할 수 있다. 두 가지 방식으로 구현할 수 있다.
1. 컨트롤 container의 element
리스트 컨트롤이 생성되는 container div의 자손 element로 작성하고,
element의 id를 템플릿에 지정한다.
layout으로 사용할 element들은 반드시 'rtc-renderers'라는 div의 자식으로 포함되어야 한다.
이 div 엘리먼트는 컨트롤 생성시 layout 용으로 준비된 후 제거된다.
html 구문 속에 템플릿에 기본 layout을 지정하는 것과 동일하게 param을 사용할 수 있다.
<html>
<body>
<div id="realtouch">
<div class="rtc-renderers">
<div id="row">
<div>
<span style="font-size:17px;font-weight:bold;color:#555;">${@NAME}</span>
</div>
<div>
<span style="font-size:14px;color:#777;">${@ADDR}</span>
</div>
</div>
</div>
</div>
</body>
</html>
템플릿에서 layout type을 'html'로 지정하고, domid 속성에 element의 id를 설정한다.
const row_template = {
template: {
type: 'html',
domid: 'row',
}
};
2. inline html
템플릿 속성에 직접 html 구문을 설정한다.
const row_template = {
template: {
type: 'html',
html: '<div id="row"><div><span style="font-size:17px;font-weight:bold;color:#559;">${@NAME}</span></div><div><span style="font-size:14px;color:#777;">${@ADDR}</span></div></div>'
},
};
type은 생략할 수 있다.
const row_template = {
template: {
html: '<div id="row"><div><span style="font-size:17px;font-weight:bold;color:#559;">${@NAME}</span></div><div><span style="font-size:14px;color:#777;">${@ADDR}</span></div></div>'
},
};