📄 treeview.js
字号:
var treeview = new function() {
this.data = null;//xml文档数据
this.xhr = null;//实例化的xmlhttp
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;//拖动节点id
this.targetid = null;//拖动目标节点id
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+='<img src='+this.icon["close"]+' onClick="treeview.divCtrl();" />';
this.root.innerHTML+='<span style="cursor:hand;height:20px" id='+this.rootid+' name='+this.user+' parentid="" onClick="treeview.jinkpage(treeview.jink)" oncontextmenu="treeview.showDiv();return false">'+this.user+'</span>';
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<nodes.length;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+='<img src='+treeview.icon["close"]+' onClick=treeview.divCtrl() />';
el.innerHTML+='<span style="cursor:hand;height:20px" id='+subid+' name='+subObj.getAttribute("text")+' parentid='+subObj.getAttribute("parentid")+' onClick="treeview.jinkpage()" oncontextmenu="treeview.showDiv();return false">'+subObj.getAttribute("text")+'</span>';
this.root.appendChild(el);
this.showChilds(subObj,el);
}else {
el.innerHTML+='<img src='+treeview.icon["leaf"]+' onClick="treeview.divCtrl()" />';
el.innerHTML+='<span style="cursor:hand;height:20px" id='+subid+' name='+subObj.getAttribute("text")+' parentid='+subObj.getAttribute("parentid")+' onClick="treeview.jinkpage()" oncontextmenu="treeview.showDiv();return false">'+subObj.getAttribute("text")+'</span>';
this.root.appendChild(el);
}
}
}
}
this.showChilds=function(o,ev)
{
var i;
var nodes = o.childNodes;
for(i=0;i<nodes.length;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+='<img src='+treeview.icon["close"]+' onClick=treeview.divCtrl() />';
el.innerHTML+='<span style="cursor:hand;height:20px" id='+subid+' name='+subObj.getAttribute("text")+' parentid='+subObj.getAttribute("parentid")+' onClick="treeview.jinkpage()" oncontextmenu="treeview.showDiv();return false">'+subObj.getAttribute("text")+'</span>';
ev.appendChild(el);
this.showChilds(subObj,el);
}else
{
el.innerHTML+='<img src='+treeview.icon["leaf"]+' onClick="treeview.divCtrl()" />';
el.innerHTML+='<span style="cursor:hand;height:20px" id='+subid+' name='+subObj.getAttribute("text")+' parentid='+subObj.getAttribute("parentid")+' onClick="treeview.jinkpage()" oncontextmenu="treeview.showDiv();return false">'+subObj.getAttribute("text")+'</span>';
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<oEle.length;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<oEle.length;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() //拖动开始时响应此事件，获得拖动节点的id和它的全路径
{
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");
if((parent=="")||(parent==null)) {
var tab = "<table class='right' width='80' height='46' border='0' bgcolor='#F2F2F2'>";
tab+= "<tr style='cursor:hand' onClick=treeview.addElement("+id+",treeview.buildObj())><td>"+makefolder+"</td></tr>";
tab+= "<tr style='cursor:hand' onClick=treeview.rename("+id+")><td>"+renamefolder+"</td></tr>";
tab+= "</table>";
}else {
var tab = "<table class='right' width='80' height='69' border='0' bgcolor='#F2F2F2'>";
tab+= "<tr style='cursor:hand' onClick=treeview.addElement("+id+",treeview.buildObj())><td>"+makefolder+"</td></tr>";
tab+= "<tr style='cursor:hand' onClick=treeview.deleteElement("+id+")><td>"+delfolder+"</td></tr>";
tab+= "<tr style='cursor:hand' onClick=treeview.rename("+id+")><td>"+renamefolder+"</td></tr>";
tab+= "</table>";
}
treeview.rightmenu.innerHTML=tab;
treeview.rightmenu.style.display="block";
}
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='<img src='+treeview.icon["leaf"]+' onClick="treeview.divCtrl()" />';
o.innerHTML+='<span style="cursor:hand;height:20px" id='+id+' name='+result+' parentid=""'+' onClick="treeview.jinkpage()" oncontextmenu="treeview.showDiv();return false">'+result+'</span>';
return o;
}
this.getRandomNumber=function() {//节点的id，这里简单点了，呵呵
var num = Math.round(10000*Math.random());
return num;
}
this.divCtrl=function() //控制div层的隐藏与显示，注意使用display属性，它移除div在页面上所占的物理空间
{
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<oEle.length;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<oEle.length;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<oEle.length;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;
}
}⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -