浏览 4073 次
|
锁定老帖子 主题：自制栏目树 treeview
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-08-27
我的栏目树的值是存放在数据库里的，所以首先应该有一个JavaBean。
JavaBean：
package org.dave.tree.model;
import java.util.HashSet;
import java.util.Set;
/**
* 栏目树节点
* @author Dave
*/
public class Node {
/**
* 唯一标示符
*/
private String nodeId;
/**
* 节点名称
*/
private String nodeName;
/**
* 节点类型，现在只有2个选择：1.folder/文件夹，2.link/链接
*/
private String nodeType;
/**
* 链接
*/
private String uri;
/**
* 父节点
*/
private Node parentNode;
/**
* 子结点
*/
private Set subNodes = new HashSet(0);
public Node() {
}
public Node(String nodeId) {
this.nodeId = nodeId;
}
public Node(String nodeId, String nodeName, String nodeType, String uri,
Node parentNode, Set subNodes) {
this.nodeId = nodeId;
this.nodeName = nodeName;
this.nodeType = nodeType;
this.uri = uri;
this.parentNode = parentNode;
this.subNodes = subNodes;
}
public Node getParentNode() {
return parentNode;
}
public void setParentNode(Node parentNode) {
this.parentNode = parentNode;
}
public String getNodeId() {
return nodeId;
}
public void setNodeId(String nodeId) {
this.nodeId = nodeId;
}
public String getNodeName() {
return nodeName;
}
public void setNodeName(String nodeName) {
this.nodeName = nodeName;
}
public String getNodeType() {
return nodeType;
}
public void setNodeType(String nodeType) {
this.nodeType = nodeType;
}
public String getUri() {
return uri;
}
public void setUri(String uri) {
this.uri = uri;
}
public Set getSubNodes() {
return subNodes;
}
public void setSubNodes(Set subNodes) {
this.subNodes = subNodes;
}
}
然后就是前台页面了：
<%@ page contentType="text/html; charset=utf-8"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="org.dave.tree.model.Node"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>栏目树</title>
<script type="text/javascript">
<!--
/**
*初始化数据
*/
function loadData() {
var nodes = new Array();
var index = 0;
<%
for(Iterator iter = ((List)request.getAttribute("nodes")).iterator(); iter.hasNext();){
Node node = (Node)iter.next();
%>
nodes[index++] = ["<%=node.getNodeId()%>", "<%=node.getNodeName()%>", "<%=node.getNodeType()%>", "<%=node.getUri()%>", "<%=node.getParentNode().getNodeId()%>"];
<%
}
%>
return nodes;
}
/**
*初始化栏目树
*/
function initTree(){
var nodes = loadData();
initNode(nodes, "", 0);
reviseIcon();
callbackNode();
}
/**
*初始化节点
*@param nodes 所有节点
*@param id 当前节点id
*@param num 位移量
*/
function initNode(nodes, id, num){
var tree = document.getElementById("tree");
for(var index = 0, count = 0; index < nodes.length; index++){
if(nodes[index][4] == id){
count++;
var row = tree.insertRow(tree.rows.length);
var cell = row.insertCell(0);
cell.id = 0 + [index][0];
if(subCount(id, nodes) == count){
cell.innerHTML = initHtml(num, index, nodes, "L");
}else{
cell.innerHTML = initHtml(num, index, nodes, "T");
}
initNode(nodes, nodes[index][0], num + 1);
}
}
}
/**
*初始化节点内的html代码
*@param num 位移量
*@param index 本节点在所有节点里的序号
*@param nodes 所有节点
*@param shape 图标前缀，T or L，自己看看图标就知道有什么不同了。
*/
function initHtml(num, index, nodes, shape){
var html = "";
for(var count = 0; count < num; count++){
html += "<img src='icon/tree/blank.png' align='absMiddle' />";
}
html += isEmpty(nodes[index][0], nodes, shape);
html += "<img src='icon/tree/" + (nodes[index][2] == "folder" ? "open" : "link") + ".png' align='absmiddle' />";
html += initLabel(index, nodes);
return html;
}
/**
*初始化文字
*@param index 本节点在所有节点里的序号
*@param nodes 所有节点
*/
function initLabel(index, nodes){
var label = "<"
if(nodes[index][3] == ""){
label += "span> " + nodes[index][1] + "</span>";
}else{
label += "a target='main' href='" + nodes[index][3] + "'> " + nodes[index][1] + "</a>";
}
return label;
}
/**
*判断本节点是否有子结点，并初始化展开图标
*@param id 当前节点id
*@param nodes 所有节点
*@param shape 图标前缀，T or L，自己看看图标就知道有什么不同了。
*/
function isEmpty(id, nodes, shape){
var img = "<img src='icon/tree/";
var icon = shape;
for(var index = 0; index < nodes.length; index++){
if(id == nodes[index][4]){
icon += "minus";
break;
}
}
img += icon + ".png' align='absMiddle'";
if(icon.indexOf("minus") > -1){
img += " style='cursor: pointer;' onclick='changeStyle(this);'";
}
img += " />";
return img;
}
/**
*计算有多少个子结点
*@param id 当前节点id
*@param nodes 所有节点
*/
function subCount(id, nodes){
var count = 0;
for(var index = 0; index < nodes.length; index++){
if(nodes[index][4] == id){
count++;
}
}
return count;
}
/**
*修正节点前位移的图标
*/
function reviseIcon(){
var rows = document.getElementById("tree").rows;
for(var index = 1; index < rows.length; index++){
var preChildNodes = rows[index - 1].cells[0].childNodes;
var childNodes = rows[index].cells[0].childNodes;
for(var count = 0; count < childNodes.length - 3; count++){
var preImg = preChildNodes[count];
var img = childNodes[count];
if(preImg.src.indexOf("T") > -1 || preImg.src.indexOf("I") > -1){
img.src = "icon/tree/I.png";
}
}
}
}
/**
*点击展开图标时所触发的事件
*@param icon 当前图标
*/
function changeStyle(icon){
changeIcon(icon);
changeDisplay(icon.parentNode.parentNode.rowIndex);
}
/**
*改变文件夹图标
*@param icon 当前图标
*/
function changeIcon(icon){
var folder = icon.parentNode.childNodes(icon.parentNode.childNodes.length - 2);
if(folder.src.indexOf("folder") > -1){
folder.src = "icon/tree/open.png";
}else if(folder.src.indexOf("open") > -1){
folder.src = "icon/tree/folder.png";
}
if(icon.src.indexOf("Tminus") > -1){
icon.src = "icon/tree/Tplus.png";
}else if(icon.src.indexOf("Tplus") > -1){
icon.src = "icon/tree/Tminus.png";
}else if(icon.src.indexOf("Lminus") > -1){
icon.src = "icon/tree/Lplus.png";
}else if(icon.src.indexOf("Lplus") > -1){
icon.src = "icon/tree/Lminus.png";
}
}
/**
*改变文件夹图标成指定图标
*@param icon 当前图标
*@param img 所要变成的图标
*/
function changeImg(icon, img){
var folder = icon.parentNode.childNodes(icon.parentNode.childNodes.length - 2);
if(folder.src.indexOf("link") < 0){
if(img.indexOf("minus") > -1){
folder.src = "icon/tree/open.png";
}else if(img.indexOf("plus") > -1){
folder.src = "icon/tree/folder.png";
}
}
if(icon.src.indexOf("Tminus") > -1 || icon.src.indexOf("Tplus") > -1){
icon.src = "icon/tree/T" + img + ".png";
}else if(icon.src.indexOf("Lminus") > -1 || icon.src.indexOf("Lplus") > -1){
icon.src = "icon/tree/L" + img + ".png";
}
}
/**
*当前行在表格内的序号
*@param rowIndex 行号
*/
function changeDisplay(rowIndex){
var tree = document.getElementById("tree");
var baseCount = subStrNum(tree.rows[rowIndex].cells[0].innerHTML, "IMG");
for(var index = rowIndex + 1; index < tree.rows.length;index++){
var row = tree.rows[index];
var count = subStrNum(row.cells[0].innerHTML, "IMG");
if(count > baseCount){
if(row.style.display == ""){
row.style.display = "none";
changeImg(row.cells[0].childNodes[row.cells[0].childNodes.length - 3], "minus");
}else if(count == baseCount + 1){
row.style.display = "";
changeImg(row.cells[0].childNodes[row.cells[0].childNodes.length - 3], "plus");
}
}else{
break;
}
}
}
/**
*计算一字符串在另一字符串内出现的次数
*@param arg 字符串
*@param subArg 另一字符串
*/
function subStrNum(arg, subArg){
var count = 0
for(; arg.indexOf(subArg) > -1; arg = arg.substr(arg.indexOf(subArg) + subArg.length)){
count++;
}
return count;
}
/**
*当栏目树初始化完成时，收回所有展开的节点
*/
function callbackNode(){
var rows = document.getElementById("tree").rows;
for(var index = rows.length - 1; index >= 0; index--){
rows[index].cells[0].childNodes[rows[index].cells[0].childNodes.length - 3].click();
}
}
//-->
</script>
</head>
<body onload="initTree();"
style="width: 100%; height: 100%; float: left; border: 1px solid #99BEEF; background: #D2E4FC;">
<table id="tree" cellpadding="0" cellspacing="0">
</table>
</body>
</html>
最后，就是几个图标了，我的图标放在webroot/icon/tree 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
