日期:2014-05-16  浏览次数:20424 次

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>
?

?

?