DHTMLX組件是一個JavaScript 庫，提供了一套完整的Ajax驅動的UI 組件。
使用 dhtmlxSuite 生成企業級 web 應用程序有乾淨的界面、 快速的性能和豐富的用戶體驗。
組件
|
數據展現
|
|
|
導航
|
Menu、Toolbar
|
|
佈局
|
Layout、Window、Tabbar、Accordion
|
|
工具、控件
|
使用步驟
1.使用myeclipse建立web project
2.加入DHX 支持(js、css、img)
3.提供數據源(此例使用XML 格式，在下載包中含有。附件中有下載)
4.在jsp頁面中嵌入DHX代碼 實現其功能
<body>
<div id=”gridbox” style=”width:900px;height:150px;”></div>
<br />
<script>
mygrid = new dhtmlXGridObject(‘gridbox’);
//圖片路徑
mygrid.setImagePath(“<%=path%>/img/”);
//表頭設置用逗號分割每列(#master_checkbox 表示表頭爲checkbox，並支持全選)
mygrid.setHeader(“#master_checkbox,Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication”);
//列寬
mygrid.setInitWidths(“45,57,150,120,80,80,80,80,200″);
//列位置
mygrid.setColAlign(“center,right,left,left,right,center,left,center,center”);
//列類型
mygrid.setColTypes(“ch,dyn,ed,txt,price,ch,coro,ra,ro”);
//列排序方式
mygrid.setColSorting(“na,int,str,str,int,str,str,str,date”);
//皮膚
mygrid.setSkin(“dhx_skyblue”);
mygrid.init();
//數據列拖拽
mygrid.enableColumnMove(true);
//表頭列顯示/隱藏
mygrid.enableHeaderMenu();
//加載數據
mygrid.loadXML(“<%=path%>/common/grid.xml”);
</script>
</body>