posts - 68, comments - 19, trackbacks - 0, articles - 1

简单实用的js树形导航封装

Posted on 2011-01-22 09:36 viery 阅读(1555) 评论(0)  编辑  收藏
  ......   
要实现上面的导航树我们不需要做太多的东西就可以完成
首先我们需要从官网上下载 js 文件 http://destroydrop.com/javascripts/tree/
之后新建一个 html 文件 引入下载文件中的 css 样式 和 js 文件 调用方法即可！
<html>
<head>
    <title>js树 ant</title>
    <link rel="StyleSheet" href="dtree.css" type="text/css" />
    <script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<div class="dtree">
    <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
    <script type="text/javascript">
        d = new dTree('d');
        d.add(0,-1,'客户关系管理系统');
        d.add(1,0,'营销管理','example01.html');
            d.add(2,1,'销售机会管理','example01.html');
            d.add(3,1,'客户开发计划','example01.html');
        d.add(4,0,'客户管理','example01.html');
            d.add(5,4,'客户信息管理','example01.html');
            d.add(6,4,'客户流失管理','example01.html');
        d.add(7,0,'服务管理','example01.html');
            d.add(8,7,'服务创建','example01.html');
            d.add(9,7,'服务分配','example01.html');
            d.add(10,7,'服务处理','example01.html');
            d.add(11,7,'服务反馈','example01.html');
            d.add(12,7,'服务归档','example01.html');
        d.add(13,0,'统计报表','example01.html');
            d.add(14,13,'客户贡献分析','example01.html');
            d.add(15,13,'客户构成分析','example01.html');
            d.add(16,13,'客户服务分析','example01.html');
            d.add(17,13,'客户流失分析','example01.html');
          d.add(18,0,'基础数据','example01.html');
            d.add(19,18,'数据字典管理','example01.html');
            d.add(20,18,'查询产品信息','example01.html');
            d.add(21,18,'查询库存','example01.html');
        document.write(d);
    </script>
</div>
</body>
</html>
这样做的好处是我们不需要自己写 js 代码框架已经为我们封装好了！我们只需要调用存在的方法即可！
对于 tree.add(id,pid,name,url,title,target,icon,iconOpen,open); 方法中的参数这里有必要说一下
Parameters
 Name  Type  Description
 id  Number  Unique identity number.
 pid  Number Number refering to the parent node. The value for the root node has to   be -1.
 name  String  Text label for the node.
 url  String  Url for the node.
 title  String  Title for the node.
 target  String  Target for the node.
 icon  String  Image file to use as the icon. Uses default if not specified.
 iconOpen  String  Image file to use as the open icon. Uses default if not specified
 open  Boolean  Is the node open.

Example
mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');

上面是引自 dtree api 中的描述
下面是翻译后的描述：

id ：节点自身的id
pid ：节点的父节点的id
name ：节点显示在页面上的名称
url ：节点的链接地址
title ：鼠标放在节点上所出现的提示信息
target ：节点链接所打开的目标frame（如框架目标mainFrame或是_blank,_self之类）
icon ：节点关闭时的显示图片的路径
iconOpen：节点打开时的显示图片的路径
open ：布尔型，节点是否打开（默认为false）

===========================================================================================
Ok  按照上面的方式我们就可以很快的创建一个树形目录，但是如果管理员想增加一个功能或者移除一个功能的话，那么就需要更改页面中 js 中的代码。能不能将所有的节点信息存放在数据库中，在加载这个 jsp/html 页面的时候读取出数据呢 ？
为此我们需要设计一个数据库和表，建一张 DTree 表，表中有九列没分别为 add  方法中的参数
下面是数据库的脚本 不想自己写了 在网上找了一个
use master
go
if exists (select * from sysdatabases where name = 'tree')
 drop database tree
go
create database tree
go
use tree
go

create table dtree
(
 id int identity(1,1) primary key,     --节点编号
 pid int,                              --父节点
 [name] varchar(20),                   --节点名称
 url varchar(20),                      --连接地址
 title varchar(20),                    --节点描述
 target varchar(20),                   --Target
 icon varchar(20),                     --图标
 iconOpen varchar(20),                 --展开状态下的图标路径
 [open] varchar(20)                    --是否展开
)

insert into  dtree values('-1','Y106班','index.jsp','班级','blank','','','')
insert into  dtree values('1','教师','teacher.jsp','教师','blank','','','')
insert into  dtree values('1','班干部','depater.jsp','班干','blank','','','')
insert into  dtree values('1','组长','lady.jsp','组员','blank','','','')
insert into  dtree values('1','学员','stu.jsp','学员','blank','','','')
insert into  dtree values('1','班主任','leader.jsp','班主任','blank','','','')
insert into  dtree values('1','教员','teacher.jsp','教员','blank','','','')
insert into  dtree values('2','班长','index.jsp','班长','blank','','','')
insert into  dtree values('2','学委','index.jsp','学委','blank','','','')
insert into  dtree values('4','学员1','stu.jsp','学员','blank','','','')
insert into  dtree values('4','学员2','stu.jsp','学员','blank','','','')
insert into  dtree values('4','学员3','stu.jsp','学员','blank','','','')
insert into  dtree values('4','学员4','stu.jsp','学员','blank','','','')
insert into  dtree values('4','学员5','stu.jsp','学员','blank','','','')
insert into  dtree values('4','学员6','stu.jsp','学员','blank','','','')
insert into  dtree values('4','学员7','stu.jsp','学员','blank','','','')
Go
select id,pid,[name],url,title,target,icon,iconOpen,[open] from dtree

编写一个数据库访问类 并返回 DTree 表中的数据
DBManager.java  数据库访问类 并取得 DTree 表中的所有数据
package com.ant.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import com.ant.po.DTree;
public class DBManager {
    private static final String DRIVER="com.microsoft.sqlserver.jdbc.SQLServerDriver";
    private static final String URL="jdbc:sqlserver://localhost:1433;databaseName=tree";
    private static final String SA="sa";
    private static final String PWD="sqlpwd";
        static private Connection conn;
    public DBManager() {
        getConnection();
    }
    //打开连接
    public static void getConnection(){
        try {
            Class.forName(DRIVER);
            conn=DriverManager.getConnection(URL,SA,PWD);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    //关闭连接
    public static void closeConnection(){
        if(conn!=null){
            try {
                if(!conn.isClosed()){
                    conn.close();
                    conn=null;
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
    //执行查询
    public static ResultSet executeQuery(String sql){
        getConnection();
        Statement st;
        try {
            st = conn.createStatement();
            return st.executeQuery(sql);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }
    //得到所有的节点
    public static java.util.List<DTree> getAll(){
        ResultSet rs=executeQuery("select * from dtree");
        DTree d=null;
        java.util.List<DTree> li=new ArrayList<DTree>();
        try {
            while (rs.next()) {
                d=new DTree();
                    d.setId(rs.getInt("id"));
                 d.setPid(rs.getInt("pid"));
                 d.setName(rs.getString("name"));
                 d.setUrl(rs.getString("url"));
                 d.setTitle(rs.getString("title"));
                 d.setTarget(rs.getString("target"));
                 d.setIcon(rs.getString("icon"));
                 d.setIconOpen(rs.getString("iconOpen"));
                 d.setOpen(rs.getString("open"));
                 li.add(d);
            }
            return li;
        } catch (SQLException e) {
            e.printStackTrace();
        }finally{
            closeConnection();
        }
        return li;
    }
}

index.jsp  数据显示页面
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@page import="com.ant.po.DTree"%>
<%@page import="com.ant.dao.DBManager"%>
<script type="text/javascript" src="script/dtree.js"></script>
<link rel="StyleSheet" href="script/dtree.css" type="text/css" />
<title>My JSTree</title>
<%
    DBManager db = new DBManager();
    List<DTree> li = db.getAll();
%>
<script type="text/javascript">
        d = new dTree('d');
        <% for(int i=0;i<li.size();i++){
                 DTree d=(DTree)li.get(i);
        %>
        d.add(<%=d.getId()%>,<%=d.getPid()%>,'<%=d.getName()%>','<%=d.getUrl()%>','<%=d.getTitle()%>');
    <%}%>
        document.write(d);
    </script>
    <head>
    </head>
    <body>
    </body>
</html>

运行结果
 

Ok！

到这一步我们只需要在做一个管理菜单项的页面就可以实现动态的菜单，而且页面不要求发生任何改变就可以显示数据库中最新的节点信息！
 
现在有一个问题我们在 jsp  页面通过循环显示出了集合中的值，并将其作为参数传递给 add 方法。能不能我在页面做的再简单点呢？接着封装，我们将实现的步骤封装到业务类中，业务类返回一个 String 之后我们只需要在页面中显示这个 String 就 Ok 了！

首先我们要修改业务类的方法，需要返回一个 String 类型的字符串
DBManager.java  数据库访问类 并取得 DTree 表中的所有数据封装在一个 StringBuffer 中
package com.ant.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.accp.po.DTree;
public class DBManager {
    private static final String DRIVER = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
    private static final String URL = "jdbc:sqlserver://localhost:1433;databaseName=tree";
    private static final String SA = "sa";
    private static final String PWD = "sqlpwd";
    private static Connection conn=null;
    // 打开连接
    public static void getConnection() {
        try {
            Class.forName(DRIVER);
            conn = DriverManager.getConnection(URL, SA, PWD);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    // 关闭连接
    public void closeConnection() {
        if (conn != null) {
            try {
                if (!conn.isClosed()) {
                    conn.close();
                    conn = null;
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
    // 执行在查询
    public static ResultSet executeQuery(String sql) {
        getConnection();
        Statement st;
        try {
            st = conn.createStatement();
            return st.executeQuery(sql);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }
    // 得到所有的节点
    public static String getAll() {
        ResultSet rs = executeQuery("select * from dtree");
        List<DTree> li = new ArrayList<DTree>();
        DTree d = new DTree();
        try {
            //这里可以直接封装到 StringBuffer 中
            while (rs.next()) {
                d = new DTree();
                d.setId(rs.getInt("id"));
                d.setPid(rs.getInt("pid"));
                d.setName(rs.getString("name"));
                d.setUrl(rs.getString("url"));
                d.setTitle(rs.getString("title"));
                d.setTarget(rs.getString("target"));
                d.setIcon(rs.getString("icon"));
                d.setIconOpen(rs.getString("iconOpen"));
                d.setOpen(rs.getString("open"));
                li.add(d);
            }
            StringBuffer contents = new StringBuffer();
            contents.append("d = new dTree('d');");
            for (DTree tn : li) {
                contents.append("\n");
                contents.append("d.add('");
                contents.append(tn.getId());
                contents.append("','");
                contents.append(tn.getPid());
                contents.append("','");
                contents.append(tn.getName());
                contents.append("','");
                contents.append(tn.getUrl());
                contents.append("','");
                contents.append(tn.getTitle());
                contents.append("','");
                contents.append(tn.getTarget());
                contents.append("','");
                contents.append(tn.getIcon());
                contents.append("','");
                contents.append(tn.getIconOpen());
                contents.append("','");
                contents.append(tn.getOpen());
                contents.append("');");
                contents.append("\n");                
            }
            contents.append("document.write(d);");        
            return contents.toString();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }
}
index.jsp  数据显示页面，现在的页面就简洁多了！
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@page import="com.ant.dao.DBManager"%>
<script type="text/javascript" src="script/dtree.js"></script>
<link rel="StyleSheet" href="script/dtree.css" type="text/css" />
<script type="text/javascript">
     <%=DBManager.getAll() %>
</script>

只有注册用户登录后才能发表评论。
网站导航: