dtree通过数据库动态生成树
1.先来介绍一下. dtree 的用法.(我引用了以前我收集的一篇文章.还比较详细,出处不记得啦).文章下面会附带dtree用法的例子.
Dtree目录树的总结
一：函数
1：页面中
tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
参数说明：
id ：节点自身的id
pid ：节点的父节点的id
name ：节点显示在页面上的名称
url ：节点的链接地址
title ：鼠标放在节点上所出现的提示信息
target ：节点链接所打开的目标frame(如框架目标mainFrame,_blank,_self 类)
icon ：节点关闭时的显示图片的路径
iconOpen：节点打开时的显示图片的路径
open ：布尔型，节点是否打开（默认为false）
注：open项：顶级节点一般采用true，即pid是－1的节点
2：dtree.js文件中
约87－113行是一些默认图片的路径，注意要指对。
二：页面中的书写
1：默认值的书写规则（从左至右，依次省略）
即 tree.add(id,pid,name,url);后面5个参数可以省略
2：有间隔时的默认值（如存在第6个参数，但第5个参数想用默认值）
即 tree.add(id,pid,name,url,"",target);必须这样写
3：样式表
（1）：可以将dtree.css中的样式附加到你的应用中的主css中，如a.css
（2）：也可以同时引用dtree.css与a.css两个文件，但前提条件是两个css文件中不能有重复的样式
- <link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" />
- <link href="/jingjindatabase/pub/css/dtree.css" rel="stylesheet" type="text/css" />
4：页面代码书写的位置是：一般写在表格的td之中
说明：这是静态的代码，动态的可用循环加入。其他 tree.add(id,pid,name,url,"","","","",true);
三：css文件的注解
1:dtree.css
- .dtree {//定义目录树节点的字体，字号，颜色
- font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
- font-size: 12px;
- color: #006600;
- white-space: nowrap;
- }
- .dtree img {//定义选用节点图标的样式，位置
- border: 0px;
- vertical-align: middle;
- }
- .dtree a {//
- color: #006600;
- text-decoration: none;
- }
- .dtree a.node, .dtree a.nodeSel {
- white-space: nowrap;
- padding: 0px 0px 0px 0px;
- }
- .dtree a.node:hover, .dtree a.nodeSel:hover {
- color: #006600;
- text-decoration: none;
- }
- .dtree a.nodeSel {
- background-color: #c0d2ec;
- }
- .dtree .clip {
- overflow: hidden;
- }
.dtree {//定义目录树节点的字体，字号，颜色
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006600;
white-space: nowrap;
}
.dtree img {//定义选用节点图标的样式，位置
border: 0px;
vertical-align: middle;
}
.dtree a {//
color: #006600;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 0px 0px 0px 0px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #006600;
text-decoration: none;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}- a = new dTree('a');
- a.config.useStatusText=true;
- a.config.closeSameLevel=true;
- a.config.useCookies=false;
- a.add(0,-1,'Tree example','javascript: void(0);');
- a.add(1, 0,'Node 1','javascript:void(0);');
- a.add(2, 1,'Node 2','javascript:void(0);');
- a.add(3, 1,'Node 3','javascript:void(0);');
- a.add(4, 0,'Node 4','javascript:void(0);');
- a.add(5, 4,'Node 5','javascript:void(0);');
- a.add(6, 4,'Node 6','javascript:void(0);');
- a.add(7, 2,'Node 7','javascript:void(0);');
- a.add(8, 6,'Node 8','javascript:void(0);');
- a.add(9, 1,'Node 9','javascript:void(0);');
- a.add(10, 2,'Node 10','javascript:void(0);');
- a.add(11, 8,'Node 11','javascript:void(0);');
- a.add(12, 2,'Node 12','javascript:void(0);');
- a.add(13, 9,'Node 13','javascript:void(0);');
- a.add(14, 4,'Node 14','javascript:void(0);');
- a.add(15, 2,'Node 15','javascript:void(0);');
- a.add(16, 1,'Node 16','javascript:void(0);');
- a.add(17, 4,'Node 17','javascript:void(0);');
- a.add(18, 6,'Node 18','javascript:void(0);');
- a.add(19, 7,'Node 19','javascript:void(0);');
- document.write(a);
tree2.jsp demo中的一个jsp页面. 静态的生成一棵树. (二级节点)
- <%@ page language="java" pageEncoding="utf-8"%>
- "-//W3C//DTD HTML 4.01 Transitional//EN">
-
树形结构_____普通生成树的方式 - "stylesheet" href="dtree.css" type="text/css">
<%@ page language="java" pageEncoding="utf-8"%>
树形结构_____普通生成树的方式
不罗嗦啦..上面的只是让你大概了解一下.dtree怎么用.
dtree+JQuery动态生成树.思路其实很简单... 首先把树的节点信息存储到数据库,然后在servlet或jsp中获取数据库表中的数据,把这些信息写成在xml文件中.然后界面jsp页面通过JQuery实现对改servlet的请求.并且回调方法中接受xml数据对象.并且遍历xml文件,取得xml文件中的节点的属性或文本数据.再循环的对dtree添加节点.。
1 . 在 MYSQL 中的test数据库中创建表.tree_table.
SQL语句.
- tree_table CREATE TABLE `tree_table` (
- `id` int(11) NOT NULL auto_increment,
- `nodeId` varchar(12) NOT NULL ,
- `parentId` varchar(12) NOT NULL ,
- `hrefAddress` varchar(85) ,
- `nodeName` varchar(20) ,
- PRIMARY KEY (`id`)
- ) ENGINE=InnoDB DEFAULT CHARSET=gbk
2.连接数据库的类.主要是读取表中的数据.
- package com.dao;
- import java.sql.Connection;
- import java.sql.DriverManager;
- import java.sql.PreparedStatement;
- import java.sql.ResultSet;
- import java.sql.SQLException;
- import java.util.ArrayList;
- public class DaoTest {
- Connection con = null;
- public Connection getConnection() {
- Connection conn = null;
- String url = "jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=gbk";
- String user = "root";
- String password = "admin";
- try {
- if (conn == null) {
- Class.forName("com.mysql.jdbc.Driver").newInstance();
- conn = DriverManager.getConnection(url, user, password);
- }
- } catch (Exception e) {
- System.out.println("连接失败");
- return null;
- } finally {
- url = null;
- user = null;
- password = null;
- }
- return conn;
- }
- public ArrayList
getNodeInfo() { - String sql = "select nodeId ,parentId ,hrefAddress ,nodeName from tree_table order by id ";
- PreparedStatement pre = null;
- Connection conn = null;
- conn = getConnection();
- ResultSet rs = null;
- ArrayList
list = new ArrayList(); - try {
- pre = conn.prepareStatement(sql);
- rs =pre.executeQuery();
- while (rs.next()){
- Nodes node = new Nodes();
- node.setHrefAddress(rs.getString("hrefAddress"));
- node.setNodeId(rs.getString("nodeId"));
- node.setParentId(rs.getString("parentId"));
- node.setNodeName(rs.getString("nodeName"));
- list.add(node);
- }
- rs.close();
- pre.close();
- conn.close();
- } catch (SQLException e) {
- e.printStackTrace();
- }finally{
- pre = null;
- conn = null;
- rs = null;
- }
- return list;
- }
- }
package com.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
public class DaoTest {
Connection con = null;
public Connection getConnection() {
Connection conn = null;
String url = "jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=gbk";
String user = "root";
String password = "admin";
try {
if (conn == null) {
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn = DriverManager.getConnection(url, user, password);
}
} catch (Exception e) {
System.out.println("连接失败");
return null;
} finally {
url = null;
user = null;
password = null;
}
return conn;
}
public ArrayList getNodeInfo() {
String sql = "select nodeId ,parentId ,hrefAddress ,nodeName from tree_table order by id ";
PreparedStatement pre = null;
Connection conn = null;
conn = getConnection();
ResultSet rs = null;
ArrayList list = new ArrayList();
try {
pre = conn.prepareStatement(sql);
rs =pre.executeQuery();
while (rs.next()){
Nodes node = new Nodes();
node.setHrefAddress(rs.getString("hrefAddress"));
node.setNodeId(rs.getString("nodeId"));
node.setParentId(rs.getString("parentId"));
node.setNodeName(rs.getString("nodeName"));
list.add(node);
}
rs.close();
pre.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}finally{
pre = null;
conn = null;
rs = null;
}
return list;
}
}
3. 节点。JAVABEAN.类.
- package com.dao;
- public class Nodes {
- private int id;
- private String nodeId;
- private String parentId;
- private String hrefAddress;
- private String nodeName;
- public int getId() {
- return id;
- }
- public void setId(int id) {
- this.id = id;
- }
- public String getNodeId() {
- return nodeId;
- }
- public void setNodeId(String nodeId) {
- this.nodeId = nodeId;
- }
- public String getParentId() {
- return parentId;
- }
- public void setParentId(String parentId) {
- this.parentId = parentId;
- }
- public String getHrefAddress() {
- return hrefAddress;
- }
- public void setHrefAddress(String hrefAddress) {
- this.hrefAddress = hrefAddress;
- }
- public String getNodeName() {
- return nodeName;
- }
- public void setNodeName(String nodeName) {
- this.nodeName = nodeName;
- }
- }
package com.dao;
public class Nodes {
private int id;
private String nodeId;
private String parentId;
private String hrefAddress;
private String nodeName;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getNodeId() {
return nodeId;
}
public void setNodeId(String nodeId) {
this.nodeId = nodeId;
}
public String getParentId() {
return parentId;
}
public void setParentId(String parentId) {
this.parentId = parentId;
}
public String getHrefAddress() {
return hrefAddress;
}
public void setHrefAddress(String hrefAddress) {
this.hrefAddress = hrefAddress;
}
public String getNodeName() {
return nodeName;
}
public void setNodeName(String nodeName) {
this.nodeName = nodeName;
}
}
4.创建一个Serlvet 来生成xml文件.
注意: response.setContentType("text/xml;charset=utf-8");
- package com.handler;
- import java.io.IOException;
- import java.io.PrintWriter;
- import java.util.ArrayList;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import com.dao.DaoTest;
- import com.dao.Nodes;
- public class NodesPrint extends HttpServlet {
- private static final long serialVersionUID = 1L;
- public void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- doPost(request, response);
- }
- public void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- request.setCharacterEncoding("utf-8");
- response.setContentType("text/xml;charset=utf-8");
- PrintWriter out = response.getWriter();
- DaoTest test = new DaoTest();
- ArrayList
list= test.getNodeInfo(); - if(list!=null&&list.size()>0){
- out.println("");
- out.println("
" ); - for(int i=0;i
- Nodes node = list.get(i);
- out.println("
" +node.getNodeName()+""); - }
- out.println("");
- }
- }
- }
package com.handler;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.DaoTest;
import com.dao.Nodes;
public class NodesPrint extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
DaoTest test = new DaoTest();
ArrayList list= test.getNodeInfo();
if(list!=null&&list.size()>0){
out.println("");
out.println("");
for(int i=0;i"+node.getNodeName()+"");
}
out.println(" ");
}
}
}
5. 将dtree.js 和dtree.css，jquery.js, img文件夹.放在WebRoot下面.(工程的根目录)
6. 编写我们的tree.jsp页面.
- <%@ page language="java" pageEncoding="utf-8"%>
- "-//W3C//DTD HTML 4.01 Transitional//EN">
-
树形结构___ajax请求方式 - "stylesheet" href="dtree.css" type="text/css">
<%@ page language="java" pageEncoding="utf-8"%>
树形结构___ajax请求方式