📄 easytree2.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>
.close {
display:none;
list-style:none;
margin: 0px;
}
.open {
display:block;
list-style:none;
margin: 0px;
}
.open li{
margin:0px;
}
.folder {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #666;
white-space: nowrap;
border:1px ;
border-color:red;
}
.folder img {
border: 0px;
vertical-align: middle;
}
.links{
}
.unSelected{
}
.Selected{
background-color:blue;
}
.childs{
margin: 0px;
padding: 0px;
border: 0px solid #cccccc;
border-color:red;
}
</style>
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript" src="easytree.js"></script>
<script type="text/javascript">
function formatArray(array,pid){
array=array||{};
var result={};
if(typeof array=="Array"){
var obj=$A(array).find(
function(node){
if(node.pid==pid){
return true;
}
}
)
var childs=$A(array).collect(
function(eachNode){
if(eachNode.pid==obj.id){
return formatObj(eachNode,array);
}
}
)
result.id=obj.id;
result.name=obj.name;
result.childs=childs||[];
}
return result;
}
function formatObj(node,array){
array=array||{};
var result={};
var childs=$A(array).collect(
function(eachNode){
if(eachNode.pid==node.id){
return formatObj(eachNode,array);
}
}
)
result.id=obj.id;
result.name=obj.name;
result.childs=childs||[];
return result;
}
</script>
</head>
<body>
no config:<div id="t0"></div>
config to criterion tree:<div id="t1"></div>
closeSameLevel:true<div id="t2"></div>
useIcons:false<div id="t3"></div>
useLines:false<div id="t4"></div>
useIcons:false,useLines:false,especialRoot:true<div id="t5"></div>
after add some style it could be a menu and could be a dropdown menu too:
<div id="t6"></div>
<textarea id='sourceT0' rows=100 cols=150 ></textarea>
<textarea id='sourceT1' rows=100 cols=150 ></textarea>
<script type="text/javascript" language="javascript">
var tData={
id:"0",
name:"t1",
isOpen:true,
childs:[{id:"1",name:"1",
childs:[{id:"11",name:"l1",childs:[
{id:"111",name:"111"},
{id:"112",name:"112"},
{id:"113",name:"113"}
]},
{id:"12",name:"l2"},
{id:"13",name:"l3"},
{id:"14",name:"l4"}]
},
{id:"2",name:"2",childs:[
{id:"21",name:"l2"},
{id:"22",name:"l3"},
{id:"23",name:"l4"}]},
{id:"3",name:"3"},
{id:"4",name:"4"}
]
}
function pageCallback1(eNode,eTree){
//alert(eNode.nodeData.id);
}
function foldCallback1(eNode,eTree){
//alert(eNode.nodeData.id);
}
var t0 = new EasyTree(tData,"",{},'t0');
$('t0').innerHTML=t0.getHTML();
$('sourceT0').value=t0.getHTML();
var t1 = new EasyTree(tData,"",{useIcons:true,closeSameLevel:false,especialRoot:false,useLines:true,showRoot:true,foldCallback:'foldCallback1',childCallback:'childCallback1'},'t1');
$('t1').innerHTML=t1.getHTML();
var t2 = new EasyTree(tData,"",{useIcons:true,closeSameLevel:true,especialRoot:false,useLines:true,showRoot:true,foldCallback:'foldCallback1',childCallback:'childCallback1'},'t2');
$('t2').innerHTML=t2.getHTML();
var t3 = new EasyTree(tData,"",{useIcons:false,closeSameLevel:false,especialRoot:false,useLines:true,showRoot:true,foldCallback:'foldCallback1',childCallback:'childCallback1'},'t3');
$('t3').innerHTML=t3.getHTML();
var t4 = new EasyTree(tData,"",{useIcons:true,especialRoot:true,useLines:false,showRoot:true,foldCallback:'foldCallback1',pageCallback:'pageCallback1'},'t4');
$('t4').innerHTML=t4.getHTML();
var t5 = new EasyTree(tData,"",{useIcons:false,especialRoot:true,useLines:false,showRoot:true,foldCallback:'foldCallback1',pageCallback:'pageCallback1'},'t5');
$('t5').innerHTML=t5.getHTML();
var t6 = new EasyTree(tData,"",{closeSameLevel:true,onlyName:true,useIcons:false,especialRoot:true,useLines:false,showRoot:true,foldCallback:'foldCallback1',pageCallback:'pageCallback1'},'t6');
$('t6').innerHTML=t6.getHTML();
$('sourceT1').value=t6.getHTML();
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -