javascript 树形菜单之dhtmxtree教程详解

1，下载dhmtlxtree : http://www.dhtmlx.com/docs/products/dhtmlxTree/index.shtml

2，解压  然后新建项目:dhmtltree

3，index.jsp 头部引入：

 

<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxtree.css">
<script  src="codebase/dhtmlxcommon.js"></script>
<script  src="codebase/dhtmlxtree.js"></script>    

 

 

这三个文件 所以用到的。

4，body 部分

 

 

<div id="treeboxbox_tree"></div>
   <script language="javascript">
     tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);//参数一是树所在页面组件的id，参数  四是根节点id，可以是任意值或者字符串
     tree.setSkin('dhx_skyblue'); //样式名称，当然，在你的样式文件中对应样式应该存在；蔽日：dhtmlxtree.css中
     tree.setImagePath("codebase/imgs/"); //树显示需要的各种图片文件目录，你可以在这里修改相应图片
     //tree.setOnClickHandler(doOnClick);
    
     tree.enableDragAndDrop(0);   //是否允许拖拽
     tree.enableTreeLines(true);   //是否显示节点间的连线，默认false
    // tree.setDataMode("json");    //设置数据类型；默认是xml，注意：如果使用json加载数据，这里必须设置，否则dhtmlxtree会因为不会解析xml内容而抛出异常
   
     //设置动态加载数据的url；其他数据类型也可，不限定xml，只要设置了该属性，
     //dhtmlxtree就可以在其他未加载数据的节点展开时去指定url读取数据，并提交一些参数，
     //为获取指定数据提供搜索条件如：uid=1262758315073&id=x4&a_dhx_rSeed=1262758315073,这是使用httpwatch抓取的提交请求参数，通常我们只需要id即可；
     tree.setXMLAutoLoading("node.xml");
     tree.loadXML("node.xml");   //首次需要我们手动调用一次，以便加载根节点等基础信息；
   
   </script> 

 

 

5，node.xml

 

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

<tree id="0">

<item id="t_root" text="dhmtlxtree" im0="folderClosed.gif"

im1="folderClosed.gif" im2="folderClosed.gif">

           <userdata name="url">a.jsp</userdata>

           <item id="node1" text="dhmtlxtree1">

                    <userdata name="url">a.jsp</userdata>

                    <item id="node1_1" text="dhmtlxtree11"></item>

                    <item id="node1_2" text="dhmtlxtree22"></item>

           </item>

           <item id="node2" text="dhmtlxtree2">

                    <userdata name="file">a.jsp</userdata>

           </item>

           <item id="node3" text="dhmtlxtree3">

                    <userdata name="url">a.jsp</userdata>

           </item>

           <item id="node4" text="dhmtlxtree4">

                    <userdata name="url">a.jsp</userdata>

           </item>

</item>

</tree>