MzTreeView 1.0 树形控件
使用：
1.下载控件,MzTreeView10
2.把MzTreeView10整个目录放置在web工程下(图片,js)
3.在后台建一个java类（生成字符串返回给前台）
格式如下：
tree.nodes["408_1239"]=" text:显示文本; data:id=自己的ID;URL=转向的URl method:alert('');";
！注意分号和“”号也都要，自己写方法取得数据库要生存树的表所有记录，然后拼凑，一条记录生成一个这样的节点字符串给JS解析
tree是可以指定的树的名称
408 是数据库的父节点id
1239 是自己的id
text 是显示在页面的节点名称
data 跟URL 配和，当点击转向另外地址是 后面自动带参数id=自己的ID;如url.jsp?id=5;
mehod 点击后触发的js方法，可自定义执行
默认解析根节点为0（数据库要设置）
！
tree表示自定义的树名称，要与页面的var SORTTREE = new MzTreeView("SORTTREE");两个都相同
如上面这个在数据库里就要定义tree为"SORTTREE" 字符串
HTML页面中
Java代码
1. <script type="text/javascript" src="<%=path%>/include/js/MzTreeView10/MzTreeView10.js"></script>
2.
3. <body bgcolor="#FFFFDB" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
4. <SCRIPT LANGUAGE="JavaScript">
5.
6. var SORTTREE = new MzTreeView("SORTTREE");//两个名字都要和数据库命名的树一致
7.
8.
9. SORTTREE.icons["property"] = "<%=path%>/include/js/MzTreeView10/property.gif";
10. SORTTREE.icons["css"] = "<%=path%>/include/js/MzTreeView10/collection.gif";
11. SORTTREE.icons["book"] = "<%=path%>/include/js/MzTreeView10/book.gif";
12. SORTTREE.iconsExpand["book"] = "<%=path%>/include/js/MzTreeView10/bookopen.gif"; //展开时对应的图片
13. SORTTREE.setIconPath("<%=path%>/include/js/MzTreeView10/"); //可用相对路径
14.
15.
16. <%=TreeHandler.getSortTree()%>//在这里返回数据库生成的字符串
17.
18. SORTTREE.setURL("#");
19. SORTTREE.setTarget("MzMain");
20. document.write(SORTTREE.toString()); //亦可用 obj.innerHTML = tree.toString();
21.
22. </SCRIPT>
23. </body>
24.
25. </body>
<script type="text/javascript" src="<%=path%>/include/js/MzTreeView10/MzTreeView10.js"></script>
<body bgcolor="#FFFFDB" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<SCRIPT LANGUAGE="JavaScript">
var SORTTREE = new MzTreeView("SORTTREE");//两个名字都要和数据库命名的树一致
SORTTREE.icons["property"] = "<%=path%>/include/js/MzTreeView10/property.gif";
SORTTREE.icons["css"] = "<%=path%>/include/js/MzTreeView10/collection.gif";
SORTTREE.icons["book"] = "<%=path%>/include/js/MzTreeView10/book.gif";
SORTTREE.iconsExpand["book"] = "<%=path%>/include/js/MzTreeView10/bookopen.gif"; //展开时对应的图片
SORTTREE.setIconPath("<%=path%>/include/js/MzTreeView10/"); //可用相对路径
<%=TreeHandler.getSortTree()%>//在这里返回数据库生成的字符串
SORTTREE.setURL("#");
SORTTREE.setTarget("MzMain");
document.write(SORTTREE.toString()); //亦可用 obj.innerHTML = tree.toString();
</SCRIPT>
</body>
</body>
MzTreeView未定义错误
下下来的是GBK编码，jsp页面本省设的是UTF-8编码,把JS文件转成UTF-8就可以了
利用计事本
例子【转】有点小bug 看得比较明白：
Java代码
1. <head>
2. </head>
3. <body>
4.
5. <script language="JavaScript"
6. src="e:/MzTreeView10/MzTreeView10.js"></script>
7. <style>
8. A.MzTreeview
9. {
10. font-size: 9pt;
11. padding-left: 3px;
12. }
13. </style>
14. <script language="JavaScript">
15. var tree = new MzTreeView("tree");
16.
17. tree.icons["property"] = "property.gif";
18. tree.icons["css"] = "collection.gif";
19. tree.icons["book"] = "book.gif";
20. tree.iconsExpand["book"] = "bookopen.gif"; //展开时对应的图片
21.
22. tree.setIconPath("e://MzTreeView10//"); //可用相对路径
23.
24. tree.nodes["0_1"] = "text:我的根";
25. tree.nodes["1_400"] = "text:JavaScript; icon:book; data:id=400";
26. tree.nodes["400_409"] = "text:属性; data:id=409";
27. tree.nodes["408_1239"] = "text:||; data:id=239; method:alert(alert！');"; //调用html方法：alert
28. tree.nodes["409_1163"] = "text:E; data:id=163; method:myMethod('节点响应:调用自定义函数：myMethod！')"; //调用自定义函数：myMethod
29.
30. var strstree="\""+"text:"+"动态节点500"+"; data:id=500"+"\"";
31.
32. //mytree(tree,strstree);//用方法动态定义“Tree”的子节点。
33. //注：动态定义的方法要与 var tree = new MzTreeView("tree");它在同一个<script language="JavaScript">中！
34.
35. tree.nodes["1_600"]="text:动态生成600; data:id=500";
36. tree.nodes["1_700"]=strstree;
37. document.write(tree.toString()); //亦可用 obj.innerHTML = tree.toString();
38.
39.
40. function mytree(mytreevar,strtext){
41. mytreevar.nodes["1_500"]=strtext;
42. }
43. function myMethod(str){
44. alert(str);
45. }
46. function cc(){
47. cccc.value=strstree;
48. }
49. </script>
50.
51. <input type="text" id="cccc" size=50 value=""/>
52. <input type="button" id="11" value="cc" onClick="cc();"/>
53. </body>
54. </html>