본문 바로가기
DHTMLX

DHTMLX - Grid(dhtmlxGridObject) 활용

by Dokon Jang 2015. 5. 8.
반응형

웹프로그래밍을 하다보면 가장 많이 사용하는 것이 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. 실행 결과

 

반응형

댓글