dhtmlxTree 使用示例

dhtmlxTree 使用示例

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
};