在JSP中如何实现树?

Sunboyjava 2004-09-28 01:52:27
树不是属于JAVA中SWING类的吗? 在JSP中如何做啊?  

树是怎么嵌到JSP页面中去的啊? 


...全文
192 点赞 收藏 11
写回复
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
debug148 2004-10-27
混个脸熟!
回复
EQsay 2004-09-29
http://www.jenkov.dk/index.jsp
回复
Sunboyjava 2004-09-29
好吧回去研究去啊......
结帐了....
回复
Sunboyjava 2004-09-28
我不知道怎么把树放能显示在JSP的页面中.....
回复
Sunboyjava 2004-09-28
谢谢各位.及 koma_wind() 代码.... 感谢..

把SWING做的JTree 写在USERBEAN中... 能不能做啊........ 如何实现啊 ..


回复
koma_wind 2004-09-28
------------------------------------------------------页面
传一个一唯数组就可以了!
<%@ page contentType="text/html; charset=GBK" %>
<html>
<%
String[] strTree=null;
int intLength=0;

if(session.getAttribute("strTree")!=null)
{
strTree=(String[])session.getAttribute("strTree");
intLength = strTree.length;
}
%>
<script type="text/javascript" src="tree/tree.js"></script>
<script type="text/javascript">
<!--
var Tree = new Array;
var i=0;
<%int j=0,k=1;%>
// nodeId | parentNodeId | nodeName | nodeUrl
<%
while(k<intLength)
{
%>
Tree[i++] ="<%=strTree[k++]%>";
<%
}
%>
//-->
</script>
<head>
<title>#.tree...</title>
<link rel="stylesheet" href="tree/tree.css" type="text/css">
<style type="text/css">
<!--
body { font-size: 12px; color: #333333; text-decoration: none}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td bgcolor="#dbeaf5" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#87b3d0" height="30"></td>
</tr>
</table>
<table id=tree width=250 border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<script type="text/javascript" class="f">
<!--
<%if (intLength>1)
{
%>
createTree(Tree,null,null,"my tree")
<%
}%>
//-->
</script>
</td>
</tr>
</table>
<br>
<p> </p>
</td>
</tr>
</table>
<p> </p>
</body>
</html>
回复
koma_wind 2004-09-28
-------------------------------------------------------------2.tree.css
body { font-size: 12px; color: #333333; text-decoration: none}
#tree IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px;}
a { font-size: 12px; color: #333333; text-decoration: none}
a:hover { font-size: 12px; color: #FF0000; text-decoration: none}
回复
koma_wind 2004-09-28
给你一棵树
需要3个文件
1.tree.js
2.tree.css
3.left.jsp
代码分比如下:
-----------------------------------------------------------1.tree.js
/**************************************************************************
Copyright (c) 2001 Geir Landr?(drop@destroydrop.com)
JavaScript Tree - www.destroydrop.com/hugi/javascript/tree/
Version 0.96

This script can be used freely as long as all copyright messages are
intact.
**************************************************************************/

// Arrays for nodes and icons
var nodes = new Array();;
var openNodes = new Array();
var icons = new Array(6);

// Loads all icons that are used in the tree
function preloadIcons() {
icons[0] = new Image();
icons[0].src = "../images/plus.gif";
icons[1] = new Image();
icons[1].src = "../images/plusbottom.gif";
icons[2] = new Image();
icons[2].src = "../images/minus.gif";
icons[3] = new Image();
icons[3].src = "../images/minusbottom.gif";
icons[4] = new Image();
icons[4].src = "../images/folder.gif";
icons[5] = new Image();
icons[5].src = "../images/folderopen.gif";
}
// Create the tree
function createTree(arrName, startNode, openNode, rootDesc) {
nodes = arrName;
if (nodes.length > 0) {
preloadIcons();
if (startNode == null) startNode = 0;
if (openNode != 0 || openNode != null) setOpenNodes(openNode);
//设置第一级的目录自动展开
//for (var j=0; j<nodes.length; j++) {
// var nodeValues = nodes[j].split("|");
// setOpenNodes(nodeValues[0]);
//}

if (startNode !=0) {
var nodeValues = nodes[getArrayId(startNode)].split("|");
document.write("<a href=" + nodeValues[3] + " onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\">"+"<img src=\"../images/folderopen.gif\" align=\"absbottom\" alt=\"\" />" + nodeValues[2] + "</a><br />");
} else document.write("<img src=\"../images/base.gif\" align=\"absbottom\" alt=\"\" /><font size=2 color=#333333>"+rootDesc+"</font><br />");

var recursedNodes = new Array();
addNode(startNode, recursedNodes);
}
}
// Returns the position of a node in the array
function getArrayId(node) {
for (i=0; i<nodes.length; i++) {
var nodeValues = nodes[i].split("|");
if (nodeValues[0]==node) return i;
}
}
// Puts in array nodes that will be open
function setOpenNodes(openNode) {
for (i=0; i<nodes.length; i++) {
var nodeValues = nodes[i].split("|");
if (nodeValues[0]==openNode) {
openNodes.push(nodeValues[0]);
setOpenNodes(nodeValues[1]);
}
}
}
// Checks if a node is open
function isNodeOpen(node) {
for (i=0; i<openNodes.length; i++)
if (openNodes[i]==node) return true;
return false;
}
// Checks if a node has any children
function hasChildNode(parentNode) {
for (i=0; i< nodes.length; i++) {
var nodeValues = nodes[i].split("|");
if (nodeValues[1] == parentNode) return true;
}
return false;
}
// Checks if a node is the last sibling
function lastSibling (node, parentNode) {
var lastChild = 0;
for (i=0; i< nodes.length; i++) {
var nodeValues = nodes[i].split("|");
if (nodeValues[1] == parentNode)
lastChild = nodeValues[0];
}
if (lastChild==node) return true;
return false;
}
// Adds a new node in the tree
function addNode(parentNode, recursedNodes) {
for (var i = 0; i < nodes.length; i++) {

var nodeValues = nodes[i].split("|");
if (nodeValues[1] == parentNode) {

var ls = lastSibling(nodeValues[0], nodeValues[1]);
var hcn = hasChildNode(nodeValues[0]);
var ino = isNodeOpen(nodeValues[0]);

// Write out line & empty icons
for (g=0; g<recursedNodes.length; g++) {
if (recursedNodes[g] == 1) document.write("<img src=\"../images/line.gif\" align=\"absbottom\" alt=\"\" />");
else document.write("<img src=\"../images/empty.gif\" align=\"absbottom\" alt=\"\" />");
}

// put in array line & empty icons
if (ls) recursedNodes.push(0);
else recursedNodes.push(1);

// Write out join icons
if (hcn) {
if (ls) {
document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 1);\"><img id=\"join" + nodeValues[0] + "\" src=\"../images/");
if (ino) document.write("minus");
else document.write("plus");
document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
} else {
document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 0);\"><img id=\"join" + nodeValues[0] + "\" src=\"../images/");
if (ino) document.write("minus");
else document.write("plus");
document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
}
} else {
if (ls) document.write("<img src=\"../images/join.gif\" align=\"absbottom\" alt=\"\" />");
else document.write("<img src=\"../images/joinbottom.gif\" align=\"absbottom\" alt=\"\" />");
}

// Start link
if (nodeValues[3]=="#"){
//文件夹链接
document.write("<a href=" + nodeValues[3] + " onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\">");
} //重新登录链接
else if(nodeValues[0]=="1"){
document.write("<a href='" + nodeValues[3] + "' target='rightFrame' onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\">");
}else{
//其它链接
document.write("<a href='" + nodeValues[3] + "' target='rightFrame' onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\">");
}
// Write out folder & page icons
if (hcn) {
document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"../images/folder")
if (ino) document.write("open");
document.write(".gif\" align=\"absbottom\" alt=\"Folder\" />");
} else document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"../images/page.gif\" align=\"absbottom\" alt=\"Page\" />");

// Write out node name
document.write(nodeValues[2]);

// End link
document.write("</a><br />");

// If node has children write out divs and go deeper
if (hcn) {
document.write("<div id=\"div" + nodeValues[0] + "\"");
if (!ino) document.write(" style=\"display: none;\"");
document.write(">");
addNode(nodeValues[0], recursedNodes);
document.write("</div>");
}

// remove last line or empty icon
recursedNodes.pop();
}
}
}
// Opens or closes a node
function oc(node, bottom) {
var theDiv = document.getElementById("div" + node);
var theJoin = document.getElementById("join" + node);
var theIcon = document.getElementById("icon" + node);

if (theDiv.style.display == 'none') {
if (bottom==1) theJoin.src = icons[3].src;
else theJoin.src = icons[2].src;
theIcon.src = icons[5].src;
theDiv.style.display = '';
} else {
if (bottom==1) theJoin.src = icons[1].src;
else theJoin.src = icons[0].src;
theIcon.src = icons[4].src;
theDiv.style.display = 'none';
}
}

if(!Array.prototype.push) {
function array_push() {
for(var i=0;i<arguments.length;i++)
this[this.length]=arguments[i];
return this.length;
}
Array.prototype.push = array_push;
}
if(!Array.prototype.pop) {
function array_pop(){
lastElement = this[this.length-1];
this.length = Math.max(this.length-1,0);
return lastElement;
}
Array.prototype.pop = array_pop;
}
回复
baobao7000 2004-09-28
SORRY,刚才没打完了就发出来了(按错键)
一、JSP中用JAVA SCRIPT比较简单,但效率不太高,功能也不多
二、如果用JAVA APPLET来做,可选用:
1、SWING包中的JTREE控件来实现一棵树,也比较简单,且效率比JS高,功能比JS多。但有一个致命缺点是:现有的IE对用了SWING的APPLET是默认不支持的,需要下载JAVA PLUG-IN插件方能显示;
2、AWT包来实现一棵树,你可根据你的各种需要来定制真正属于你自己的树,并且可以采用很漂亮的JAVA特效来装饰你的树,最大的好处还在于它的开放性:即现有的IE对纯AWT的树是完全支持的,你不用担心你辛苦做出的APPLET却无法显示的问题。它的缺点是:编码复杂(相对来说,一个用SWING做的树可能会有三百多行,用AWT来做可能就动辄几千行),故对程序员要求高,需要有很好的JAVA语法基础,因为比较接近底层的开发嘛!
三、可以采用第三方控件,例如ACTIVEX做一个树的控件,通过XML做接口,将这个控件装入JSP页面中,再根据自己的需要设置参数实例化该控件,进而在JSP中显现该树。这种方法很简单,控件可以从网上下载,实现快;但是最大坏处是:当客户访问该控件时,会弹出一个签名认证安全框让用户确认,虽然不影响程序,但是对苛求且没有多少素质的客户来说,会觉得你的程序有问题(哎。。。)

以上是我的经验,望对你有所帮助。
回复
baobao7000 2004-09-28
jsp中用java script
回复
flyxxxxx 2004-09-28
jsp中要用javascript做
http://community.csdn.net/Expert/topicview.asp?id=3190905
回复
发动态
发帖子
Web 开发
创建于2007-09-28

7.9w+

社区成员

Java Web 开发
申请成为版主
社区公告
暂无公告