论坛首页 → AJAX版 → JavaScript →

YUI中的树型控件双击删除自己的问题

浏览 676 次
锁定老贴子 主题：YUI中的树型控件双击删除自己的问题
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • brumby007
  • 等级: 初级会员
  • 用户头像
  • 文章: 18
  • 积分: 10
最后更新时间：2007-08-21 关键字: YUI
1.我修改了treeview.js
在YAHOO.widget.TreeView.prototype = {中增加如下： 
/**
		 * Add by HuangMing 
		 * @method getNodesCount
		 */
		getNodesCount: function(){
			return this._nodes.length;
},

以取得当前树的结点树。

2.在页面中： 
<html>
	<head>
		<title>TestTree</title>
		<link rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css" />
		<link rel="stylesheet" type="text/css" href="build/treeview/assets/skins/sam/treeview.css" />
		<script type="text/javascript" src="build/yahoo/yahoo.js"></script>
		<script type="text/javascript" src="build/event/event.js"></script>
		<script type="text/javascript" src="build/treeview/treeview.js"></script>
		<style type="text/css">
    #treewrapper {background: #fff; position:relative;}
		#treediv {position:relative; width:250px; background: #fff; padding:1em;}
    .icon-ppt { display:block; padding-left: 20px; background: transparent url(img/icons.png) 0 0px no-repeat; }
    .icon-dmg { display:block; padding-left: 20px; background: transparent url(img/icons.png) 0 -36px no-repeat; }
    .icon-prv { display:block; padding-left: 20px; background: transparent url(img/icons.png) 0 -72px no-repeat; }
    .icon-gen { display:block; padding-left: 20px; background: transparent url(img/icons.png) 0 -108px no-repeat; }
    .icon-doc { display:block; padding-left: 20px; background: transparent url(img/icons.png) 0 -144px no-repeat; }
    .icon-jar { display:block; padding-left: 20px; background: transparent url(img/icons.png) 0 -180px no-repeat; }
    .icon-zip { display:block; padding-left: 20px; background: transparent url(img/icons.png) 0 -216px no-repeat; }
</style>
	</head>
		
	<body  class=" yui-skin-sam">
<div id="treewrapper">
	<div id="treediv"> </div>
</div>
<script>
	
//Wrap our initialization code in an anonymous function
//to keep out of the global namespace:
(function(){
	var init = function() {
		
		//create the TreeView instance:
		var tree = new YAHOO.widget.TreeView("treediv");
		//alert(tree.id);
		//get a reusable reference to the root node:
		var root = tree.getRoot();
		
		//for Ahmed's documents, we'll use TextNodes.
		//First, create a parent node for his documents:
		var ahmedDocs = new YAHOO.widget.TextNode("Ahmed's Documents", root, true);
			//Create a child node for his Word document:
			var ahmedMsWord = new YAHOO.widget.TextNode("Prospectus", ahmedDocs, false);
			//Now, apply the "icon-doc" style to this node's
			//label:
			ahmedMsWord.labelStyle = "icon-doc";
			var ahmedPpt = new YAHOO.widget.TextNode("Presentation", ahmedDocs, false);
			ahmedPpt.labelStyle = "icon-ppt";
			
			var ahmedPdf = new YAHOO.widget.TextNode("Prospectus-PDF version", ahmedDocs, true);
			ahmedPdf.labelStyle = "icon-prv";
				
				var ahmedPdf1 = new YAHOO.widget.TextNode("Prospectus-PDF version1", ahmedPdf, false);
				ahmedPdf1.labelStyle = "icon-prv";
				ahmedPdf1.href = "http://www.baidu.com";
	
		//for Susheela's documents, we'll use HTMLNodes.
		//First, create a parent node for her documents:
		var sushDocs = new YAHOO.widget.TextNode("Susheela's Documents", root, true);
			//Create a child node for her zipped files:
			var sushZip = new YAHOO.widget.HTMLNode("Zipped Files", sushDocs, false, true);
			//Now, apply the "icon-zip" style to this HTML node's
			//content:
			sushZip.contentStyle = "icon-zip";
			var sushDmg = new YAHOO.widget.HTMLNode("Files -- .dmg version", sushDocs, false, true);
			sushDmg.contentStyle = "icon-dmg";
			var sushGen = new YAHOO.widget.HTMLNode("Script -- text version", sushDocs, false, true);
			sushGen.contentStyle = "icon-gen";
			var sushJar = new YAHOO.widget.HTMLNode("JAR file", sushDocs, false, true);
			sushJar.contentStyle = "icon-jar";
	
		var count = YAHOO.widget.TreeView.getTree('treediv').getNodesCount() - 1;
		
		tree.draw();
		
		alert(count);
		
		for(var i = 0; i <= count; i++){
			
			var current_node = YAHOO.widget.TreeView.getNode('treediv', i);
			
			if(current_node != null){
				
				//var current_node_id = YAHOO.widget.TreeView.getNode('treediv', i).labelElId?YAHOO.widget.TreeView.getNode('treediv', i).labelElId : YAHOO.widget.TreeView.getNode('treediv', i).contentElId;
				//alert(current_node_id);
				var current_node_id = current_node.getElId();
				//alert(current_node_id + ":ondblclick" + i);
				//alert(current_node_id);
				
				var removeNode =  function(){
					alert('Hi~');
					tree.removeNode(current_node, true);
					
				}
				
				YAHOO.util.Event.addListener(current_node_id ,'dblclick' , removeNode);
			}
			
			
			
		}
	}
	
	
	//Add an onDOMReady handler to build the tree when the document is ready
		//YAHOO.util.Event.addListener('remove_button' ,'dblclick' ,removeNode);
    YAHOO.util.Event.onDOMReady(init);
    
})();
</script>

</body>
</html>


可是调用时，双击树的结点，只删除了一次以后就不能响应dblclick事件了。
返回顶楼
   
论坛首页 → AJAX版 → JavaScript

跳转论坛:
JavaEye推荐