随笔-199  评论-203  文章-11  trackbacks-0

基于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>
&nbsp;&nbsp;
<div>
    
<button onclick="testParent()">提交</button>&nbsp;
</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 阅读(1852) 评论(3)  编辑  收藏 所属分类: 11.JavaScript

评论:
# re: TafelTree 的应用实例! 2010-01-18 20:50 | 咖啡妆
不给上个图?  回复  更多评论
  
# re: TafelTree 的应用实例! 2010-01-19 08:50 | 在线字典
试试...  回复  更多评论
  
# re: TafelTree 的应用实例![未登录] 2010-01-20 09:03 | Herry
代码这么长,LZ有没有试试这个树能不能有5000个以上的节点?我估计是不行的  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: