반응형
TOAST GRID 생성
Grid를 그려봅시다.
<html>
<head>
<!-- CSS 선언 -->
<link href="css/tui-grid.css" rel="stylesheet"/>
</head>
<body>
<div id="grid"></div>
</body>
<!-- Js 선언 -->
<script src="js/tui-grid.js"></script>
<script>
</script>
</html>Index.html 파일입니다.
TOAST GRID - 시작
Toast Grid를 사용하였을까요? 일반적으론 Grid를 사용하지 않습니다. 그냥 Div로 어느정도만 만들어도 됩니다만, 여러 컬럼을 표시하기엔 Grid가 개발 효율이 높았습니다. Grid를 사용하는 경우는 택
poit.tistory.com
이전 내용처럼 CDN js/css를 따로 가지고왔습니다.
따라하실 경우 CDN을 사용하시길 바랍니다.
Script grid 정의
// GRID 를 보여준다.
grid = new tui.Grid({
el: document.getElementById('grid'), // Grid ID
bodyHeight: 'fitToParent', // 부모에 맞게 높이 설정
columns: colModel // Grid Head
});ID 설정, 부모높이에 맞게 높이 설정 (반응형), 헤더 정의
현재 Columns에 아무것도 없기에 그리드 헤더도 비어있을겁니다.
이후 실행 결과입니다.
깔끔하게 그리드가 전체 영역을 잡고 있습니다.
Header 추가
헤더를 한번 추가해보겠습니다.
var colModel = [
{
header: '제목', name: 'title', width : 70
},
{
header: '내용', name: 'content'
},
{
header: '날짜', name: 'date', width : 90
}
];header : 헤더 타이틀 / name : data / width : 가로 사이즈 (미설정시 나머지 영역을 차지함)
헤더를 추가한 실행 결과입니다.
위 적은 내용과 같이 사이즈, 타이틀이 설정되었습니다.
Data 추가
데이터도 추가해보겠습니다.
var data = [
{ title: "안녕1", content : "반갑습니다.", date: "2022/01/07"},
{ title: "안녕2", content : "반갑습니다.", date: "2022/01/08"},
{ title: "안녕3", content : "반갑습니다.", date: "2022/01/09"},
{ title: "안녕4", content : "반갑습니다.", date: "2022/01/10"},
];
grid.resetData(data);헤더 선언 시 헤더 타이틀과 맞게 넣어줍니다.
resetData로 데이터를 불러옵니다.
데이터까지 추가한 결과입니다.
<html>
<head>
<!-- CSS 선언 -->
<link href="css/tui-grid.css" rel="stylesheet"/>
</head>
<body>
<div id="grid"></div>
</body>
<!-- Js 선언 -->
<script src="js/tui-grid.js"></script>
<script>
// 그리드 선언
var grid;
// onready
window.addEventListener('DOMContentLoaded', function()
{
initGrid();
});
//===================================================
// Grid 초기화
//===================================================
function initGrid() {
var colModel = [
{
header: '제목', name: 'title', width : 70
},
{
header: '내용', name: 'content'
},
{
header: '날짜', name: 'date', width : 90
}
];
// GRID 를 보여준다.
grid = new tui.Grid({
el: document.getElementById('grid'),
bodyHeight: 'fitToParent',
columns: colModel
});
var data = [
{ title: "안녕1", content : "반갑습니다.", date: "2022/01/07"},
{ title: "안녕2", content : "반갑습니다.", date: "2022/01/08"},
{ title: "안녕3", content : "반갑습니다.", date: "2022/01/09"},
{ title: "안녕4", content : "반갑습니다.", date: "2022/01/10"},
];
grid.resetData(data);
}
</script>
</html>전체 소스입니다.
아직 처음이라.. 정확히 탭을 맞춰야하는데.. 시간되는데로 해보겠습니다.
간단하게 설정한 헤더 + 데이터가 나오는 grid이며
다음번에는 grid에 부가기능들에 대하여 알아보겠습니다.
반응형
'개발 > TOAST' 카테고리의 다른 글
| TOAST GRID - 시작 (0) | 2022.01.07 |
|---|---|
| TOAST UI 시작 (0) | 2022.01.07 |
댓글