JSP动态树的实现
JSP 实现 动态
2023-06-13 09:14:09 时间
第一步：在开始之前我们需要准备这么一个js文件，代码如下。我姑且将它命名为tree.js。
复制代码代码如下:
functionNode(id,pid,name,url,title,target,icon,iconOpen,open,appendedStr){
this.id=id;
this.pid=pid;
this.name=name;
this.url=url;
this.title=title;
this.target=target;
this.icon=icon;
this.iconOpen=iconOpen;
this.appendedStr=appendedStr;
this._io=open||false;
this._is=false;
this._ls=false;
this._hc=false;
this._ai=0;
this._p;
};
//Treeobject
functiontree(objName,path){
this.path=path;
this.config={
target :null,
folderLinks :true,
useSelection :true,
useCookies :true,
useLines :true,
useIcons :true,
useStatusText :false,
closeSameLevel :false,
inOrder :false
}
this.icon={
root :path+"TreeDemo/images/tree_base.gif",
folder :path+"TreeDemo/images/tree_folder.gif",
folderOpen :path+"TreeDemo/images/tree_folderopen.gif",
node :path+"TreeDemo/images/tree_folder.gif",
empty :path+"TreeDemo/images/tree_empty.gif",
line :path+"TreeDemo/images/tree_line.gif",
join :path+"TreeDemo/images/tree_join.gif",
joinBottom :path+"TreeDemo/images/tree_joinbottom.gif",
plus :path+"TreeDemo/images/tree_plus.gif",
plusBottom :path+"TreeDemo/images/tree_plusbottom.gif",
minus :path+"TreeDemo/images/tree_minus.gif",
minusBottom :path+"TreeDemo/images/tree_minusbottom.gif",
nlPlus :path+"TreeDemo/images/tree_nolines_plus.gif",
nlMinus :path+"TreeDemo/images/tree_nolines_minus.gif"
};
this.obj=objName;
this.aNodes=[];
this.aIndent=[];
this.root=newNode(-1);
this.selectedNode=null;
this.selectedFound=false;
this.completed=false;
};
//Addsanewnodetothenodearray
tree.prototype.add=function(id,pid,name,url,title,target,icon,iconOpen,open,appendedStr){
this.aNodes[this.aNodes.length]=newNode(id,pid,name,url,title,target,icon,iconOpen,open,appendedStr);
};
//Open/closeallnodes
tree.prototype.openAll=function(){
this.oAll(true);
};
tree.prototype.closeAll=function(){
this.oAll(false);
};
//Outputsthetreetothepage
tree.prototype.toString=function(){
varstr="<divclass="tree">\n";
if(document.getElementById){
if(this.config.useCookies)this.selectedNode=this.getSelected();
str+=this.addNode(this.root);
}elsestr+="Browsernotsupported.";
str+="</div>";
if(!this.selectedFound)this.selectedNode=null;
this.completed=true;
returnstr;
};
//Createsthetreestructure
tree.prototype.addNode=function(pNode){
varstr="";
varn=0;
if(this.config.inOrder)n=pNode._ai;
for(n;n<this.aNodes.length;n++){
if(this.aNodes[n].pid==pNode.id){
varcn=this.aNodes[n];
cn._p=pNode;
cn._ai=n;
this.setCS(cn);
if(!cn.target&&this.config.target)cn.target=this.config.target;
if(cn._hc&&!cn._io&&this.config.useCookies)cn._io=this.isOpen(cn.id);
if(!this.config.folderLinks&&cn._hc)cn.url=null;
if(this.config.useSelection&&cn.id==this.selectedNode&&!this.selectedFound){
cn._is=true;
this.selectedNode=n;
this.selectedFound=true;
}
str+=this.node(cn,n);
if(cn._ls)break;
}
}
returnstr;
};
//Createsthenodeicon,urlandtext
tree.prototype.node=function(node,nodeId){
varstr="<divclass="treeNode">"+this.indent(node,nodeId);
if(this.config.useIcons){
if(!node.icon)node.icon=(this.root.id==node.pid)?this.icon.root:((node._hc)?this.icon.folder:this.icon.node);
if(!node.iconOpen)node.iconOpen=(node._hc)?this.icon.folderOpen:this.icon.node;
if(this.root.id==node.pid){
node.icon=this.icon.root;
node.iconOpen=this.icon.root;
}
str+="<imgid="i"+this.obj+nodeId+""src=""+((node._io)?node.iconOpen:node.icon)+""src=""+((node._io)?node.iconOpen:node.icon)+""alt=""/>";
}
if(node.url){
str+="<aid="s"+this.obj+nodeId+""class=""+((this.config.useSelection)?((node._is?"nodeSel":"node")):"node")+""href=""+node.url+""href=""+node.url+""";
if(node.title)str+="title=""+node.title+""";
if(node.target)str+="target=""+node.target+""";
if(this.config.useStatusText)str+="onmouseover="window.status=\""+node.name+"\";returntrue;"onmouseout="window.status=\"\";returntrue;"";
if(this.config.useSelection&&((node._hc&&this.config.folderLinks)||!node._hc))
str+="onclick="javascript:"+this.obj+".s("+nodeId+");"";
str+=">";
}
elseif((!this.config.folderLinks||!node.url)&&node._hc&&node.pid!=this.root.id)
str+="<ahref="javascript:"+this.obj+".o("+nodeId+");"href="javascript:"+this.obj+".o("+nodeId+");"class="node">";
str+=node.name;
if(node.url||((!this.config.folderLinks||!node.url)&&node._hc))str+="</a>";
//[!--begin--]addbywangxrtoappendstr
if(node.appendedStr)str+=node.appendedStr;
//[!--end--]
str+="</div>";
if(node._hc){
str+="<divid="d"+this.obj+nodeId+""class="clip"style="display:"+((this.root.id==node.pid||node._io)?"block":"none")+";"style="display:"+((this.root.id==node.pid||node._io)?"block":"none")+";">";
str+=this.addNode(node);
str+="</div>";
}
this.aIndent.pop();
returnstr;
};
//Addstheemptyandlineicons
tree.prototype.indent=function(node,nodeId){
varstr="";
if(this.root.id!=node.pid){
for(varn=0;n<this.aIndent.length;n++)
str+="<imgsrc=""+((this.aIndent[n]==1&&this.config.useLines)?this.icon.line:this.icon.empty)+""src=""+((this.aIndent[n]==1&&this.config.useLines)?this.icon.line:this.icon.empty)+""alt=""/>";
(node._ls)?this.aIndent.push(0):this.aIndent.push(1);
if(node._hc){
str+="<ahref="javascript:"+this.obj+".o("+nodeId+");"href="javascript:"+this.obj+".o("+nodeId+");"><imgid="j"+this.obj+nodeId+""src="";
if(!this.config.useLines)str+=(node._io)?this.icon.nlMinus:this.icon.nlPlus;
elsestr+=((node._io)?((node._ls&&this.config.useLines)?this.icon.minusBottom:this.icon.minus):((node._ls&&this.config.useLines)?this.icon.plusBottom:this.icon.plus));
str+=""src="";if(!this.config.useLines)str+=(node._io)?this.icon.nlMinus:this.icon.nlPlus;elsestr+=((node._io)?((node._ls&&this.config.useLines)?this.icon.minusBottom:this.icon.minus):((node._ls&&this.config.useLines)?this.icon.plusBottom:this.icon.plus));str+=""alt=""/></a>";
}elsestr+="<imgsrc=""+((this.config.useLines)?((node._ls)?this.icon.joinBottom:this.icon.join):this.icon.empty)+""src=""+((this.config.useLines)?((node._ls)?this.icon.joinBottom:this.icon.join):this.icon.empty)+""alt=""/>";
}
returnstr;
};
//Checksifanodehasanychildrenandifitisthelastsibling
tree.prototype.setCS=function(node){
varlastId;
for(varn=0;n<this.aNodes.length;n++){
if(this.aNodes[n].pid==node.id)node._hc=true;
if(this.aNodes[n].pid==node.pid)lastId=this.aNodes[n].id;
}
if(lastId==node.id)node._ls=true;
};
//Returnstheselectednode
tree.prototype.getSelected=function(){
varsn=this.getCookie("cs"+this.obj);
return(sn)?sn:null;
};
//Highlightstheselectednode
tree.prototype.s=function(id){
if(!this.config.useSelection)return;
varcn=this.aNodes[id];
if(cn._hc&&!this.config.folderLinks)return;
if(this.selectedNode!=id){
if(this.selectedNode||this.selectedNode==0){
eOld=document.getElementById("s"+this.obj+this.selectedNode);
eOld.className="node";
}
eNew=document.getElementById("s"+this.obj+id);
eNew.className="nodeSel";
this.selectedNode=id;
if(this.config.useCookies)this.setCookie("cs"+this.obj,cn.id);
}
};
//ToggleOpenorclose
tree.prototype.o=function(id){
varcn=this.aNodes[id];
this.nodeStatus(!cn._io,id,cn._ls);
cn._io=!cn._io;
if(this.config.closeSameLevel)this.closeLevel(cn);
if(this.config.useCookies)this.updateCookie();
};
//Openorcloseallnodes
tree.prototype.oAll=function(status){
for(varn=0;n<this.aNodes.length;n++){
if(this.aNodes[n]._hc&&this.aNodes[n].pid!=this.root.id){
this.nodeStatus(status,n,this.aNodes[n]._ls)
this.aNodes[n]._io=status;
}
}
if(this.config.useCookies)this.updateCookie();
};
//Opensthetreetoaspecificnode
tree.prototype.openTo=function(nId,bSelect,bFirst){
if(!bFirst){
for(varn=0;n<this.aNodes.length;n++){
if(this.aNodes[n].id==nId){
nId=n;
break;
}
}
}
varcn=this.aNodes[nId];
if(cn.pid==this.root.id||!cn._p)return;
cn._io=true;
cn._is=bSelect;
if(this.completed&&cn._hc)this.nodeStatus(true,cn._ai,cn._ls);
if(this.completed&&bSelect)this.s(cn._ai);
elseif(bSelect)this._sn=cn._ai;
this.openTo(cn._p._ai,false,true);
};
//Closesallnodesonthesamelevelascertainnode
tree.prototype.closeLevel=function(node){
for(varn=0;n<this.aNodes.length;n++){
if(this.aNodes[n].pid==node.pid&&this.aNodes[n].id!=node.id&&this.aNodes[n]._hc){
this.nodeStatus(false,n,this.aNodes[n]._ls);
this.aNodes[n]._io=false;
this.closeAllChildren(this.aNodes[n]);
}
}
}
//Closesallchildrenofanode
tree.prototype.closeAllChildren=function(node){
for(varn=0;n<this.aNodes.length;n++){
if(this.aNodes[n].pid==node.id&&this.aNodes[n]._hc){
if(this.aNodes[n]._io)this.nodeStatus(false,n,this.aNodes[n]._ls);
this.aNodes[n]._io=false;
this.closeAllChildren(this.aNodes[n]);
}
}
}
//Changethestatusofanode(openorclosed)
tree.prototype.nodeStatus=function(status,id,bottom){
eDiv =document.getElementById("d"+this.obj+id);
eJoin =document.getElementById("j"+this.obj+id);
if(this.config.useIcons){
eIcon =document.getElementById("i"+this.obj+id);
eIcon.src=(status)?this.aNodes[id].iconOpen:this.aNodes[id].icon;
}
eJoin.src=(this.config.useLines)?
((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):
((status)?this.icon.nlMinus:this.icon.nlPlus);
eDiv.style.display=(status)?"block":"none";
};
//[Cookie]Clearsacookie
tree.prototype.clearCookie=function(){
varnow=newDate();
varyesterday=newDate(now.getTime()-1000*60*60*24);
this.setCookie("co"+this.obj,"cookieValue",yesterday);
this.setCookie("cs"+this.obj,"cookieValue",yesterday);
};
//[Cookie]Setsvalueinacookie
tree.prototype.setCookie=function(cookieName,cookieValue,expires,path,domain,secure){
document.cookie=
escape(cookieName)+"="+escape(cookieValue)
+(expires?";expires="+expires.toGMTString():"")
+(path?";path="+path:"")
+(domain?";domain="+domain:"")
+(secure?";secure":"");
};
//[Cookie]Getsavaluefromacookie
tree.prototype.getCookie=function(cookieName){
varcookieValue="";
varposName=document.cookie.indexOf(escape(cookieName)+"=");
if(posName!=-1){
varposValue=posName+(escape(cookieName)+"=").length;
varendPos=document.cookie.indexOf(";",posValue);
if(endPos!=-1)cookieValue=unescape(document.cookie.substring(posValue,endPos));
elsecookieValue=unescape(document.cookie.substring(posValue));
}
return(cookieValue);
};
//[Cookie]Returnsidsofopennodesasastring
tree.prototype.updateCookie=function(){
varstr="";
for(varn=0;n<this.aNodes.length;n++){
if(this.aNodes[n]._io&&this.aNodes[n].pid!=this.root.id){
if(str)str+=".";
str+=this.aNodes[n].id;
}
}
this.setCookie("co"+this.obj,str);
};
//[Cookie]Checksifanodeidisinacookie
tree.prototype.isOpen=function(id){
varaOpen=this.getCookie("co"+this.obj).split(".");
for(varn=0;n<aOpen.length;n++)
if(aOpen[n]==id)returntrue;
returnfalse;
};
//IfPushandpopisnotimplementedbythebrowser
if(!Array.prototype.push){
Array.prototype.push=functionarray_push(){
for(vari=0;i<arguments.length;i++)
this[this.length]=arguments[i];
returnthis.length;
}
};
if(!Array.prototype.pop){
Array.prototype.pop=functionarray_pop(){
lastElement=this[this.length-1];
this.length=Math.max(this.length-1,0);
returnlastElement;
}
};
由于代码太长，我这里就不给大家拿来细讲了，我们只要会用就OK。就像猪肉我们能吃就OK，不一定非要知道猪养。
第二步：创建数据库，创建数据库的代码如下，我这边使用的是MySQL数据为。
createdatabase`treedemo`;
usetreedemo;
createtabletrees(
tidintprimarykeynotnull,
pidintnotnull,
tnamevarchar(50)notnull,
isleafint
);
select*fromtrees;
insertintotrees(tid,pid,tname)values(0,-1,"组织内容");
insertintotrees(tid,pid,tname)values(1,0,"短信");
insertintotrees(tid,pid,tname)values(2,0,"彩信");
insertintotrees(tid,pid,tname)values(3,0,"新闻");
insertintotrees(tid,pid,tname)values(4,1,"移动生活");
insertintotrees(tid,pid,tname)values(5,1,"单条滚动点播");
insertintotrees(tid,pid,tname)values(6,2,"定制");
insertintotrees(tid,pid,tname)values(7,2,"点播");
insertintotrees(tid,pid,tname)values(8,3,"房产频道");
insertintotrees(tid,pid,tname)values(9,3,"农村频道");
insertintotrees(tid,pid,tname)values(10,3,"数码频道");
insertintotrees(tid,pid,tname)values(11,6,"幽默笑话");
insertintotrees(tid,pid,tname)values(12,7,"铃声");
insertintotrees(tid,pid,tname)values(13,7,"贺卡");
insertintotrees(tid,pid,tname)values(14,7,"动画");
insertintotrees(tid,pid,tname)values(15,13,"贺卡1");
insertintotrees(tid,pid,tname)values(16,13,"贺卡2");
insertintotrees(tid,pid,tname)values(17,13,"贺卡3");
insertintotrees(tid,pid,tname)values(18,13,"贺卡4");
select*fromtrees;
表字段的说明：
（1）tid表示节点的编号；
（2）pid该节点父节点的编号；
（3）tname节点名称；
（4）isleaf表明该节点是否为叶节点，叶节点为1，非叶节点为0。该字段可根据实际情况增删。
第三步：在myeclipse中创建一个WEB工程，命名为“TreeDemo”。在WebRoot文件夹下创建js文件夹、css文件夹、images文件夹分别用来存放.js文件、.css文件和项目中用到的图片文件。
第四步：编写数据库连接类，其中的用户名、密码需要根据你数据库情况进行修改，代码如下。
packagecom.sx.mas.utils;
importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.SQLException;
publicclassDBConn{
privatestaticfinalStringDRIVER="com.mysql.jdbc.Driver";
privatestaticfinalStringURL="jdbc:mysql://localhost:3306/treedemo";
Connectionconn=null;
publicConnectiongetConnection(){
try{
Class.forName(DRIVER);
conn=DriverManager.getConnection(URL,"root","root");
}catch(ClassNotFoundExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}catch(SQLExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
returnconn;
}
}
packagecom.sx.mas.utils;
importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.SQLException;
publicclassDBConn{
privatestaticfinalStringDRIVER="com.mysql.jdbc.Driver";
privatestaticfinalStringURL="jdbc:mysql://localhost:3306/treedemo";
Connectionconn=null;
publicConnectiongetConnection(){
try{
Class.forName(DRIVER);
conn=DriverManager.getConnection(URL,"root","root");
}catch(ClassNotFoundExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}catch(SQLExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
returnconn;
}
}
第五步：编写javabean类，代码如下，
packagecom.sx.mas.beans;
publicclassTreeNode{
privateinttid;
privateintpid;
privateStringtname;
privateintisleaf;
publicintgetTid(){
returntid;
}
publicvoidsetTid(inttid){
this.tid=tid;
}
publicintgetPid(){
returnpid;
}
publicvoidsetPid(intpid){
this.pid=pid;
}
publicStringgetTname(){
returntname;
}
publicvoidsetTname(Stringtname){
this.tname=tname;
}
publicintgetIsleaf(){
returnisleaf;
}
publicvoidsetIsleaf(intisleaf){
this.isleaf=isleaf;
}
}
packagecom.sx.mas.beans;
publicclassTreeNode{
privateinttid;
privateintpid;
privateStringtname;
privateintisleaf;
publicintgetTid(){
returntid;
}
publicvoidsetTid(inttid){
this.tid=tid;
}
publicintgetPid(){
returnpid;
}
publicvoidsetPid(intpid){
this.pid=pid;
}
publicStringgetTname(){
returntname;
}
publicvoidsetTname(Stringtname){
this.tname=tname;
}
publicintgetIsleaf(){
returnisleaf;
}
publicvoidsetIsleaf(intisleaf){
this.isleaf=isleaf;
}
}
第六步：创建相关的DAO类，代码如下。DAO类将数据库表装保存到Vector对象中。
packagecom.sx.mas.beans;
importjava.sql.Connection;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.sql.Statement;
importjava.util.Vector;
importcom.sx.mas.utils.DBConn;
publicclassTreeDAO{
publicVectorgetTree(){
Vectorvec=newVector();
DBConndbconn=newDBConn();
Connectionconn=dbconn.getConnection();
try{
Statementstmt=conn.createStatement();
ResultSetrs=stmt.executeQuery("select*fromtrees");
while(rs.next()){
TreeNodetreenode=newTreeNode();
treenode.setTid(rs.getInt("tid"));
treenode.setPid(rs.getInt("pid"));
treenode.setTname(rs.getString("tname"));
treenode.setIsleaf(rs.getInt("isleaf"));
vec.add(treenode);
}
}catch(SQLExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
returnvec;
}
}
packagecom.sx.mas.beans;
importjava.sql.Connection;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.sql.Statement;
importjava.util.Vector;
importcom.sx.mas.utils.DBConn;
publicclassTreeDAO{
publicVectorgetTree(){
Vectorvec=newVector();
DBConndbconn=newDBConn();
Connectionconn=dbconn.getConnection();
try{
Statementstmt=conn.createStatement();
ResultSetrs=stmt.executeQuery("select*fromtrees");
while(rs.next()){
TreeNodetreenode=newTreeNode();
treenode.setTid(rs.getInt("tid"));
treenode.setPid(rs.getInt("pid"));
treenode.setTname(rs.getString("tname"));
treenode.setIsleaf(rs.getInt("isleaf"));
vec.add(treenode);
}
}catch(SQLExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
returnvec;
}
}
第七步：页面上显示树状结构。在TreeDemo中创建show_tree.jsp页面，代码如下。
<%@pagelanguage="java"import="java.util.*"contentType="text/html;charset=gb2312"%>
<%@pageimport="com.sx.mas.beans.*"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<LINKhref="css/tree.css"href="css/tree.css"type=text/cssrel=stylesheet>
<LINKhref="css/css.css"href="css/css.css"rel=stylesheet>
<SCRIPTsrc="js/tree.js"src="js/tree.js"type=text/javascript></SCRIPT>
<title>MyJSP"index.jsp"startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css"href="styles.css">
-->
</head>
<bodyonresize="returntrue;"leftMargin=1topMargin=1>
<table>
<tr>
<tdvalign="top">
<TABLEclass=table_left_menucellSpacing=0cellPadding=0width="100%"
background=images/tree_bg.gifborder=0>
<TBODY>
<TR>
<TD>
<DIValign=center><IMGheight=24src="images/tree_button.gif"src="images/tree_button.gif"
width=147useMap=#Mapborder=0>
<MAPid=Mapname=Map>
<AREAshape="RECT"shape="RECT"coords="16,3,69,15"coords="16,3,69,15"href="javascript:%20d.openAll()"href="javascript:%20d.openAll()">
<AREAshape="RECT"shape="RECT"coords="72,3,131,15"coords="72,3,131,15"href="javascript:%20d.closeAll()"href="javascript:%20d.closeAll()">
</MAP>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPTtype=text/javascript>
d=newtree("d","../");
<%
TreeDAOtreedao=newTreeDAO();
Vectorvec=treedao.getTree();
Iteratoriterator=vec.iterator();
while(iterator.hasNext()){
TreeNodetreenode=(TreeNode)iterator.next();
if(treenode.getIsleaf()==0){
%>
d.add(<%=treenode.getTid()%>,<%=treenode.getPid()%>,"<%=treenode.getTname()%>")
<%}else{%>
d.add(<%=treenode.getTid()%>,<%=treenode.getPid()%>,"<%=treenode.getTname()%>",parent.getUrlByCatalogId("<%=treenode.getTid()%>"),null,"list");
<%}}%>
document.write(d);
</SCRIPT>
</td>
</tr>
</table>
</body>
</html>
<%@pagelanguage="java"import="java.util.*"contentType="text/html;charset=gb2312"%>
<%@pageimport="com.sx.mas.beans.*"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<LINKhref="css/tree.css"href="css/tree.css"type=text/cssrel=stylesheet>
<LINKhref="css/css.css"href="css/css.css"rel=stylesheet>
<SCRIPTsrc="js/tree.js"src="js/tree.js"type=text/javascript></SCRIPT>
<title>MyJSP"index.jsp"startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css"href="styles.css">
-->
</head>
<bodyonresize="returntrue;"leftMargin=1topMargin=1>
<table>
<tr>
<tdvalign="top">
<TABLEclass=table_left_menucellSpacing=0cellPadding=0width="100%"
background=images/tree_bg.gifborder=0>
<TBODY>
<TR>
<TD>
<DIValign=center><IMGheight=24src="images/tree_button.gif"src="images/tree_button.gif"
width=147useMap=#Mapborder=0>
<MAPid=Mapname=Map>
<AREAshape="RECT"shape="RECT"coords="16,3,69,15"coords="16,3,69,15"href="javascript:%20d.openAll()"href="javascript:%20d.openAll()">
<AREAshape="RECT"shape="RECT"coords="72,3,131,15"coords="72,3,131,15"href="javascript:%20d.closeAll()"href="javascript:%20d.closeAll()">
</MAP>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPTtype=text/javascript>
d=newtree("d","../");
<%
TreeDAOtreedao=newTreeDAO();
Vectorvec=treedao.getTree();
Iteratoriterator=vec.iterator();
while(iterator.hasNext()){
TreeNodetreenode=(TreeNode)iterator.next();
if(treenode.getIsleaf()==0){
%>
d.add(<%=treenode.getTid()%>,<%=treenode.getPid()%>,"<%=treenode.getTname()%>")
<%}else{%>
d.add(<%=treenode.getTid()%>,<%=treenode.getPid()%>,"<%=treenode.getTname()%>",parent.getUrlByCatalogId("<%=treenode.getTid()%>"),null,"list");
<%}}%>
document.write(d);
</SCRIPT>
</td>
</tr>
</table>
</body>
</html>
第八步：创建一个框架页面，index.html代码如下，和list_default.htm。
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Frameset//EN">
<!--savedfromurl=(0203)http://211.142.31.211:8050/cms/content/content_frame.jsp?eafplaceholder=1&staffId=11010000&ssessionId=A5704FD79B3367C9FBE67681C048CA6A×tamp=1240457326218&secret=649820873&menuId=10081&labelStyle=DLS-->
<HTML><HEAD><TITLE></TITLE>
<METAhttp-equiv=Content-Typecontent="text/html;charset=gb2312"><LINKhref=""
type=text/cssrel=stylesheet>
<SCRIPTtype=text/javascript>
functiongetUrlByCatalogId(catalogId){
return"TreeDemo/content_add.jsp?catalogId="+catalogId;
}
</SCRIPT>
<METAcontent="MSHTML6.00.2900.3527"name=GENERATOR></HEAD><FRAMESETborder=0
frameSpacing=0rows=*frameBorder=0>
<FRAMESETborder=0frameSpacing=1frameBorder=0cols=200,*>
<FRAMEname=streesrc="show_cat_tree.jsp"src="show_tree.jsp"scrolling=yestarget="list">
<FRAMEname=listsrc="list_default.htm"src="list_default.htm"><NOFRAMES>
<body>
</body>
</NOFRAMES></FRAMESET></FRAMESET></HTML>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Frameset//EN">
<!--savedfromurl=(0203)http://211.142.31.211:8050/cms/content/content_frame.jsp?eafplaceholder=1&staffId=11010000&ssessionId=A5704FD79B3367C9FBE67681C048CA6A×tamp=1240457326218&secret=649820873&menuId=10081&labelStyle=DLS-->
<HTML><HEAD><TITLE></TITLE>
<METAhttp-equiv=Content-Typecontent="text/html;charset=gb2312"><LINKhref=""
type=text/cssrel=stylesheet>
<SCRIPTtype=text/javascript>
functiongetUrlByCatalogId(catalogId){
return"TreeDemo/content_add.jsp?catalogId="+catalogId;
}
</SCRIPT>
<METAcontent="MSHTML6.00.2900.3527"name=GENERATOR></HEAD><FRAMESETborder=0
frameSpacing=0rows=*frameBorder=0>
<FRAMESETborder=0frameSpacing=1frameBorder=0cols=200,*>
<FRAMEname=streesrc="show_cat_tree.jsp"src="show_tree.jsp"scrolling=yestarget="list">
<FRAMEname=listsrc="list_default.htm"src="list_default.htm"><NOFRAMES>
<body>
</body>
</NOFRAMES></FRAMESET></FRAMESET></HTML>
第九步：运行效果
备注：如有需要源码的请直接联系QQ398349538。
相关文章
- jsp显示时间的代码_空调代码大全
- jsp开发环境搭建实验报告_eclipse安卓开发环境搭建
- idea 查看jsp是否被引用_idea 运行JSP后显示源代码是什么情况
- SSM+MySQL+JSP教务管理系统设计与实现（附源码下载地址）
- jsp servlet实现文件上传详解编程语言
- JSP中嵌入Java代码
- 用JSP实现MySQL数据库的注册功能（jsp注册mysql）
- JSP实现图片上传存入MySQL（jsp上传图片mysql）
- 处理使用JSP和MySQL实现图片处理（jspmysql图片）
- 快速搭建JSP项目：MySQL数据库配置（jsp配置mysql）
- Connecting JSP to MySQL: A StepbyStep Guide for Your Web Development Project（jsp连接mysql代码）
- JSP与MySQL实现登录系统（jsp mysql 登陆）
- 数据库JSP实现对Oracle数据库的访问（jsp访问oracle）
- 解决Oracle中JSP的乱码问题（jsp乱码 oracle）
- JSP由浅入深(1)——熟悉JSP服务器
- JSP+ajax实现输入框自动补全功能实例代码
- 使用jsp调用javabean实现超简单网页计算器示例
- JSP中使用JavaScript动态插入删除输入框实现代码
- Java实现JSP在Servelt中连接Oracle数据库的方法