DHTMLX
DHTMLX - Tree Grid 활용하기
Dokon Jang
2015. 6. 11. 11:39
반응형
개인적으로 DHTMLX Component에서 Tree Grid가 가장 마음에 듭니다
Tree Grid를 사용하기 위해서는 DHTMLX Suite의 dhtmlxGrid PRO를 구매해야합니다.
1. XML Data
- X ML Data는 계층구조로 구성해야 합니다.
<rows>
<row> <!-- 부모 -->
<cell>...</cell>
<cell>...</cell>
<cell>...</cell>
<row> <!-- 자식 -->
<cell>...</cell>
<cell>...</cell>
<cell>...</cell>
</row>
</row>
</rows>
<?xml version="1.0" encoding="UTF-8"?>
<rows>
<row id="honda" selected="1" call="1" xmlkids="1">
<cell image="folder.gif">Honda</cell>
<cell>Plain text</cell>
<cell>Text</cell>
<cell>1</cell>
<cell>0</cell>
</row>
<row id="bmw">
<cell image="folder.gif">BMW</cell>
<cell>Plain text</cell>
<cell>Text</cell>
<cell>1</cell>
<cell>0</cell>
<row id="bmw1">
<cell image="leaf.gif">325i</cell>
<cell>30,800</cell>
<cell>2.5L</cell>
<cell>1</cell>
<cell>1</cell>
</row>
<row id="bmw2">
<cell image="leaf.gif">M3 Coupe</cell>
<cell>47,100</cell>
<cell>3.2L</cell>
<cell>1</cell>
<cell>1</cell>
</row>
</row>
</rows>※ row의 id 속성은 반드시 유일해야 합니다.
※ 만일 row의 id 속성이 중복되면, 하나만 표시됩니다.
2. HTML + Javascript 소스
- DHTMLX의 Grid Class인 dhtmlXGridObject를 동일하게 사용합니다.
- Tree Grid를 사용하기 위해서는 컬럼 타입에 "tree"를 반드시 지정해주어야 합니다.
ex) setColTypes("tree,ed,txt,ch,ch");
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/dhtmlx/dhtmlx.css"/>
<script src="/dhtmlx/dhtmlx.js"></script>
<script>
function doOnLoad(){
var treegrid = new dhtmlXGridObject("treegridDiv");
treegrid.setImagePath("/Pilot/dhtmlx/imgs/");
// 컬럼 헤드
treegrid.setHeader("Tree,Plain Text,Text,Check 1,Check 2");
// 컬럼 폭
treegrid.setInitWidths("150,100,100,100,100")
// 컬럼 정렬
treegrid.setColAlign("left,left,left,left,center")
// 컬럼 타입
treegrid.setColTypes("tree,ed,txt,ch,ch");
// 컬럼 데이터 타입
treegrid.setColSorting("str,str,str,na,str")
treegrid.init();
treegrid.setSkin("dhx_skyblue");
treegrid.loadXML("treegrid.xml", function(){
alert("로드 완료");
});
}
</script>
<title>Tree Grid</title>
</head>
<body onload="doOnLoad();">
<div id="treegridDiv" style="width:600px;height:400px;margin:20px;border:1px solid #A4BED4"></div>
</body>
</html>
3. 실행 예
반응형