dhtmlx 에서 grid 사용하기

1. 페이지에 레이아웃을 설정하기

초기이벤트에 레이아웃 추가하는 자바스크립트

- 필요한 파일

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">

<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

- 레이아웃 오브젝트 생성

var myLayout = new dhtmlXLayoutObject({

            parent: document.body,  // parent container

            pattern: "3T"          // layout pattern

        });

        

myLayout.cells("a").showHeader();

myLayout.cells("a").setText("New Text");

myLayout.setAutoSize("a;b", "c");

        

var GMaps = myLayout.cells("b").attachMap();

2. 분할된 특정 레이아웃에 Grid 배정하기

mygrid = dhxLayout.cells("a").attachGrid();

mygrid.imgURL = "/grid/dhtmlxGrid/codebase/imgs/csh_dhx_skyblue/";

mygrid.setImagePath("/grid/dhtmlxGrid/codebase/imgs/");

//the path to images required by grid         mygrid.setImagePath("./codebase/imgs/");                         mygrid.setHeader("Sales,Book title,Author,Price");//the headers of columns          mygrid.setInitWidths("100,250,150,100");          //the widths of columns          mygrid.setColAlign("right,left,left,left");       //the alignment of columns           mygrid.setColTypes("ro,ed,ed,ed");                //the types of columns          mygrid.setColSorting("int,str,str,int");          //the sorting types           mygrid.init();      //finishes initialization and renders the grid on the page

3. Grid에 이벤트 처리하기

mygrid.attachEvent("onRowSelect", doOnRowSelected)