📄 easytree1.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.tree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #666;
white-space: nowrap;
}
.tree img {
border: 0px;
vertical-align: middle;
}
.close {
display:none;
list-style:none;
margin: 0px;
}
.open {
display:block;
list-style:none;
margin: 0px;
}
.open li{
margin:0px;
}
.childs{
margin: 0px;
padding: 0px;
border: 1px solid #cccccc;
border-color:red;
padding-left:10px;
}
.rootA{
display: block;
color:black;
}
.folderA{
display: block;
color:red;
}
.nodeA{
display: block;
color:yellow;
}
</style>
<script src="prototype.js" type="text/javascript"></script>
<!--<script type="text/javascript" src="easytree.js"></script>-->
<script type="text/javascript">
var EasyTree=Class.create();
EasyTree.Node=Class.create();
EasyTree.Node.prototype = {
initialize: function(treeData,eTree) {
var defaultNodeData={
isFirst:false,
isLast:false,
isSelected:false,
isOpen:false,
iconOpen:eTree.icon.folderOpen,
iconClose:eTree.icon.folder,
target:eTree.config.target,
url:'#',
foldCallback:eTree.config.foldCallback,
childCallback:eTree.config.childCallback
};
Object.extend(this,defaultNodeData);
Object.extend(this,treeData);
}
}
EasyTree.prototype = {
initialize: function(elm,treeData, config,treeName) {
this.treeName=treeName;
this.elm=$(elm);
this.treeData = treeData;
this.resultStr=[];
this.config = Object.extend({
target: true,
showRoot:false,
folderLinks: true,
useSelection: true,
useCookies: true,
useLines: true,
useIcons: true,
useStatusText: false,
closeSameLevel: false,
inOrder: false
},config||{});
this.selectedId=null;
this.icon = {
root : 'img/base.gif',
folder : 'img/folder.gif',
folderOpen : 'img/folderopen.gif',
node : 'img/page.gif',
empty : 'img/empty.gif',
line : 'img/line.gif',
join : 'img/join.gif',
joinBottom : 'img/joinbottom.gif',
plus : 'img/plus.gif',
plusBottom : 'img/plusbottom.gif',
minus : 'img/minus.gif',
minusBottom : 'img/minusbottom.gif',
nlPlus : 'img/nolines_plus.gif',
nlMinus : 'img/nolines_minus.gif'
};
},
drawTree:function(){
var eTree=this;
this.treeData.isFirst=true;
EasyTree.drawNode('root',0,this.resultStr,this.treeData,eTree);
this.elm.innerHTML=this.resultStr.join("");
}
}
Object.extend(
EasyTree,{
drawNode :function(id,depth,str,treeData,eTree){
treeData=new EasyTree.Node(treeData,eTree);
var display="";
var nameClass=(treeData.childs)?"folderA":"nodeA";
if(depth==0){
if(eTree.config.showRoot==false){display="style='display:none'";}
nameClass="rootA"
}
depth++;
str[str.length]="<div class='tree'>";
EasyTree.drawNodeImgs(id,depth,str,treeData,eTree);
if(treeData.childs){
str[str.length]="<div class='childs'>"
str[str.length]="<ul id='"+id+"' class='open'>";
var len=treeData.childs.length;
for(var i=0; i<len; i++){
str[str.length]="<li>";
var child=treeData.childs[i];
var childid=id+"-"+i;
if(i==len-1){child.isLast=true;}
if(i==0){child.isFirst=true;}
EasyTree.drawNode(childid,depth,str,child,eTree)
str[str.length]="</li>";
}
str[str.length]="</ul>";
str[str.length]="</div>";
}
str[str.length]="</div>";
},
drawNodeImgs:function(id,depth,str,treeData,eTree){
str[str.length]="<div class='imgs'>";
//the first img
if(treeData.childs){
if(!treeData.isLast){
if(depth==1){
str[str.length]="<img src='" + eTree.icon.root + "' onclick=\"EasyTree.clickNode('" + id + "');\" ></img>";
}else{
str[str.length]="<img src='" + eTree.icon.minus + "' onclick=\"EasyTree.clickNode('" + id + "');\" ></img>";
}
}else{
str[str.length]="<img src='" + eTree.icon.minusBottom + "' ></img>";
}
}else{
if(!treeData.isLast){
str[str.length]="<img src='" + eTree.icon.join + "' ></img>";
}else{
str[str.length]="<img src='" + eTree.icon.joinBottom + "' ></img>";
}
}
//the second folder img
if(treeData.childs){
if(depth!=1){
str[str.length]="<img src='" + eTree.icon.folderOpen + "' ></img>";
}
}else{
str[str.length]="<img src='" + eTree.icon.node + "' ></img>";
}
//third is the a tag
if(treeData.childs){
str[str.length]="<a datapath='"+id+"' id='a-"+id+"' herf='"+treeData.url+"' target='"+treeData.target+"' onclick=\"EasyTree.selectNode(this,"+eTree.treeName+");"+ treeData.foldCallback +"(this,"+eTree.treeName+");\" >" + treeData.name + "</a>";
}else{
str[str.length]="<a datapath='"+id+"' id='a-"+id+"' herf='"+treeData.url+"' target='"+treeData.target+"' onclick=\"EasyTree.selectNode(this,"+eTree.treeName+");"+ treeData.childCallback +"(this,"+eTree.treeName+");\" >" + treeData.name + "</a>";
}
str[str.length]="</div>";
},
selectNode:function(elm,eTree){
eTree.selectedId=$(elm).id;
},
clickNode:function(ul){
ul=$(ul);
if(ul){ul.className=(ul.className=="open")?"close":"open";}
}
}
)
</script>
</head>
<body>
<div id="tree1"></div>
<textarea id='source' rows=100 cols=100 ></textarea>
<script type="text/javascript" language="javascript">
var tData={
id:"0",
name:"t1",
childs:[{id:"l1",name:"l1",
childs:[{id:"11",name:"l1"},
{id:"22",name:"l2"},
{id:"33",name:"l3"},
{id:"44",name:"l4"}]
},
{id:"l2",name:"l2"},
{id:"l3",name:"l3"},
{id:"l4",name:"l4"}
]
}
function childCallback1(){
//alert("childCallback1");
}
function foldCallback1(){
//alert("foldCallback1");
}
var t1 = new EasyTree('tree1',tData,{showRoot:true,foldCallback:'foldCallback1',childCallback:'childCallback1'},'t1');
t1.drawTree();
$('source').value=t1.resultStr.join("\n");
//document.write(t1.resultStr.join(""));
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -