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方法,可自定义执行

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 1 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

masterjames

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值