第二步:写jsp,在此引用两个jquert.js与pony.js 和 两个css(theme.css与admin.css)
注意:用到的js与和css我在代码的尾部会粘贴出来,请读者自行拷贝,要注意引用路径,哦
现在写自己的jsp,代码如下:
<%@ page language="java" imp
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>left</title>
<link href="<%=basePath%>css/tree/admin.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath%>css/tree/theme.css" rel="stylesheet" type="text/css" />
<script src="<%=basePath%>javas
<script src="<%=basePath%>javas
<script type="text/javas
//此处以下为自己写的js代码
$(document).ready( function(){
jQuery.ajax({
type:"post",
channel/channel_tree!channeTree'>url:"<%=basePath%>channel/channel_tree!channeTree", //上面刚写完的方法url
dataType:"json",
global:false,
success: function(rjson){
rootTree(rjson); //回调函数
}
});
});
var root = null;
var allChannel = null;
function rootTree(rjson){
root = rjson.rootTree; //根节点map
allChannel = rjson.allChannel; //总的map集合
$.each(allChannel,function(key,values){
if(key=="1"){
//一级树代码区
$("#_root").append(values.name+"[<span style='color: red'>"+values.name+"</span>]");
}
});
$.each(root,function(key,values){
if(key=="1"){
var i=0;
$(values).each(function(){
//二级树代码区
var bool = judgment_node(this.channelId);
if(bool){ //有下一级目录
$("#t-0-0-").append("<div id='t-0-0-"+i+"'>"
+"<div id='t-0-0-"+i+"-s' on
+"on
+"on
+"<img src='<%=basePath%>images/tree/s.gif' width='15px' />"
+"<img src='<%=basePath%>images/tree/s.gif' width='15px' />"
+"<img id='t-0-0-"+i+"-co'"
+"src='<%=basePath%>images/tree/elbow-minus.gif'"
+"on
+"style='cursor: pointer; display: none;' />"
+"<img id='t-0-0-"+i+"-cc'"
+"src='<%=basePath%>images/tree/elbow-plus.gif'"
+"on
+"style='cursor: pointer;' />"
+"<img id='t-0-0-"+i+"-fo'"
+"src='<%=basePath%>images/tree/folder-open.gif'"
+"style='display: none;' />"
+"<img id='t-0-0-"+i+"-fc' src='<%=basePath%>images/tree/folder.gif' style='' /> "
+"<a href='javas
+"on
+this.name+"[<span style='color: red'>文章</span>]"
+"</a>"
+"</div>"
+"</div>"
);
decTree(this.channelId,"t-0-0-"+i);
}else{ //没有下一级目录
$("#t-0-0-").append("<div id='t-0-0-"+i+"'>"
+"<div id='t-0-0-"+i+"-s' on
+"on
+"on
+"<img src='<%=basePath%>images/tree/s.gif' width='15px' />"
+"<img src='<%=basePath%>images/tree/s.gif' width='15px' />"
+"<img src='<%=basePath%>images/tree/elbow.gif' /><img src='<%=basePath%>images/tree/leaf.gif' /> "
+"<a href='javacript:void(0)' target='rightFrame'>"
+this.name+"[<span style='color:red'>文章</span>]</a>"
+"</div></div>"
);
}
i++;
});
}
});
}
function judgment_node(tree_id){ //判断底层节点是否存在
var bool = false;
$.each(root,function(key,values){
if(parseInt(key) == parseInt(tree_id)){
bool = true;
}
});
return bool;
}
var imgsum="";
imgsum += "<img src='<%=basePath%>images/tree/s.gif' width='15px' />";
imgsum += "<img src='<%=basePath%>images/tree/s.gif' width='15px' />";
function decTree(co
var cod = co
var i=0; var j=0;
$.each(root,function(key,values){
if(key == cod){
$("#"+htmlId).append(
"<div id='"+htmlId+"-' style='display: none;'>"
+"</div>"
);
$(values).each(function(){
//三、四级树代码区
var bool = judgment_node(this.channelId);
var treeID = htmlId+"-"+i;
imgsum += "<img src='<%=basePath%>images/tree/elbow-line.gif' /> ";
if(bool){ //有下一级目录
$("#"+htmlId+"-").append("<div id='"+treeID+"'>"+
"<div id='"+treeID+"-s' on
+"on
+"on
+imgsum
+"<img id='"+treeID+"-co'"
+"src='<%=basePath%>images/tree/elbow-minus.gif' "
+"on
+"style='cursor: pointer; display: none;' />"
+"<img id='"+treeID+"-cc'"
+"src='<%=basePath%>images/tree/elbow-plus.gif' "
+"on
+"style='cursor: pointer;' />"
+"<img id='"+treeID+"-fo'"
+"src='<%=basePath%>images/tree/folder-open.gif' "
+"style='display: none;' />"
+"<img id='"+treeID+"-fc'"
+"src='<%=basePath%>images/tree/folder.gif' style='' />"
+" "
+"<a href='javas
+"on
+this.name+"[<span style='color: red'>文章</span>]</a>"
+"</div></div>"
);
decTree(this.channelId,treeID);
}else{ //无下一级目录
$("#"+htmlId+"-").append("<div id='"+treeID+"'>"+
"<div id='"+treeID+"-s' on
+"on
+"on
+imgsum
+"<img src='<%=basePath%>images/tree/elbow-end.gif' />"
+"<img src='<%=basePath%>images/tree/leaf.gif' /> "
+"<a href='javacript:void(0)' target='rightFrame'>"
+this.name+"[<span style='color:red'>文章</span>]</a>"
+"<div></div>"
);
imgsum = "";
imgsum += "<img src='<%=basePath%>images/tree/s.gif' width='15px' />";
imgsum += "<img src='<%=basePath%>images/tree/s.gif' width='15px' />";
}
i++;
});
}
});
}
</script>
</head>
<body class="lbody">
<div class="lttop">
<a href="javas
<a href="#" target="rightFrame">模型管理</a>
</div>
<hr />
<div id="t" class="pn-tree">
<div id="t-0">
<div id="t-0-s" on
on
<img id="t-0-co" src="<%=basePath%>images/tree/elbow-end-minus.gif"
on
<img id="t-0-cc" src="<%=basePath%>images/tree/elbow-end-plus.gif"
on
<img id="t-0-fo" src="<%=basePath%>images/tree/folder-open.gif" style="" />
<img id="t-0-fc" src="<%=basePath%>images/tree/folder.gif" style="display: none;" />
<a href="javas
</div>
<div id="t-0-" style="">
<div id="t-0-0">
<div id="t-0-0-s" on
on
<img src="<%=basePath%>images/tree/s.gif" width="15px" />
<img id="t-0-0-co" src="<%=basePath%>images/tree/elbow-end-minus.gif"
on
<img id="t-0-0-cc" src="<%=basePath%>images/tree/elbow-end-plus.gif"
on
<img id="t-0-0-fo" src="<%=basePath%>images/tree/folder-open.gif" style="" />
<img id="t-0-0-fc" src="<%=basePath%>images/tree/folder.gif" style="display: none;" />
<a href="javas
on
</div>
<div id="t-0-0-" style=""></div>
</div>
</div>
</div>
</div>
</body>
</html>
********************************************************************************************************************