본문 바로가기
DHTMLX

DHTMLX - Combo

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

DHTMLX Suite의 Combo를 작업해 보겠습니다.

 

1. DHTMLX Suite의 js와 css를 include합니다.

<link rel="stylesheet" type="text/css" href="/dhtmlx/dhtmlx.css"/>
<script src="/dhtmlx/dhtmlx.js"></script>
 

 

2. XML

  - Server Side에서 XML를 만들어야 합니다.

  - 아래의 XML은 DHTMLX의 Combo에 표시될 데이터입니다.

<?xml version="1.0" encoding="UTF-8"?>
<complete>
    <option value="1">연구소</option>
    <option value="2">생산기술</option>
    <option value="3">생산</option>
    <option value="4">구매</option>
    <option value="5">인사</option>
</complete>
 

 

3. 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 depCombo;

    function doOnLoad(){
        depCombo = new dhtmlXCombo("dep_combo", "department", 100);
        
        depCombo.load("department.xml");
    }
</script>
<title>Combo</title>
</head>
<body onload="doOnLoad();">
    <table>
        <tr>
            <td>부서</td>
            <td><div id="dep_combo"></div></td>
        </tr>
    </table>
</body>
</html>
 

 

4. 실행 결과

  - XML의 데이터가 Combo에 표시됩니다.

 

반응형

댓글