반응형
웹프로그래밍을 하다보면 가장 많이 사용하는 것이 Grid입니다.
요즘은 Web Component가 좋아서 활용하면 되지만 예전에는 주로 Table Tag를 사용했었죠.
1. Grid XML(grid.xml)
- XML의 Tag는 <rows> <row> <cell>로 구성되어야합니다.
- row Tag의 id 속성은 반드시 유일해야합니다. 유일하지 않으면 Grid에 중복 데이터를 표시되지 않습니다.,
<?xml version="1.0" encoding="UTF-8"?>
<rows>
<row id="1">
<cell>-1500</cell>
<cell>A Time to Kill</cell>
<cell>John Grisham</cell>
<cell>12.99</cell>
<cell>1</cell>
<cell>24</cell>
<cell>0</cell>
<cell>05/01/1998</cell>
</row>
<row id="2">
<cell>1000</cell>
<cell>Blood and Smoke</cell>
<cell>Stephen King</cell>
<cell>0</cell>
<cell>1</cell>
<cell>24</cell>
<cell>0</cell>
<cell>01/01/2000</cell>
</row>
</rows>
2. HTML + Javascript
<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>
var grid;
function doOnLoad(){
// Grid가 표시될 Html Element의 ID(grid)를 지정하여 Grid Object를 생성한다.
grid = new dhtmlXGridObject("grid");
grid.setImagePath("/dhtmlx/imgs/");
// Grid의 타이틀
grid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");
// Grid의 컬럼 폭
grid.setInitWidths("50,150,120,80,80,80,80,100");
// Grid의 컬럼별 정렬
grid.setColAlign("right,left,left,right,center,left,center,center");
// Grid의 컬럼별 속성(ro : Read Only, ed : Editable, txt : Text, ch : Check Box, co : Combo Box ...)
grid.setColTypes("ro,ed,txt,price,ch,co,ra,ro");
// Grid의 컬럼별 속성 타입(int : 숫자, str : 문자, date : 날짜)
grid.setColSorting("int,str,str,int,str,str,str,date");
grid.init();
// XML 데이터를 로딩하고, 로딩이 완료되면 alert이 표시된다.
grid.load("grid.xml", function(){
alert("로딩 완료");
});
}
</script>
<title>Grid</title>
</head>
<body onload="doOnLoad();">
<div id="grid" style="width:800px; height:500px;"></div>
</body>
</html>
3. 실행 결과
반응형
'DHTMLX' 카테고리의 다른 글
| DHTMLX - Calendar(dhtmlXCalendarObject) 사용하기 (0) | 2015.06.03 |
|---|---|
| DHTMLX - Grid(dhtmlxGridObject) Cell 배경색(Background Color) 변경하기 (0) | 2015.05.19 |
| DHTMLX - 두개의 Combo 연결하기 (0) | 2015.05.03 |
| DHTMLX - Combo (0) | 2015.05.03 |
| DHTMLX - AJAX 활용 (0) | 2015.05.03 |
댓글