posts - 122,  comments - 25,  trackbacks - 0
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 阅读(8321) 评论(1)  编辑  收藏 所属分类: web开发


FeedBack:
# re: dhtmlxTree 使用示例
2011-12-05 16:12 | tr
rt  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
<2011年12月>
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

常用链接

留言簿(3)

随笔分类

随笔档案

收藏夹

搜索

  •  

最新评论

阅读排行榜

评论排行榜