`

开源菜单树dhtmlxTree

jsonCSSEXTXMLJavaScript 
阅读更多

1.       搭建环境：

在jsp或者html页面中引用的文件：

a.       dhtmlxtree.css                                 文件url: dhtmlxTree_home\dhtmlxTree\codebase\

b.       dhtmlxtree.js                           文件url: dhtmlxTree_home\dhtmlxTree\codebase\

c.       dhtmlxcommon.js                        文件url: dhtmlxTree_home\dhtmlxTree\codebase\

d.       dhtmlxtree_json.js (支持json所需)         

文件url: dhtmlxTree_home\dhtmlxTree\codebase\ext\

e.       所需的资源：images文件夹

 

注意：在项目中使用可以直接将codebase文件夹拷贝到webRoot下面。

 

2.       XMLString格式：

var xmlstr='<item id="t_root"><item id="node5" text="第八中学" >'+

        '<item id="node5_1" text="高一四班" />'+

        '<item id="node5_2" text="高一五班" />'+

        '<item id="node5_3" text="高一六班" />'+

        '<item id="node5_4" text="高一七班" />'+

        '<item id="node5_5" text="高一八班" />'+

        '<item id="node5_6" text="高一九班">'+

            '<item id="node5_6_1" text="九班一组" />'+

            '<item id="node5_6_2" text="九班二组" />'+

        '</item>'+

      '</item></item>';

3.       XML文件格式：

<?xml version="1.0" encoding="UTF-8"?>

<tree id="0">

<item id="t_root" text="益阳市的学校" im0="dhtmlxtree_icon.gif"

im1="dhtmlxtree_icon.gif" im2="dhtmlxtree_icon.gif">

           <userdata name="url">d:/</userdata>

           <item id="node1" text="第九中学">

                    <userdata name="url">360Downloads</userdata>

                    <item id="node1_1" text="高一一班"></item>

                    <item id="node1_2" text="高一二班"></item>

           </item>

           <item id="node2" text="第六中学">

                    <userdata name="url">e:/</userdata>

           </item>

           <item id="node3" text="第十三中学">

                    <userdata name="url">f:/</userdata>

           </item>

           <item id="node4" text="第七中学">

                    <userdata name="url">g:/</userdata>

           </item>

</item>

</tree>

 

test.html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="codebase/dhtmlxtree.css" rel="stylesheet" type="text/css">

<script src="codebase/dhtmlxtree.js"></script>

<script src="codebase/dhtmlxcommon.js"></script>

<script src="codebase/ext/dhtmlxtree_json.js"></script>

</head>

<body>

<div id="treeDIV" style="width:150px; height:300px; border:10 #330099 double" ></div>

<div id="main" >

<iframe id="mainframe" ></iframe>

</div>

<script language="javascript">

var xmlstr='<item id="t_root"><item id="node5" text="第八中学" >'+

        '<item id="node5_1" text="高一四班" />'+

        '<item id="node5_2" text="高一五班" />'+

        '<item id="node5_3" text="高一六班" />'+

        '<item id="node5_4" text="高一七班" />'+

        '<item id="node5_5" text="高一八班" />'+

        '<item id="node5_6" text="高一九班">'+

            '<item id="node5_6_1" text="九班一组" />'+

            '<item id="node5_6_2" text="九班二组" />'+

        '</item>'+

      '</item></item>';

var tree = new dhtmlXTreeObject('treeDIV',"100%","100%",0);

//tree.setSkin('dhx_skyblue');

    tree.setImagePath("codebase/imgs/csh_yellowbooks/");

tree.enableDragAndDrop(0);

tree.enableTreeLines(true);

tree.attachEvent("onOpenEnd",updateTreeSize);

tree.loadXML("node.xml",null);

tree.loadXMLString(xmlstr,null);

//tree.setOnClickHandler(function(id){myClick(id);});

tree.attachEvent("onClick",function(id){myClick(id);});

function updateTreeSize(){

this.allTree.style.overflow = "visible";

this.allTree.style.height = this.allTree.scrollHeight+"px";

}

function myClick(clickId){

openPathExamples(clickId);

}

//去掉空格

String.prototype._dhx_trim = function(){

                     return this.replace(/&nbsp;/g," ").replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g,"");

    }

//打开路径下所有文件函数

function openPathExamples(itemId){

//debugger;

//alert(itemId);

var url = (tree.getUserData(itemId, "url")!=null?tree.getUserData(itemId, "url").toString()._dhx_trim():"");

if (url=="" && !tree.hasChildren(itemId)) {//如果本节点的URL为空，并且没有下一级节点，也就是最后的节点--叶子

url = url+"#"+itemId;

}

alert(url);

var itemIdTmp = itemId;

var i = 0;

do {

itemIdTmp = tree.getParentId(itemId);//得到父级节点url

if (tree.getUserData(itemIdTmp, "url") != null) {

url = tree.getUserData(itemIdTmp, "url").toString()._dhx_trim() + ((url.indexOf("#")!==0)?"/":"") + url;

//如果跟目录从盘符开始就用下面代码：

//url = tree.getUserData(itemIdTmp, "url").toString()._dhx_trim() + url;

}

i++;

} while (itemIdTmp != 0)

alert(url);

window.frames.mainframe.location.href = url;

}

</script>

</body>

</html>

分享到：
| DhtmlxTree控件实现右键菜单的方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    一个很好用的树形菜单

    【dhtmlxtree】是一个流行的开源JavaScript库，专门用于构建基于HTML和JavaScript的树形组件。它支持多种特性，包括节点的展开和折叠、节点的拖放操作、自定义图标、上下文（右键）菜单等。dhtmlxtree的核心优点在于...

    dhtmlxtree

    【dhtmlxtree】是一款强大的JavaScript库，专用于构建交互式的树形结构，常用于实现权限管理和菜单系统。它能够使用户界面更加直观且易于操作，尤其在需要展示层次关系数据时，如组织架构、文件目录等场景下，...

    专业版dhtmlxtree下载

    dhtmlxtree是一款基于JavaScript的开源树形菜单控件，专为Web开发人员设计，用于在网页中构建交互式、可扩展的树状结构。它提供了丰富的功能和自定义选项，使得用户界面更加直观和易于操作。这款专业版dhtmlxtree在...

    dhtmlxTree

    这个控件允许开发者构建可自定义的、功能丰富的树结构，适用于数据的分类和展示，例如导航菜单、文件系统模拟或者组织结构图。 **1. 核心特性** - **动态加载**：dhtmlxTree 支持异步加载，可以按需加载子节点，...

    dhtmlxTree.zip

    结合两者，dhtmlxTree允许开发者在JSP应用中实现用户界面中的动态目录树，提供拖放功能、节点展开/折叠、上下文菜单、以及数据加载等功能。 【标签】"tree" 标签明确了这个压缩包的关键组件是一个树形控件。在Web...

    dhtmlxTree v.3.0

    文件`License_GPL.html`包含了组件的授权信息，说明了DhtmlxTree遵循GPL开源协议。`index.html`可能是示例或演示页面，`readme.txt`提供了快速入门指南。`dhtmlxtree_std_full.zip`包含标准版的完整组件。`...

    dhtmlxTree Standard V1.5

    **dhtmlxTree Standard V1.5** 是一个基于JavaScript的树形菜单控件，它在Web应用程序中用于创建交互式的、可展开的层级结构。这个版本是V1.5，意味着它可能包含了该控件早期开发的一些核心特性和功能。 在**描述**...

    几webjs树形菜单

    7. **jsTree**：`jsTree.v.0.9.6.zip`是jsTree的一个早期版本，jsTree是一个流行的开源JavaScript库，用于创建交互式树形结构。它支持多种数据源，如JSON，XML，HTML等，并且拥有良好的API和插件系统，可以扩展出...

    dhtmlxTree v.2.0 Standard edition

    **dhtmlxTree v.2.0 Standard Edition** 是一款专为构建大规模数据展示的动态树形组件。这款工具在IT行业中广泛应用于构建层级结构的数据视图，如组织架构、文件系统或者导航菜单等。其核心特性在于它能有效地处理...

    dhtmlxtree1.5

    【dhtmlxtree1.5】是一个用于构建交互式树形结构的JavaScript库，它以其强大的功能和灵活性在IT行业中受到广泛关注。这个库允许开发者轻松地在网页上创建可自定义、可操作的树状视图，适用于组织数据、导航菜单、...

    dhtmlxtree_servlet_src

    【标题】"dhtmlxtree_servlet_src" 指的是一款基于Java Servlet技术的开源项目，主要用于构建可交互的树形菜单系统。这个项目的源代码压缩包包含了实现这一功能所需的全部源码，使得开发者可以深入理解其工作原理并...

    Dhtmlx包，包含树，日历，菜单，表格等控件

    这个开源框架包含了丰富的组件，如树形控件、日历、菜单、表格等，帮助开发者构建功能丰富的前端界面，无需深入HTML、CSS和JavaScript的底层细节。这些控件不仅在视觉上吸引人，而且在功能上具有高度灵活性和可定制...

    27款jQuery Tree 树形结构插件

    - 风声JS菜单树基于JavaScript、XHTML和CSS实现，支持无限级别和多种展开模式。 - 开源项目。 10. **Control.Treeview** - 使用Mootools开发，支持Ajax动态获取节点和设置默认选中节点。 - 开源。 11. **...

    javascript树

    `License_GPL.html`则很可能包含了`dhtmlxTree`库的GPL许可证信息，这是一个开源软件许可证，意味着该库遵循GNU General Public License，允许自由使用、修改和分发代码，但要求任何基于此库的修改也必须开源。...

Magicbox
Global site tag (gtag.js) - Google Analytics