dtree的使用

J2EE 专栏收录该内容
22 篇文章 0 订阅

前言:

   该例子就是个框架导航 , 左边包含dtree的框架,点击上面的节点右边框架显示

 

说明步骤:

1.      首先获得dtree  http://www.destroydrop.com/javascripts/tree/

 

 

 

2.     使用dtree 

     2.1  导入dtree.css dtree.js

            <link rel="StyleSheet" href="dtree.css" type="text/css"/>
            <script type="text/javascript" src="dtree.js"></script>

 

3.  关键代码

    3.1   大的框架代码:

     <frameset rows="20%,60%,20%">
    <frame src="/hr/SystemManager/top.html">
    <frameset cols="20%,80%">
      <frame src="/hr/SystemManager/left.html" name="leftFrame" >
      <frame src="/hr/SystemManager/right.html"  name="rightFrame" >
    </frameset>  
    <frame src="/hr/SystemManager/foot.html">
   </frameset>

 

    3.1   dtree的代码

 

       <script type="text/javascript">

        d = new dTree('d');       
        d.add(0,-1,'My example tree');
        d.add(1,0,'Node 1','top.html');
        d.add(2,0,'Node 2','top.html');
        d.add(3,1,'Node 1.1','example01.html');
        d.add(4,0,'Node 3','example01.html');
        //d.add(5,3,'Node 1.1.1','top.html','top','  ','img/imgfloder.gif');
       d.add(5,4,'1','/hr/failure.jsp','','parent.rightFrame');   //在mainFrame框架内显
        d.add(5,3,'点击我','javascript:junploaction()',"",'');
       document.write(d);
      </script>
      <script>
     function junploaction()
    {
            parent.rightFrame.location="left.html";
     }
</script>

 

 

更详细的请看dtree.zip中的资料 希望对大家有所有小帮助

 

 

 

 

图片演示 :

 

 

 

 

点击之后的图片

 

 

 dtree 递归思考:

 

 

dTree.prototype.selectCheckbox=function(nodeId){
 
  var flag = 0;
  var temp ;
 
  var cs = document.getElementById("c"+this.obj+nodeId).checked;
  var node = this.aNodes[nodeId];
  var len =this.aNodes.length;
  
  
  var same = [];
  
  
  for (n=0; n<len; n++) {
    
	if(node.pid==this.aNodes[n].pid){
		same[same.length] = n;
	}
  
  
   if ((this.aNodes[n].pid == node.id)) {
    document.getElementById("c"+this.obj+n).checked=cs;
	flag = 1;
	this.selectCheckbox(n);
   }
  }
  
  if(flag==0){
    temp = n;
	//查找同级节点
	//alert(same);
	for(j=0;j<same.length;j++){
	    
		document.getElementById("c"+this.obj+(same[j])).checked=true;
	}
	
    //alert("终止"+this.aNodes[nodeId].name);
  }

 

 

  • 0
    点赞
  • 2
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

txwoaify0506

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值