梅花雪指教！！！梅花雪树2.0如何添加右键菜单？

showlee2008 2010-03-04 05:20:21

这几天刚开始看梅花树，我用的版本是2.0的，现在项目需求是在所有节点上都可以点击右键“添加”、“删除”、或是“修改”。添加/删除指的是添加或删除节点，修改指的是修改节点上显示的文本。
在网上找了好多资料都说是有这个功能，好多都是说修改mztreeView.js中的render方法：



MzTreeView.prototype.render = function()

{

  function loadImg(C){for(var i in C){if("string"==typeof C[i]){

  var a=new Image(); a.src=me.iconPath + C[i]; C[i]=a;}}} var me=this;

  loadImg(MzTreeView.icons.expand);loadImg(MzTreeView.icons.collapse);

  loadImg(MzTreeView.icons.line); me.firstNode=null;

  loadCssFile(this.iconPath +"mztreeview.css", "MzTreeView_CSS");



  this.initialize(); var str="no data", i, root=this.rootNode;

  if (root.hasChild){var a = [], c = root.childNodes; me.firstNode=c[0];

  for(i=0;i<c.length;i++)a[i]=c[i].render(i==c.length-1);str=a.join("");}

  setTimeout(function(){me.afterRender();}, 10);

  return "<div class='mztreeview' id='MTV_root_"+ this.index +"' "+

    "onclick='Instance(""+ this.index +"").clickHandle(event)' "+

    "ondblclick='Instance(""+ this.index +"").dblClickHandle(event)' "+

    "oncontextmenu='Instance(""+ this.index +"").contextMenuHandle(event)' "+//这里是我们添加的右键事件

    ">"+ str +"</div>";

};

然后再多写个方法：



//private: contextMenuHandle

MzTreeView.prototype.contextMenuHandle = function(e)

{

  e = window.event || e; e = e.srcElement || e.target;

  if((e.tagName=="A" || e.tagName=="IMG")&& e.id)

  {

    e=this.nodes[e.id.substr(e.id.lastIndexOf("_") +1)];

    //e是一个节点对象，如我这里是判断这个节点是否有子节点，然后执行相应的方法 e.hasChild ? Tool(e,"project"):Tool(e,"page");

    e.focus();

    this.currentNode=e;this.dispatchEvent(new System.Event("oncontextmenu"));

  }

};

上面的代码都是在网上找的，说的很模糊，希望梅花雪大虾能够指点一下！
我的JSP测试代码：



<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML> 

    <HEAD> 

        <TITLE> MzTreeView 2 </TITLE> 

        <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> 

        <script src="scripts/jsframework.js"> </script> 

    </HEAD> 



    <BODY>

    <form name = "form1" method = "post" action = "test2.jsp"> 

        <SCRIPT LANGUAGE="JavaScript"> 

			var data={}; 

			data["-1_1"] = "text: 我的树根"; 

			data['1_1002'] = 'text: 我的技术社区'; 

			data['1002_0001'] = 'text: web社区';

			data['1002_0002'] = 'text: .net社区';

			data['1002_0003'] = 'text: ps社区';

			data['1_1003'] = 'text: java社区';

			//* 

			Using("System.Web.UI.WebControls.MzTreeView"); 

			var tree = new MzTreeView(); 

			tree.dataSource = data; 

			

			//  a.setJsDataPath("scripts/csdn/community/treedata/"); 

			//tree.setXmlDataPath("xmlData"); 

			//a.rootId="1"; 

			tree.autoSort = false; 

			tree.useCheckbox = true; 

			tree.canOperate = true;

			document.write(tree.render()); 

			tree.expandLevel(1); 

			//*/ 

			function aa(){

				var ids = new Array();	//定义存放选中checkboxID的数组

				for(var  i  in  tree.nodes){ 

					if(tree.nodes[i].checked) //a.nodes[i].checked = true;

					{ 

						alert(tree.selectedNode.id+"---parentId"+tree.nodes[i].parentId+"---id"+tree.nodes[i].id+"---"+tree.nodes[i].index+"---text:"+tree.nodes[i].text+"---value"+tree.nodes[i].value);

						ids.push(tree.nodes[i].id); //给数组中添加节点ID

					}else{

						alert("你没有选择要提交的节点！");

					}

				} 

				document.form1.action = "test2.jsp?id="+ids;

			}

			

			function checkbox(){	//用于返回选择的节点的个数

				var x = new Array();

				for(var i in tree.nodes){

					if(tree.nodes[i].checked){

						x.push(tree.nodes[i].id);

					}

				}

				return x;

			}

			

			function addNewNodes(){

				var x = checkbox();	//调用上面的函数

				//alert(x.length);显示选择节点的个数

				if(x.length == 0){

					alert("请选择了节点之后再进行点击！");

				}else if(x.length>1){

					alert("对不起您只能选择一个节点进行处理！");

				}else{			

					tree.appendNode(x+'_'+'mm','text:new node;');

				}

			} 

		</script>

		<p/> 

		<input type="submit" value="submit" onClick = "aa()" />提交数据到第二个页面<br>

		<input value = "添加新节点(双击)" size = 19 ondblclick = "addNewNodes()">

		<input value = "展开全部(双击)" size = 19 ondblclick = "tree.expandAll('1')">

		<input value = "收缩全部(双击)" size = 19 ondblclick = "tree.collapse('1')">

 	</form>

    </BODY> 

</HTML>