js Tree(梅花雪)最简单的例子(来字MEIZZ)

地址:http://www.meizz.com/Web/Web.asp

<script language="JavaScript"
  src="http://www.meizz.com/Web/Plugs/MzTreeView10.js"></script>
<base href="http://www.meizz.com/Web/">
<style>
A.MzTreeview
{
  font-size: 9pt;
  padding-left: 3px;
}
</style>
<script language="JavaScript">
  var tree = new MzTreeView("tree");

  tree.icons["property"] = "property.gif";
  tree.icons["css"] = "collection.gif";
  tree.icons["book"]  = "book.gif";
  tree.iconsExpand["book"] = "bookopen.gif"; //展开时对应的图片

  tree.setIconPath("http://www.meizz.com/Icons/TreeView/"); //可用相对路径

  tree.nodes["0_1"] = "text:WEB 编程";
  tree.nodes["1_100"] = "text:代码示例; data:id=100";
  tree.nodes["1_200"] = "text:梅花雪脚本控件集; data:id=200";
  tree.nodes["1_310"] = "text:CSS; icon:css; data:id=310";
  tree.nodes["1_320"] = "text:DHTML; data:id=320";
  tree.nodes["1_300"] = "text:HTML; data:id=300";
  tree.nodes["1_400"] = "text:JavaScript; icon:book; data:id=400";
  tree.nodes["320_322"] = "text:属性; icon: property; data:id=322";
  tree.nodes["320_323"] = "text:方法; data:id=323";
  tree.nodes["320_324"] = "text:事件; icon:event; data:id=324";
  tree.nodes["320_325"] = "text:集合; data:id=325";
  tree.nodes["400_407"] = "text:对象; data:id=407";
  tree.nodes["400_406"] = "text:方法; data:id=406";
  tree.nodes["400_408"] = "text:运算符; data:id=408";
  tree.nodes["400_409"] = "text:属性; data:id=409";
  tree.nodes["407_1140"] = "text:Date; url:Article.asp; data:id=140";
  tree.nodes["406_1127"] = "text:toString; url:Article.asp; data:id=127";
  tree.nodes["408_1239"] = "text:||; url:Article.asp; data:id=239";
  tree.nodes["409_1163"] = "text:E;  url:Article.asp; data:id=163";

  tree.setURL("Catalog.asp");
  tree.setTarget("MzMain");
  document.write(tree.toString());    //亦可用 obj.innerHTML = tree.toString();
</script>

 

MzTreeView 类的一些属性：

属性名	类型	属性的具体说明
MzTreeView.nodes	集合	服务器端给树指定数据源时数据存放的对象，具体存放格式如： MzTreeViewHandle.nodes["parentId_nodeId"] = "text: nodeText; icon: nodeIcon; url: nodeURL; ...";
MzTreeView.url	地址字符串	可读写，树缺省的URL，默认值是 #
MzTreeView.target	目标框架名	可读写，树缺省的链接target，默认值是 _self
MzTreeView.name	字符	只读，树的实例名，同树实例化时作为参数传入(大小写敏感)： var Tree = new MzTreeView("Tree");
MzTreeView.currentNode	树节点	只读，树当前得到焦点的节点对象
MzTreeView.icons	集合	树所使用的所有图标存放
MzTreeView.iconsExpand	集合	树里展开状态的图标存放
MzTreeView.colors	集合	树里使用到的几个颜色存放

使用：
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方法，可自定义执行