基于prototype庫實現(xiàn)，除了常見的各種樹功能（展開，收縮，添加/刪除/編輯節(jié)點）以外，它還提供了很多強大的特性：
1. 支持拖拉 (drag/drop)
2. 支持ajax/json
3. 支持checkbox，并且有3態(tài)（全選，不選，部分選擇）
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的主要實現(xiàn)的功能就是
1.支持checkbox，并且有3態(tài)（全選，不選，部分選擇）,并且通過"提交"Button獲取復選框選中的按鈕的id及text,
2.鼠標移到節(jié)點上面顯示相應的圖標,通過點擊圖片做相應的操作.
如上Demo如果要在你本機跑起來的話,需要
rafelTree_1_9_1包的一同下載到你的本機,解壓后將如上代碼保存為.html文件放在tafelTree目錄下,里面還有很多Demo,有興趣的朋友可以研究一下.\tafelTree\doc下面有相應的幫助文檔.
posted on 2010-01-18 20:13
Werther 閱讀(1954)
評論(3) 編輯 收藏 所屬分類:
11.JavaScript