这几天刚开始看梅花树,我用的版本是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>
在网上找了好多资料都说是有这个功能,好多都是说修改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>
解决方案 »
- 一个图片轮播的JQ代码,请各位看看为什么无法实现效果,在线等!
- CSDN下载评论时的快速收缩时怎么实现的?
- 梅花雪树2.0中,已经把节点选中(即选中复选框),但也没有显示已经选中的复选框
- 文本框文字改变事件
- 在ASP页面上的表示删除的复选框,点中提交后却未执行删除操作。
- 关于document.execCommand('InsertImage', false, imagePath)请指点小弟迷津
- 帮忙给出判断是否是日期和数字的函数
- 一个表单内有多个按钮时如果用javascript实现每个按钮提交不同的参数
- 如何判断客户端的浏览器是IE的话转到1.HTM,不是的话转到2.htm
- 在有两个框架的页面如何访问另一个框架中的div中的值?
- 急急急,在线等待,用jquery动态的创建一张表格
- button需要调用一个删除事件,但我想先出现return confirm('你确定要删除吗?');
请问你给的Demo有没源码?给个源码研究一下!不过现在我们项目用到的梅花雪树,要是能解决的话就更好了!
然后呢在数的每个节点上添加一个函数
做个隐藏div为右键的菜单
这个不是很难