- 浏览: 89389 次
文章分类
最新评论
-
xxbbdmm:
谢谢分享,正是我需要的!
sakai2.7源代码及bigbulebutton安装手册 -
xxbbdmm:
谢谢分享!
sakai2.7源代码及bigbulebutton安装手册 -
streamfly:
window.getActivePage() 是null不太可 ...
实现 RCP 中 VIEW 视图 全窗口 显示 -
ylc2010:
window.getActivePage()这里是null怎么 ...
实现 RCP 中 VIEW 视图 全窗口 显示 -
lovang:
推荐 dhtmlxtree。开源版功能就很不错,一直用。dro ...
ajax + div +js +xml+ servlet 实现无限级动态目录树(原创)
虽然网上这方面的资料很多,但真正能用的几乎没有,而笔者最近在做开发的时候,实在找不到合适的。没办法,只好自己动手,丰衣足食了。。
这棵目录树,不仅实现了无限级动态目录.而且页面上可以通过右键菜单实现树节点的动态添加,删除和重命名.另外还支持节点之间的拖放操作.因为基于ajax技术,所以所有操作都是无刷新的.
缺点:因为时间紧迫,所以开发的时候,代码质量估计不是很高,另外,xml文件是一次性从数据库读取生成的,而不是随着节点的展开而读取数据,所以对于大数据量的访问是不适合的.
(真后悔啊, 花了n多时间,挂掉了n多脑细胞!!)。希望对大家有所帮助!!!
1。数据表结构
nodeid //节点id
nodename//节点名称
parentid//父节点id
childid //子节点id
上面的字段类型都是varchar.根据项目了,设定为了11位
2.xml文件格式
noderoot id="" text="" parentid=""
node id="" text="" parentid=""
xml 文件是从数据库里读取并由servlet动态生成的。除了根节点的 parentid 属性为空外,其他都是有数值的。
因为js是utf-8编码的,所以在servlet里面最好加上下面2句
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/xml;charset=utf-8");
3.ajax.js
- var req = new function()
- {
- this.xhr = null;
- this.xmldata = null;
- this.userid = null;
- this.createInstance = function()
- {
- var instance = null;
- try
- {
- instance = new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch(e)
- {
- try
- {
- instance = new ActiveXObject("Microsoft.XMLHTTP");
- }
- catch(E)
- {
- instance = false;
- }
- }
- if(!instance && typeof XMLHTTPRequest != 'undefined')
- {
- instance = new XMLHTTPRequest();
- if (instance.overrideMimeType)
- {
- instance.overrideMimeType="text/xml";
- }
- }
- return instance;
- }
- this.getxmldata= function()
- {
- this.userid = arguments[0];
- xhr = this.createInstance();
- xhr.onreadystatechange=this.buildxmltree;
- xhr.open("GET","/getdatafromXML?userid="+arguments[0],true);
- xhr.send(null);
- }
- this.buildxmltree = function()
- {
- if(xhr.readyState==4)
- {
- if(xhr.status==200)
- {
- req.xmldata = xhr.responseText;
- var o = new ActiveXObject('Microsoft.XMLDOM');
- o.async = false;
- o.loadXML(req.xmldata);
- req.doXMLMsg(o);
- }
- else
- {
- //deal the error here
- }
- }
- }
- this.doXMLMsg = function(obj)
- {
- treeview.data = obj;
- treeview.xhr = req.xhr;
- treeview.userid = req.userid;
- treeview.init();
- }
- }
4.treeview.js
var treeview = new function() {
this.data = null;
this.xhr = null;
this.userid = null;
this.icon=new Array();
this.icon["leaf"]='/Doc/images/child.gif';
this.icon["open"]='/Doc/images/opened.gif';
this.icon["close"]='/Doc/images/closed.gif';
this.user = null;
this.rootid = null;
this.root = null;
this.dragElement = null;
this.currElement = null;
this.dragid = null;
this.targetid = null;
this.rightmenu = null;
this.dragPath = null;
this.jink = "no";
this.init = function() {
this.user = this.data.getElementsByTagName("noderoot")[0].getAttribute("text");
this.rootid = this.data.getElementsByTagName("noderoot")[0].getAttribute("id");
this.root = document.createElement("div");
this.root.roll = 0;
this.root.style.position="relative";
this.root.style.display="block";
this.root.innerHTML="";
this.root.innerHTML+='';
this.root.innerHTML+=''+this.user+'';
this.root.ondragstart=treeview.dragstart;
this.root.ondragover=treeview.dragover;
this.root.ondrop=treeview.drop;
this.root.ondragend=treeview.dragend;
this.root.onmousedown=treeview.selectText;
document.body.appendChild(this.root);
this.rightmenu = document.createElement("div");
this.rightmenu.id = "menu";
this.rightmenu.style.position="absolute";
this.rightmenu.style.width="30px";
this.rightmenu.style.height="60px";
this.rightmenu.style.display="none";
document.body.appendChild(this.rightmenu);
var obj = this.data.documentElement;
if(obj.hasChildNodes()) {
var i;
var nodes = obj.childNodes;
for(i=0;i # var el = document.createElement("div");
el.innerHTML="";
var subObj = nodes.item(i);
var subid = subObj.getAttribute("id");
el.roll = 0;
el.style.position="relative";
el.style.marginLeft="14px";
el.style.display="none";
if(subObj.hasChildNodes()) {
el.innerHTML+='';
el.innerHTML+=''+subObj.getAttribute("text")+'';
this.root.appendChild(el);
this.showChilds(subObj,el);
}else {
el.innerHTML+='';
el.innerHTML+=''+subObj.getAttribute("text")+'';
this.root.appendChild(el);
}
}
}
}
this.showChilds=function(o,ev)
{
var i;
var nodes = o.childNodes;
for(i=0;i # {
var el = document.createElement("div");
el.innerHTML="";
var subObj = nodes.item(i);
var subid = subObj.getAttribute("id");
el.roll = 0;
el.style.position="relative";
el.style.marginLeft="14px";
el.style.display="none";
if(subObj.hasChildNodes())
{
el.innerHTML+='';
el.innerHTML+=''+subObj.getAttribute("text")+'';
ev.appendChild(el);
this.showChilds(subObj,el);
}else
{
el.innerHTML+='';
el.innerHTML+=''+subObj.getAttribute("text")+'';
ev.appendChild(el);
}
}
}
this.addElement= function(id) {
var obj = document.getElementById(id);
var upObj = obj.parentNode;
var o = arguments[1];
if(o) {
var subObj=o.childNodes.item(1);
subObj.setAttribute("parentid",id);
upObj.appendChild(o);
if(upObj.getAttribute("roll")==0)
{
upObj.childNodes.item(0).setAttribute("src",treeview.icon["open"]);
}
var subid = subObj.getAttribute("id");
xhr.open("GET","/addElement?parentid="+id+"&nodeid="+subObj.getAttribute("id")+"&nodename="+subObj.getAttribute("name")+"&path="+treeview.getfullpath(subObj.getAttribute("id"),""));
xhr.send(null);
return;
}
}
this.deleteElement=function(valueid) {
menu.style.display="none";
var delPath = treeview.getfullpath(valueid,"");
var obj = document.getElementById(valueid);
var parentid = obj.getAttribute("parentid");
var upObj = document.getElementById(parentid);
var oEle = obj.parentNode.getElementsByTagName("div");
if(oEle.length!=0)
{
var i;
for(i=0;i # {
var subObj = oEle.item(i);
if(subObj.parentNode==obj.parentNode)
{
this.deleteChilds(subObj);
obj.parentNode.removeChild(subObj);
}
}
}
upObj.parentNode.removeChild(obj.parentNode);
oEle = upObj.parentNode.getElementsByTagName("DIV");
var bool = upObj.parentNode.childNodes.item(1).getAttribute("parentid");
if(oEle.length==0)
{
if((bool!="")&&(bool!=null)) {
upObj.parentNode.childNodes.item(0).setAttribute("src",treeview.icon["leaf"]);
upObj.parentNode.setAttribute("roll",0);
}
}
xhr.open("GET","/delElement?id="+valueid+"&parentid="+parentid+"&subPath="+delPath);
xhr.send(null);
}
this.deleteChilds=function(o) {
var oEle = o.getElementsByTagName("DIV");
if(oEle.length!=0)
{
var i;
for(i=0;i # {
var subObj = oEle.item(i);
if(subObj.parentNode==o)
{
this.deleteChilds(subObj);
o.removeChild(subObj);
}
}
}
}
this.rename=function(nameid) {
menu.style.display="none";
var path = treeview.getfullpath(nameid,"");
var obj = document.getElementById(nameid);
var result = prompt("please input a new name","");
if(result!=null) {
obj.setAttribute("name",result);
obj.innerText=result;
}
xhr.open("GET","/rename?name="+result+"&nameid="+nameid+"&path="+path+"&upPath="+treeview.getfullpath(obj.getAttribute("parentid"),""));
xhr.send(null);
}
this.selectText=function()
{
var o = window.event.srcElement;
if(o.tagName!="SPAN") {
return;
}
var ra = document.body.createTextRange();
ra.moveToElementText(o);
ra.select();
window.event.cancelBubble = true;
}
this.dragstart=function()
{
var o = window.event.srcElement;
if(o.tagName != "SPAN")
{
return false;
}
this.dragid = o.getAttribute("id");
this.dragPath = treeview.getfullpath(this.dragid,"");
this.dragElement = o.parentNode;
var length = treeview.childNodeNum(this.dragElement.parentNode);
if(length==1)
{
this.dragElement.parentNode.childNodes.item(0).setAttribute("src",treeview.icon["leaf"]);
}
}
this.dragover=function() {
if(!this.dragElement.contains(window.event.srcElement)) {
if(window.event.srcElement.tagName=="DIV")
{
this.currElement = window.event.srcElement;
}
else
{
this.currElement = window.event.srcElement.parentNode;
}
window.event.returnValue = false;
}
}
this.drop=function() {
this.targetid = this.currElement.childNodes.item(1).getAttribute("id");
this.currElement.appendChild(this.dragElement);
this.dragElement.childNodes.item(1).setAttribute("parentid",this.currElement.childNodes.item(1).getAttribute("id"));
}
this.dragend=function() {
var length = treeview.childNodeNum(this.currElement);
if(length!=0)
{
this.currElement.childNodes.item(0).setAttribute("src",treeview.icon["open"]);
this.currElement.setAttribute("roll",0);
}
xhr.open("GET","/dragElement?dragid="+this.dragid+"&targetid="+this.targetid+"&dragPath="+this.dragPath+"&targetPath="+treeview.getfullpath(this.dragid,""));
xhr.send(null);
}
this.showDiv=function() {
var o = window.event.srcElement;
if(o.tagName!="SPAN") {
if(o.tagName=="IMG") {
o = o.parentNode.item(1);
}else {
o = o.item(1);
}
}
var id = o.getAttribute("id");
treeview.rightmenu.style.left=event.clientX;
treeview.rightmenu.style.top=event.clientY;
var parent = o.getAttribute("parentid");
//这里的那段代码总是显示不出来,看源代码吧!
this.getfullpath=function(nodeid,path) {//get the full path of the node
var path = path;
var node = document.getElementById(nodeid);
path = "/"+node.getAttribute("name")+path;
var parentid = node.getAttribute("parentid");
if(parentid!=null&&parentid!="") {
path = this.getfullpath(parentid,path);
}
return path;
}
this.jinkpage=function() {
var jink = arguments[0];
var o = window.event.srcElement;
if(o.tagName=="div") {
o = o.childNodes.item(1);
}else if(o.tagName=="img") {
o = o.parentNode.childNodes.item(1);
}
var id = o.getAttribute("id");
var pathway = treeview.getfullpath(id,"");
if(jink=="no") {
pathway = "abcdef";
}
parent.frames["right"].location.href="/Doc/jsp/showAllFileMsg.jsp?path="+pathway;
}
this.buildObj=function() {
menu.style.display="none";
var o = new Object();
var id = this.userid.toString()+this.getRandomNumber();
var result = prompt("please input a new name","");
if(!result) {
alert("the name can`t be null!!");
result = prompt("please input a new name","");
}
- o = document.createElement("div");
- o.roll = 0;
- o.style.position="relative";
- o.style.marginLeft="10px";
- o.style.padding = "2px";
- o.style.display="block";
- o.innerHTML='"treeview.divCtrl()" />';
- o.innerHTML+='"cursor:hand;height:20px" id='+id+' name='+result+' parentid=""'+' onClick="treeview.jinkpage()" oncontextmenu="treeview.showDiv();return false">'+result+'';
- return o;
this.getRandomNumber=function() {
var num = Math.round(10000*Math.random());
return num;
}
this.divCtrl=function()
{
var o = window.event.srcElement;
var img = o.getAttribute("src");
img = img.substring(img.lastIndexOf("/")+1);
if(img=="child.gif")
{
return;
}
var obj = o.parentNode;
if(obj.getAttribute("roll")==0)
{
var oEle = obj.getElementsByTagName("div");
if(oEle.length!=0)
{
var i;
for(i=0;i {
var subObj = oEle.item(i);
if(subObj.parentNode==obj)
{
subObj.style.display="block";
}
}
}
o.setAttribute("src",treeview.icon["open"]);
obj.setAttribute("roll",1);
}
else if(obj.getAttribute("roll")==1)
{
var oEle = obj.getElementsByTagName("div");
if(oEle.length!=0)
{
var i;
for(i=0;i {
var subObj = oEle.item(i);
if(subObj.parentNode==obj)
{
if(subObj.getAttribute("roll")==1)
{
this.hideDiv(subObj);
}
subObj.style.display="none";
}
}
}
o.setAttribute("src",treeview.icon["close"]);
obj.setAttribute("roll",0);
}
}
this.hideDiv=function(o)
{
var oEle = o.getElementsByTagName("div");
if(oEle.length!=0)
{
var i;
for(i=0;i {
var subObj = oEle.item(i);
if(subObj.parentNode==o)
{
if(subObj.getAttribute("roll")==1)
{
this.hideDiv(subObj);
}
subObj.style.display="none";
}
}
}
o.childNodes.item(0).setAttribute("src",treeview.icon["close"]);
o.setAttribute("roll",0);
}
this.hidemenu=function()
{
menu.style.display="none";
}
this.childNodeNum=function(o)
{
var oEle = o.getElementsByTagName("DIV");
return oEle.length;
}
}
5。showTree.jsp
- <!---->
- "Content-Type" content="text/html; charset=utf-8">
- "stylesheet" type="text/css" href="/Doc/css/panel.css">
- <script type=< span="">"text/javascript" src="/Doc/js/treeview.js" charset="utf-8"></script>
- <script type=< span="">"text/javascript" src="/Doc/js/ajax.js" charset="utf-8"></script>
- <!---->
- "treeview.hidemenu()" class="blue">
- <script language=< span="">"javascript">
- var renamefolder = "重命名文件夹";
- var makefolder = "新建文件夹";
- var delfolder = "删除文件夹";
- req.getxmldata(<%= userid %>);
- </script>
//晕啊,这什么编辑器啊,上传个文件都有bug!!!删除多余的删了n年也没反应!!!
相关推荐
在本教程中,我们将探讨如何利用Ajax、Servlet、Java和JavaScript来实现这一功能。 首先,让我们从Java后端开始。Servlet是Java Web应用程序中的一个关键组件,用于处理HTTP请求和响应。在分页场景中,Servlet主要...
在现代Web应用中,"servlet+ajax实现搜索框智能提示"是一个常见的功能,它能够极大地提升用户体验。这个功能使得用户在输入搜索关键词时,无需完整输入就能得到相关的搜索建议,这种实时反馈的方式大大减少了用户的...
"jQuery + Servlet + Ajax 展示XML树形结构"是一个典型的Web应用程序开发场景,它涉及到前端的交互、后端的数据处理以及异步通信技术。下面将详细解析这个主题中的关键知识点。 首先,**jQuery** 是一个流行的...
根据提供的文件信息,我们可以梳理出以下几个关键的知识点: ### 一、JSP+Ajax 技术结合...以上就是关于 JSP+Ajax 实现 div 自动刷新的主要知识点和技术细节。对于初学者来说,理解这些概念和技术是非常重要的基础。
### Echarts通过Ajax实现动态数据加载 #### 一、引言 在现代Web开发中,数据可视化是一项重要的技能。Echarts作为一款强大的JavaScript图表库,因其丰富的图表类型、灵活的配置选项以及良好的交互性而备受开发者...
AJAX(Asynchronous JavaScript and XML)是一项新兴技术,自2005年左右出现以来便迅速成为Web开发领域的重要组成部分。它允许浏览器通过异步方式与服务器通信,从而在不重新加载整个页面的情况下更新部分网页内容,...
AJAX(异步JavaScript和XML)技术的引入极大地改变了Web应用程序的交互方式。通过AJAX,客户端可以在无需刷新整个页面的情况下,仅更新必要的内容,从而提高用户体验。这主要得益于AJAX的异步特性,它使得用户在等待...
Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验,使得用户在等待响应时不必...
1. **AJAX (Asynchronous JavaScript and XML)**: AJAX 是一种在不重新加载整个网页的情况下,更新部分网页内容的技术。在聊天室中,AJAX 主要负责后台数据的异步传输,使得用户可以发送消息并立即看到其他人的回复...
在IT行业中,Ajax(Asynchronous JavaScript and XML)与Servlet的结合使用是构建高效、交互性强的Web应用程序的关键技术。这个实例“Ajax与servlet免刷新验证”主要展示了如何利用Ajax实现用户输入数据的实时验证,...
在这个基础实例中,我们将探讨如何在Tomcat服务器上使用Servlet和Ajax技术实现一个简单的交互功能。Tomcat是一个流行的开源Java Servlet容器,它允许开发者运行和部署基于Java的Web应用程序。而Ajax(Asynchronous ...