MzTreeView 1.0 树形控件

lion222

浏览: 126865 次
来自: ...

最近访客更多访客>>

yanxing_xinlan

chenjianweijw

zh9100_cn

hanli204016

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (94)

社区版块

存档分类

JavaScript CSS JSP HTML Web

使用：
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>

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