📄 tree.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>tree demo</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.Node
{
}
.Node span
{
font-size:12px;
font-family:Verdana;
cursor:default;
margin-left:3px;
height:17px;
width:1px;
}
.Node span a
{
padding:1 4;
width:100%;
height:100%;
}
.Node-unselect
{
border:0px solid #EAEAEA;
background-color:transparent;
color:windowText;
}
.Node-selected
{
border:1px solid windowText;
background-color:HighLight;
color:HighLightText;
}
.Node-unselect a
{
text-decoration:none;
color:windowtext;
}
.Node-unselect a:hover
{
color:#3366cc;
text-decoration:underline;
}
.Node-selected a
{
color:#FFFFFF;
text-decoration:none;
width:100%;
height:100%;
}
.Node-selected a:hover
{
color:HighLightText;
text-decoration:underline;
}
</style>
</HEAD>
<BODY>
<div id=tree></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
/**
** ==================================================================================================
** ClassName ：treeview
** Intro ：
** Example ：
Ver ： 0.1
---------------------------------------------------------------------------------------------------
<div id="tree"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var tv = new treeview('id','path',true,true,100);
//-->
< /SCRIPT>
---------------------------------------------------------------------------------------------------
** Author ：ttyp
** Email ：ttyp@21cn.com
** Date ：2007-5-31
** ==================================================================================================
**/
function treeview(id,path,check,drag){
var me = this;
var target = null;
this.nodes = new node("root","roottag").nodes;
this.id = id?id:"";
this.icon = true;
this.selected = null;
this.path = path?path:"";
this.selected = null;
this.dragTo = null;
this.dragFrom = null;
this.drag = drag?true:false;
this.check = check?true:false;
var icons = {
root :'root.gif',
open :'open.gif',
close :'close.gif',
file :'file.gif',
rplus :'rplus.gif',
rminus :'rminus.gif',
join :'t.gif',
joinbottom:'l.gif',
jointop :'r.gif',
plus :'tplus.gif',
plusbottom:'lplus.gif',
minus :'tminus.gif',
minusbottom:'lminus.gif',
blank :'blank.gif',
line :'I.gif'
};
this.Ficons = {};
for(i in icons){
this.Ficons[i]= new Image()
this.Ficons[i].src= path + "/" + icons[i];
}
this.create = function(oTarget){
if(oTarget){
for(var i=0;i<this.nodes.length;i++){
oTarget.appendChild(this.nodes.items[i].toString(me));
}
target = oTarget;
}
}
this.add = function(oo){
this.insert(this.nodes.length,oo);
}
this.insert = function(index,oo){
if(index>=0&&index<=this.nodes.length){
var pre = null;
if(index<this.nodes.length){
pre = this.nodes.items[index].baseNode;
}
this.nodes.insert(index,oo);
if(target){
if(index==this.nodes.length){
target.appendChild(oo.toString());
}else{
if(pre){
target.insertBefore(oo.toString(),pre);
}
}
}
}
}
}
//event
treeview.prototype.onnodeclick = function(sender){return false;}
treeview.prototype.onnodeexpand = function(sender){}
treeview.prototype.onnodecollapse = function(sender){}
treeview.prototype.onnodedblclick = function(sender){sender.toggle();return false;}
treeview.prototype.onnodeafteredit = function(sender,oldstr){}
treeview.prototype.onnodebeforeedit = function(sender,oldstr,newstr){}
treeview.prototype.onnodedrag = function(from,to){}
treeview.prototype.onnodekeydown = function(sender,e){
var e=e||event;
switch(e.keyCode){
case 61: //fx +
case 187: //=
case 107: //number +
sender.expand();
break;
case 109: //number -
case 189: //-
sender.collapse();
break;
case 38: //up
if(sender.previous()){
sender.previous().select();
}else{
if(sender.parent&&sender.parent.level>=0){
sender.parent.select();
}
}
break;
case 40: //down
if(sender.next()){
sender.next().select();
}
break;
case 37: //left
if(sender.parent&&sender.parent.level>=0){
sender.parent.select();
}
break;
case 39: //right
if(sender.firstChild()){
sender.firstChild().select();
}else{
if(sender.next()){
sender.next().select();
}
}
break;
}
}
treeview.prototype.onnodemousedown = function(sender,e){}
treeview.prototype.onnodemouseup = function(sender,e){}
treeview.prototype.oncontextmenu = function(sender){}
treeview.prototype.onnodecheck = function(sender){}
treeview.prototype.onselectchange = function(before,after){}
//class node
function node(caption,title,url,target,tag,callback,check){
var me = this;
this.nodes = new nodes();
// this.id = getid();
this.caption= caption;
this.title = title?title:caption;
this.parent = null;
this.tag = tag?tag:"";
this.loaded = false;
this.level = -1;
this.isLast = false;
this.opened = false;
this.showed = false;
this.checked= check?true:false;
this.indent = [];
var contol = null;
this.container = document.createElement("div");
this.baseNode = null;
this.handleNode = null;
this.folderNode = null;
this.textNode = null;
this.checkNode = null;
//get the id by rand
function getid(){
var a = Math.random() + "";
var b = Math.random() + "";
var c = Math.random() + "";
var d = Math.random() + "";
return a.substr(2,8) + "-" + b.substr(2,8) + "-" + c.substr(2,8) + "-" + d.substr(2,8);
}
//node collection
function nodes(){
var n = [];
//get the lenght of the collection
this.length = {valueOf:function(){return n.length;},toString:function(){return n.length;}}
this.toString = function(){
return n.toString();
}
//insert a node at index
this.insert = function(index,oo){
if(index>=0&&index<=n.length){
var ol = n.length;
oo.parent = me;
oo.level = me.level+1;
if(index>=n.length){
oo.isLast = true;
if(n.length>0){
n[n.length-1].isLast = false;
n[n.length-1].setIndent(n[n.length-1].level,n[n.length-1].isLast);
n[n.length-1].refresh(0);
}
}else{
oo.isLast = false;
}
oo.indent = me.indent.concat();
oo.indent[oo.indent.length]=oo.isLast;
if(oo.nodes.length>0){
refreshchildindent(oo);
}
function refreshchildindent(node){
for(var i=0;i<node.nodes.length;i++){
node.nodes.items[i].indent = node.indent.concat();
node.nodes.items[i].indent[node.nodes.items[i].indent.length] = node.nodes.items[i].isLast;
if(node.nodes.items[i].nodes.length>0){
arguments.callee(node.nodes.items[i]);
}
}
}
if(me.loaded){
if(index==n.length){
me.container.appendChild(oo.toString());
}else{
var pre = n[index].baseNode;
if(pre){
me.container.insertBefore(oo.toString(),pre);
}
}
}
n.splice(index,0,oo);
if(ol==0){
me.refresh(0);
}
}
return me;
}
//add a node after the last node
this.add = function(oo){
return this.insert(n.length,oo);
}
//remove a node by node
this.remove = function(node){
if(node){
for(var i=0;i<n.length;i++){
if(n[i] ==node){
this.removeAt(i);
}
}
}
}
//remove a node at index
this.removeAt = function(index){
if(index>=0&&index<n.length){
if(index>0&&index==n.length-1){
n[index-1].isLast = true;
n[index-1].setIndent(n[index-1].level,n[index-1].isLast);
}
n[index].nodes.removeChildren();
var c = n[index];
if(c.showed){
if(control){
if(c==control.selected){
if(index>0){
control.selected = c.previous();
}else{
control.selected = c.next();
}
if(!control.selected){
if(c.parent.level>=0){
control.selected = c.parent;
}
}
if(control.selected)control.selected.select();
}
}
var oNode = c.baseNode;
if (oNode) {oNode.parentNode.removeChild(oNode); }
}
n.splice(index,1);
if(n.length>0){
var o = n[n.length-1];
o.isLast = true;
o.setIndent(o.level,o.isLast);
if(o.showed){o.refresh(0);}
}else{
me.loaded = false;
me.opened = false;
me.container.style.display = "none";
me.refresh(0);
}
}
}
this.removeChildren = function (){
for(var i=n.length-1;i>=0;i--){
var o = me.nodes.items[i];
o.nodes.removeChildren();
if(o.showed){
if(control){
if(o==control.selected){
control.selected = this;
}
}
var oNode = me.baseNode;
if (oNode) {oNode.parentNode.removeChild(oNode); }
}
}
n.length = 0;
}
this.items = n;
}
this.add = function(oo){
return this.nodes.add(oo);
}
this.insert = function(index,oo){
return this.nodes.insert(index,oo);
}
this.remove = function(){
this.parent.nodes.remove(this);
}
//set the caption of the node
this.setCaption = function(sText,sTitle){
if(this.showed){
var oNode = this.textNode;
if(oNode){
oNode.firstChild.innerHTML = sText;
oNode.title = typeof(sTitle)!="undefined"?sTitle:sText;
}
}
this.caption = sText;
}
//get then deepth of the node
this.deepth = function(){
var i = -1;
var p = me;
do{
p = p.parent;
i++;
}while(p!=null);
return i;
}
//get root node
this.root = function(){
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -