MzTreeView1.0 Web 脚本树

韩晋

2023-12-01

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="展开所有节点" οnclick="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;
}

}

MzTreeView1.0 Web 脚本树

相关阅读

相关文章

相关问答

相关文档