| « | August 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | | | | | 1 | 2 | | 3 | 4 | 5 | 6 | 7 | 8 | 9 | | 10 | 11 | 12 | 13 | 14 | 15 | 16 | | 17 | 18 | 19 | 20 | 21 | 22 | 23 | | 24 | 25 | 26 | 27 | 28 | 29 | 30 | | 31 | | | | | | | |
|
公告 |
要勇敢面对一切不幸 |
| 联系方式 |
|
MSN:ideation_shang@hotmail.com
MAIL:ideation_shang@126.com
QQ :113017429 |
Blog信息
|
|
blog名称:ideation_shang的blog
日志总数:30
评论数量:149
留言数量:0
访问次数:666892
建立时间:2005年4月21日 |
| |
|
 [网页技术]jsp+javascrip 动态构造树
原创空间, 软件技术
ideation 发表于 2006/3/14 14:40:30 |
|
昨天一个朋友说要构造一棵1W多个节点的树，如果用递规速度非常之慢，于是想到首先显示根节点，当点击每个节点的时候再去查询其子节点，子节点以此类推。肯定显示速度不会受节点深度和数量的影响。代码如下：index.htm//显示树的html文件
<HTML><HEAD><TITLE>动态装载树jsp+script代码</TITLE><style>body,td{font:12px verdana}</style><script language="JavaScript">/** * auth: shangxinglin * create time: 2006年3月14日 12:51:40 */
/** * 创建子节点 */function createNodes(peid,pid){ var tminnerHTML=""; var nodeSplit; var subNodes; var isLeaf=false;//叶子节点标志 var isBottom=false;//末端节点标准 eval("subNodes=getSubNodes_"+pid+"();");
for(var i=0;i<subNodes.length;i++) { nodesplit=subNodes[i].split("|"); isLeaf=(nodesplit[3]=="1"); isBottom=(i==(subNodes.length-1));
tminnerHTML+="<table width=\"100\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"; tminnerHTML+"<tr>"; if(isLeaf) { tminnerHTML+="<td id=\""+nodesplit[0]+"\" isBottom=\""+(isBottom?"true":"false")+"\" onclick=\"leafClick(this)\" width=\"18\" height=\"18\" style=\"cursor:hand\"><img src=images/leafline"+(isBottom?"bottom":"")+".gif></td><td>"+nodesplit[2]+"</td>"; } else { tminnerHTML+="<td id=\""+nodesplit[0]+"\" status=\"plus\" isBottom=\""+(isBottom?"true":"false")+"\" onclick=\"nodeOC(this)\" width=\"18\" height=\"18\" style=\"cursor:hand\"><img src=images/plus"+(isBottom?"bottom":"")+".gif></td><td>"+nodesplit[2]+"</td>"; } tminnerHTML+="</tr>"; if(!isLeaf) { tminnerHTML+="<tr id=\""+nodesplit[0]+"sub\" style=\"display:none\">"; tminnerHTML+="<td "+(isBottom?"":"background=\"images/line.gif\"")+" width=\"18\" height=\"18\"></td><td id=\""+nodesplit[0]+"list\"></td>"; tminnerHTML+="</tr>"; } tminnerHTML+="</table>\n"; } tminnerHTML=tminnerHTML==""?"":tminnerHTML; document.getElementById(peid).innerHTML=tminnerHTML;}/* * 处理节点的打开/关闭事件 */function nodeOC(ocObj){ if(ocObj.status=="plus") { ocObj.status="minus"; ocObj.innerHTML="<img src=images/minus"+(ocObj.isBottom=="true"?"bottom":"")+".gif>"; } else { ocObj.status="plus"; ocObj.innerHTML="<img src=images/plus"+(ocObj.isBottom=="true"?"bottom":"")+".gif>"; } document.getElementById(ocObj.id+"sub").style.display=document.getElementById(ocObj.id+"sub").style.display=="none"?"":"none"; if(document.getElementById(ocObj.id+"list").innerHTML!="") return;//处理缓存 document.getElementById("queryScript").src="query.jsp?peid="+ocObj.id+"list"+"&pid="+ocObj.id;}/* * 处理叶子节点的点击事件 */function leafClick(leafObj){ //}/* * 初始化树根节点 */function initTree(){ document.getElementById("queryScript").src="query.jsp?peid=treeView&pid=0";}
</script>
<script id="queryScript" language="JavaScript" src=""></script><script language="JavaScript">window.onload=initTree;</script></HEAD><BODY><table border="0" cellpadding="0" cellspacing="0"><tr> <td id="treeView"></td></tr></table></BODY></HTML>
query.jsp//用于查询子节点的jsp，可以根据需要改为查询数据库
<%@ page contentType="text/html; charset=GBK" import="java.io.RandomAccessFile,java.io.File,java.util.ArrayList,java.util.HashMap,java.util.Iterator"%><%RandomAccessFile dataFile=new RandomAccessFile(new File(application.getRealPath("./treeData.txt")), "r");ArrayList nodes=new ArrayList();String line=dataFile.readLine();while(line!=null){ line=new String(line.getBytes("ISO_8859_1"),"GBK"); String[] lineItems=line.split("\\t"); HashMap node=new HashMap(); node.put("id",lineItems[0]); node.put("pid",lineItems[1]); node.put("name",lineItems[2]); node.put("isend",lineItems[3]); nodes.add(node); line=dataFile.readLine(); }dataFile.close();
String peid=request.getParameter("peid");String pid=request.getParameter("pid");ArrayList subNodes=new ArrayList();
Iterator nodeIt=nodes.iterator();while(nodeIt.hasNext()){ HashMap tmnode=(HashMap)nodeIt.next(); if(tmnode.get("pid").equals(pid)) { subNodes.add(tmnode); }}%>function getSubNodes_<%=pid%>(){/*定义子节点数组*/var subNodes=new Array();<%for(int i=0;i<subNodes.size();i++){ HashMap tmnode=(HashMap)subNodes.get(i);%>subNodes[<%=i%>]=new String("<%=tmnode.get("id")%>|<%=tmnode.get("pid")%>|<%=tmnode.get("name")%>|<%=tmnode.get("isend")%>");<%}%>return subNodes;}createNodes("<%=peid%>","<%=pid%>");
treeData.txt//存放数据的文本文件
id pid name isend1 0 分类A 02 0 分类B 03 0 分类C 04 0 分类D 05 0 分类E 06 1 分类A1 07 1 分类A2 18 1 分类A3 19 2 分类B1 110 2 分类B2 111 3 分类C1 112 3 分类C2 113 3 分类C3 114 4 分类D1 115 4 分类D2 116 5 分类E1 117 6 分类A11 1
源文件下载 500)this.width=500'>tree.rar |
|
|
回复:jsp+javascrip 动态构造树
原创空间, 软件技术
lshln(游客)发表评论于2008/12/3 17:22:19 |
|
|
回复:jsp+javascrip 动态构造树
原创空间, 软件技术
wpf(游客)发表评论于2006/4/25 20:50:26 |
|
» 1 »
|