`

MzTreeView

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

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

属性

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时这步操作将会比较耗时

以下为简单示例:

导入1.0的jar包

JSP页面代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" src="tree/mzTreeView1.0/MzTreeView10.js"></script>
</head>
<body>
<input type="button" value="展开所有节点" onclick="testTree.expandAll()" />

<style>
A.MzTreeview {
font-size: 9pt;
padding-left: 3px;
}
</style>
<div id="treeviewarea">
<script language="JavaScript">
var testTree = new MzTreeView("testTree");
testTree.icons["property"] = "tree/mzTreeView1.0/property.gif";
testTree.icons["css"] = "tree/mzTreeView1.0/collection.gif";
testTree.icons["book"] = "tree/mzTreeView1.0/book.gif";
testTree.iconsExpand["book"] = "tree/mzTreeView1.0/bookopen.gif"; //展开时对应的图片
testTree.setIconPath("tree/mzTreeView1.0/"); //可用相对路径
<%
String treeData = (String)request.getAttribute("treeData");
out.print(treeData);
%>
//tree.nodes['0_1'] = "text:检验信息管理; ";
//tree.nodes['1_2'] = "text:外购产品检验组; ";
//tree.nodes['1_3'] = "text:最终产品检验; ";
//tree.nodes['1_4'] = "text:复检情况; ";
//tree.nodes['1_5'] = "text:办公辅助; ";
//tree.nodes['1_6'] = "text:基础信息管理; ";
//tree.nodes['1_7'] = "text:部门意见与建议; ";
//tree.nodes['1_8'] = "text:系统意见与建议; ";


//tree.setURL("Catalog.asp");
//tree.setTarget("MzMain");


//document.write(testTree.toString());
document.getElementById('treeviewarea').innerHTML = testTree.toString();

</script>
</div>
</body>
</html>

后台代码:用JDBC从数据库查数据

package tree;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class MzTreeView10 extends HttpServlet {

public MzTreeView10() {
super();
}

public void destroy() {
super.destroy();
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

this.doPost(request, response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
List<Tree> trees = this.getResultSet();
String treeName = "testTree";// 这个是树的名称要和页面的名称相同

StringBuffer treeBf = new StringBuffer("");

treeBf.append(treeName).append(".nodes[\"0_1\"]=\"text:根节点\";");
System.out.println(trees.size());
for (Tree tree : trees) {
if (tree.getPid() == 0) {
treeBf.append("\n").append(treeName);
treeBf.append(".nodes[\"").append(tree.getPid() + 1);
treeBf.append("_").append(tree.getId() + 1).append("\"]=\"");
String text = tree.getDesc();
if (text != null && text.trim() != "") {
treeBf.append("text:").append(text).append(";");
treeBf.append("method:alert('" + tree.getPid() + "_"
+ tree.getId() + "JS方法')");
}
treeBf.append("\";");
} else {
treeBf.append("\n").append(treeName);
treeBf.append(".nodes[\"").append(tree.getPid() + 1);
treeBf.append("_").append(tree.getId() + 1).append("\"]=\"");
String text = tree.getDesc();
if (text != null && text.trim() != "") {
treeBf.append("text:").append(text).append(";");
treeBf.append("method:alert('" + tree.getPid() + "_"
+ tree.getId() + "JS方法')");
}
treeBf.append("\";");
}

}
System.out.println(treeBf.toString());
request.setAttribute("treeData", treeBf.toString());
request.getRequestDispatcher("/tree10.jsp").forward(request, response);

}

public void init() throws ServletException {
}

public List<Tree> getResultSet() {
Connection conn = null;
PreparedStatement psm = null;
ResultSet rs = null;
String sql = "select * from tree";
List<Tree> trees = new ArrayList<Tree>();
try {
Class.forName("org.gjt.mm.mysql.Driver");
conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/dwr", "root", "");
psm = conn.prepareStatement(sql);
rs = psm.executeQuery();
Tree tree = null;
while (rs.next()) {
tree = new Tree();
tree.setId(rs.getInt("id"));
tree.setDesc(rs.getString("desc"));
tree.setPid(rs.getInt("pid"));
trees.add(tree);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (rs != null) {
rs.close();
}
} catch (SQLException e) {
}
try {
if (psm != null) {
psm.close();
}
} catch (SQLException e) {
}
try {
if (conn != null) {
conn.close();
}
} catch (SQLException e) {
}
}
return trees;
}

}
 
分享到:
评论

相关推荐

    mztreeview

    "mztreeview"是一个专用于创建树形菜单的软件组件,尤其在网页开发中常见,主要用于构建层次结构清晰、交互性强的导航系统。这个组件的名字可能来源于“梅花”(mz)与“tree view”(树视图)的组合,暗示了其设计...

    MzTreeView10 开发文档

    MzTreeView10 开发文档 菜单树开发入门

    MzTreeView10

    【MzTreeView10】是一款经典的Windows控件,主要用于在应用程序中实现树形视图的功能。在Windows编程中,树形视图控件是常见的一种界面元素,它允许用户以层级结构来展示数据,通常用于文件系统浏览、组织结构显示...

    mztreeview树形控件

    "mztreeview树形控件"是一个用于网页的JavaScript组件,专门用于创建和展示树形结构的数据。在网页设计和开发中,树形控件常用于组织和展示层次化的信息,如目录结构、菜单系统或者关系图表。Mztreeview是一个流行的...

    MzTreeView(asp.net调用方法)

    MzTreeView是一款高效且功能丰富的树形控件,最初是为ASP环境设计的。然而,随着Web开发技术的发展,ASP.NET成为了构建动态网站的主流框架。因此,将MzTreeView的功能扩展到ASP.NET环境中变得非常必要。这个更新的...

    自己优化的mztreeview2.0 梅花雪好用强大

    "自己优化的mztreeview2.0 梅花雪好用强大" 这个标题表明这是一个经过个人优化的版本——mztreeview2.0,它被称为“梅花雪”,暗示了该软件可能具有独特的特点或风格,且在功能上有所提升,更加好用和强大。...

    一个好用的js树 梅花雪MzTreeView

    【标题】:“一个好用的js树 梅花雪MzTreeView” 在这个主题中,我们探讨的是“梅花雪MzTreeView”,这是一个基于JavaScript的树形控件,它被设计用于在网页上创建和管理层次结构的数据展示。MzTreeView是由开发者...

    MzTreeView + jQuery 实现地区树型选择.

    `MzTreeView`和`jQuery`结合使用,可以创建出高效、用户友好的地区树型选择器,这种选择器通常用于地理信息的选择或者筛选,比如在注册、地址输入等场景。下面我们将详细探讨这两个工具及其在实现地区树型选择中的...

    javascript特效之树控件MzTreeView

    JavaScript特效之树控件MzTreeView是一个用于网页交互设计中的组件,它允许用户在网页上以树状结构展示数据。这种控件常用于文件管理、菜单导航、组织结构图等场景,因为它能清晰地呈现层次关系。MzTreeView是基于...

    梅花雪MzTreeView1.0

    梅花雪MzTreeView1.0 梅花雪MzTreeView1.0 梅花雪MzTreeView1.0 梅花雪MzTreeView1.0 梅花雪MzTreeView1.0

    MzTreeView10.rar

    【标题】"MzTreeView10.rar" 是一个压缩包文件,其中包含了一个名为 "MzTreeView10" 的资源,这个资源是一个基于JavaScript实现的树形控件,能够展示1024个节点的数据结构。 【描述】描述中提到,这是一个用...

    mztreeview2

    **标题:“mztreeview2”** 在Web开发中,数据的可视化经常需要用到树形结构,以便用户能够清晰地查看和管理层次化的信息。"mztreeview2" 是一个基于JavaScript实现的树视图组件,它提供了高效且优化的算法来构建和...

    MzTreeView2.0

    《MzTreeView2.0:深入解析与应用》 在编程领域,用户界面(UI)的设计与实现至关重要,其中控件的使用是构建交互式应用的基础。MzTreeView2.0,作为一款由梅花雪开发的CSDN树形控件,因其高效、灵活和强大的功能,...

    MzTreeView1.0

    "MzTreeView1.0" 是一个专门用于创建和管理树形结构的JavaScript库,它提供了丰富的功能和良好的用户体验。在Web开发中,树形结构常用于展现层级关系的数据,如目录结构、组织架构或者导航菜单等。这个库的发布旨在...

    mztreeview1.0

    "MzTreeView1.0"是一款专门用于创建和管理树形结构的控件,适用于Windows应用程序开发,尤其是在IT行业的GUI(图形用户界面)设计中。它提供了丰富的功能和灵活性,使得开发者能够轻松地在应用程序中构建出层次清晰...

    MzTreeView1.4版本

    **MzTreeView1.4版本详解** MzTreeView是一款用于Windows应用程序开发的控件,它在1.4版本中引入了显著的改进和新特性,尤其是对于动态加载子节点的支持。这一版本允许开发者以JSON和XML这两种常见的数据格式来动态...

    梅花雪2.0,mztreeview2

    【标题】"梅花雪2.0,mztreeview2"是一个关于CSDN社区中的一个知名开发者,梅花雪,所创建的树形控件——mztreeview2的升级版本。这个控件是为软件开发人员设计的,特别是那些使用C++或相关编程语言进行Windows应用...

    MZTreeView

    `MZTreeView`是一个专门用于Windows桌面应用程序开发的控件,主要功能是实现树形视图的展示。在Windows编程中,`TreeView`控件是非常常见的一种界面元素,它允许用户以层级结构显示数据,通常用于文件系统、组织结构...

Global site tag (gtag.js) - Google Analytics