当前位置: 首页 > 工具软件 > MzTreeView > 使用案例 >

MzTreeView 1.0 开发文档

宗政才俊
2023-12-01
说明
MzTreeView 1.0 是数据一次性加载,客户端节点异步展示的WEB脚本树。MzTreeView 1.0 的理论节点数设计上限为十万节点,在节点数三万的情况下页面打开时间小于 3 秒。无限层次无限节点的数的层级组成方式:id parentId。即每个节点除本身的节点id之外还有它的父层节点id,通过这种方式就可以组合成无限层级的树了。

在 MzTreeView 里都有一个虚的根节点,其ID为0,用户可见的根节点其父节点ID皆为0

MzTreeView 1.0在数据库库表里的字段名称:
字段名字段的具体说明
id节点ID(不可为0,可以是数字或字符)
parentId本节点的父节点ID(若本节点已为根节点,此处填0)
text节点的显示文本(一般不允许为空,不过有一种情况例外,即根节点,若根节点文本为空,这个根节点将不会在页面里显示)
hint节点的说明注解
icon节点的图标,MzTreeView 1.0允许每个节点拥有不同的图标(对应的名字在类里的icons和iconsExpand定义)
data节点挂的数据,格式是 param=value&param=value&... url里?后的那串字符串格式,
url每个节点允许拥有不同的链接,它为空或者为#时,树里这个节点的链接,点击将无反应
target每个节点的链接允许在不同的target里打开,为空时取类里的默认值
method点击该链接时所想触发的脚本语句
特注:每个字段值中不可有冒号: 不可以换行 引号酌情考虑应不与节点字符串的引号相冲突

属性
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集合树里使用到的几个颜色存放

MzTreeView 在客户端的节点所拥有的属性:
属性名属性的具体说明
node.id数字文本,节点的ID
node.parentId数字文本,节点对应的父节点ID
node.text文本,节点的显示文本
node.hint文本,节点的注释说明
node.icon文本,节点对应的图标
node.path文本,节点在树里的绝对路径:0_1_10_34
node.url文本,该节点的 URL
node.target文本,该节点链接的目标框架名
node.data文本,该节点所挂载的数据
node.method文本,该节点的点击对应处理语句
node.parentNode对象,节点的父节点对象
node.childNodes数组,包含节点下所有子节点的数组
node.sourceIndex文本,服务器给予的数据里对象的 parentId_nodeId 的组合字符串
node.hasChild布尔值,指该节点是否有子节点
node.isLoad布尔值,本节点的子节点数据是否已经在客户端初始化
node.isExpand布尔值,节点的展开状态
方法
MzTreeView 类的一些方法:
方法名方法的具体说明
MzTreeView.toString()类的默认初始运行
MzTreeView.buildNode(id)将该节点的所有下级子节点转换成 HTML 并在网页上体现出来
MzTreeView.nodeToHTML(node, AtEnd)将 node 转换成 HTML
MzTreeView.load(id)从数据源里加载当前节点下的所有子节点
MzTreeView.nodeInit(sourceIndex, parentId)节点的信息初始,从数据源到客户端完整节点的转化
MzTreeView.focus(id)聚集到某个节点上
MzTreeView.expand(id[, sureExpand])展开节点(包含下级子节点数据的加载初始化)
MzTreeView.setIconPath(path)给节点图片设置正确的路径
MzTreeView.nodeClick(id)节点链接点击时同时被触发的点击事件处理方法
MzTreeView.upperNode()跳转到当前聚集节点的父级节点
MzTreeView.lowerNode()跳转到当前聚集节点的子级节点
MzTreeView.pervNode()跳转到当前聚集节点的上一节点
MzTreeView.nextNode()跳转到当前聚集节点的下一节点
MzTreeView.expandAll()展开所有的树点,在总节点量大于500时这步操作将会比较耗时

示例
<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>
 类似资料: