http://dhtmlx.com 包含目錄樹、菜單、工具條等很多js控件，功能十分強大。
現將dhtmlxTree 使用樣例記錄如下(包括目錄樹、上下文菜單)：
1、所需js文件
dhtmlxcommon.js
dhtmlxtree.js
dhtmlxtree_json.js
//菜單控件所需的js
dhtmlxprotobar.js
dhtmlxmenubar.js
dhtmlxmenubar.js
2、sample.html代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="./dhtmlxcommon.js"></script>
<script src="./dhtmlxtree.js"></script>
<script language="JavaScript" src="./extend/dhtmlxtree_json.js"></script>
<script language="JavaScript" src="./dhtmlxprotobar.js"></script>
<script language="JavaScript" src="./dhtmlxmenubar.js"></script>
<script language="JavaScript" src="./dhtmlxmenubar_cp.js"></script>
<link rel="STYLESHEET" type="text/css" href="./dhtmlxtree.css">
<link rel="STYLESHEET" type="text/css" href="./context.css">
<link rel="STYLESHEET" type="text/css" href="./dhtmlxmenu.css">
</head>
<body>
<div id="treeBox" style="width:200;height:200"></div>
<script>
//init menu
aMenu=new dhtmlXContextMenuObject('120',0,"images/");
aMenu.menu.loadXML("./_context.xml");
aMenu.setContextMenuHandler(onMenuClick);
tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
tree.setImagePath("images/");
tree.enableCheckBoxes(true);
tree.enableDragAndDrop(true);
tree.enableContextMenu(aMenu); //link context menu to tree
tree.loadCSV("./data.txt");//for loading from file
function onMenuClick(id,s){ alert("Menu item "+id+" was clicked"+s); }
</script>
</body>
</html>
3、數據文件data.txt
1,0,node 1
2,1,node 1.1
3,2,node 1.1.1
4,0,node 2
bd2f46a212ffae3b011305afd5eb0108,4,node 2.1
6,1,node 1.2
4、菜單文件_context.xml
<?xml version='1.0' ?>
<menu absolutePosition="auto" mode="popup" maxItems="8" globalCss="contextMenu" globalSecondCss="contextMenu" globalTextCss="contextMenuItem">
<MenuItem name="Red" src="./images/red.gif" id="edit_Red"/>
<MenuItem name="Green" src="./images/green.gif" id="edit_Green"/>
<MenuItem name="Blue" src="./images/blue.gif" id="edit_Blue"/>
<MenuItem name="Other
" src="" id="outher" width="120px" panelWidth="120">
<MenuItem name="Yellow" src="./images/yellow.gif" id="edit_Yellow"/>
<MenuItem name="White" src="./images/white.gif" id="edit_White"/>
</MenuItem>
</menu>
注：dhtmlxTree 標準版不支持菜單功能，所以需要對
dhtmlxtree.js做些修改，在腳本的最后面加上如下方法：
dhtmlXTreeObject.prototype.enableContextMenu=function(menu)
{
if(menu) this.cMenu=menu
};
posted on 2008-01-30 15:53
josson 閱讀(8348)
評論(1) 編輯 收藏 所屬分類:
web開發