基于prototype库实现，除了常见的各种树功能（展开，收缩，添加/删除/编辑节点）以外，它还提供了很多强大的特性：
1. 支持拖拉 (drag/drop)
2. 支持ajax/json
3. 支持checkbox，并且有3态（全选，不选，部分选择）
4. 支持各种鼠标和键盘事件
今天用了一天来研究TafelTree,关于TafelTree网上的资料不是很多,如下是今天做的一个小Demo,希望对和我一样初学的朋友有所帮助.
具体代码如下:
<html>
<head>
<title>当前在线人数</title>
<link rel="stylesheet" type="text/css" href="css/tree.css" />
<style>
body 
{
background-color:#white;
}
.mover {
background-color:#FFCEE7;
color:black;
}
.special {
color: #8000FF;
}
.tafelTree h3, .tafelTree p, .tafelTree ol {
margin: 0;
padding: 0;
}
.tafelTree p {
padding-bottom: 1em;
}
.tafelTree h3 {
color: #009900;
}
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="Tree-optimized.js"></script>
<script type="text/javascript">
function opp(branch, response){
return response;
}
var struct2 = [{'id':'root1','txt':'总经办','items':
[{'id':'root2','txt':'采购部','items':
[{'id':'child1','txt':"<div id='txtDiv' style='float:left'>people_01</div><img src='imgs/base.gif' id='imgDiv' style='display:none;float:left' onclick=clickEvent('computer') alt='computer'><img src='imgs/globe.gif' id='imgWord' alt='word' style='display:none;float:left' onclick=clickEvent('word')><img src='imgs/member.jpg' id='imgMember' alt='member' style='display:none;' onclick=clickEvent('member')>",'onmouseover': myMouseOver, 'onmouseout': myMouseOut},
{'id':'child2','txt':"people_02"},
{'id':'child3','txt':'people_03'},
{'id':'child4','txt':'people_04'},
{'id':'child5','txt':'people_05'},
{'id':'child6','txt':'people_06'}
]
},
{'id':'root3','txt':'市场部','items':
[{'id':'child7','txt':'people_07'},
{'id':'child8','txt':'people_08'},
{'id':'child9','txt':'people_09'},
{'id':'child10','txt':'people_10',
'acceptdrop':false,
'editable':true,
'onedit':function(branch, newv, oldv){return newv;}
}
]
}
]
}
];
var struct1 = [
{
'id' : 'root043',
'txt' : '深圳市捷为科技有限公司'
}];
var tree1 = null;
var tree2 = null;
function TafelTreeInit () {
tree2 = new TafelTree('test2', struct1, {'generate':true});
tree1 = new TafelTree('test1', struct2, {
'generate':true,
'openAtLoad':true,
'cookies':true,
'multiline':true, //虚线不断
'rtlMode':false, //树的方向
'checkboxesThreeState':true,
'behaviourDrop':'child',
'dropALT' : false,
'dropCTRL' : false,
'bind':[tree2]
});
var branch = tree1.getBranchById('child');
//复选框选中
//alert(branch.isChecked());
}
function clickEvent(strCom)
{
alert(strCom);
}
function myMouseOut (branch) {
//branch.removeClass('mover');
document.getElementById('imgDiv').style.display='none';
document.getElementById('imgWord').style.display='none';
document.getElementById('imgMember').style.display='none';
}
function myMouseOver (branch) {
//branch.addClass('mover');
document.getElementById('imgDiv').style.display='block';
document.getElementById('imgWord').style.display='block';
document.getElementById('imgMember').style.display='block';
}
var branchId = '';
var branchTxt ='';
function glu (branch)
{
//window.alert('branch.children.length:'+branch.children.length);
if (branch.children.length==0 && branch.isChecked())
{
branchId += ','+branch.getId();
var strTxt = branch.getText();
if (strTxt.search('>') >= 0 && strTxt.search('</div>') >=0)
{
var start = strTxt.indexOf('>')+1;
var end = strTxt.lastIndexOf('</div>');
}
branchTxt += ','+branch.getText().substring(start,end);
}
//window.alert('branchStr'+branchStr);
return (branch.children.length > 0) ? true : false;
}
function testParent (branch)
{
var p = tree1.getBranches(glu);
window.alert(branchId.substring(1,branchId.length));
window.alert(branchTxt.substring(1,branchTxt.length));
branchId = '';
branchTxt = '';
}
</script>
</head>
<body>
<div id="test2"></div>
<div id="test1"></div>
<div>
<button onclick="testParent()">提交</button>
</div>
</body>
</html>
这个Demo的主要实现的功能就是
1.支持checkbox，并且有3态（全选，不选，部分选择）,并且通过"提交"Button获取复选框选中的按钮的id及text,
2.鼠标移到节点上面显示相应的图标,通过点击图片做相应的操作.
如上Demo如果要在你本机跑起来的话,需要
rafelTree_1_9_1包的一同下载到你的本机,解压后将如上代码保存为.html文件放在tafelTree目录下,里面还有很多Demo,有兴趣的朋友可以研究一下.\tafelTree\doc下面有相应的帮助文档.
posted on 2010-01-18 20:13
Werther 阅读(1938)
评论(3) 编辑 收藏 所属分类:
11.JavaScript