dtree + Jquery 添加右键菜单

来源：互联网发布：淘宝客什么意思编辑：程序博客网时间：2024/05/19 22:50

tree.jsp如下：

<%@ page language="java" pageEncoding="utf-8"%>

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

<html>

<head>

</head>

<body>

<p><a href="javascript: jqueryDtree.openAll();">open all</a> | <a href="javascript: jqueryDtree.closeAll();">close all</a></p>

dTree.prototype.isParentNode = function(id) {

var isParentNode = false;

var n=0;

for (n; n<this.aNodes.length; n++)

{

if (this.aNodes[n].pid == id)

{

isParentNode = true;

break;

}

// alert(isParentNode);

return isParentNode;

};

$(document).ready(function() {

$('a').contextMenu('jqueryDtreeMenu', {

onContextMenu: function(e) {

var nodeId = $(e.target).attr('id').substr(jqueryDtree.obj.length+1);

if(jqueryDtree.isParentNode(nodeId))

{

return true;

}else

return false;

bindings: {

'open': function(t) {

//alert('Trigger was '+t.id+'/nAction was Open');

'email': function(t) {

//alert('Trigger was '+t.id+'/nAction was Email');

'save': function(t) {

//alert('Trigger was '+t.id+'/nAction was Save');

'delete': function(t) {

// alert('Trigger was '+t.id+'/nAction was Delete');

}

});

jqueryDtree = new dTree('jqueryDtree');//创建一个对象.

$.ajax({

url:'NodesPrint',

type:'post', //数据发送方式

dataType:'xml', //接受数据格式

timeout: 1000,

error: function(xml){

alert('Error loading XML document'+xml);

async: false ,

success: function(xml){

$(xml).find("node").each(function(){

var nodeId=$(this).attr("nodeId");

var parentId=$(this).attr("parentId");

var nodeName=$(this).text();

var hrefAddress=$(this).attr("hrefAddress");

//alert(nodeName);//这里就是ID的值了。

//alert(nodeId+"/"+parentId+"/"+nodeName+"/"+hrefAddress);

jqueryDtree.add(nodeId,parentId,nodeName,hrefAddress,"","","","",false);

//alert(tree)

});

}

});

document.write(jqueryDtree);

</script>

<ul>

<li id="open"><img src="<%=request.getContextPath() %>/img/folder.gif"/> 增加</li>

<li id="email"><img src="<%=request.getContextPath() %>/img/question.gif"/> 修改</li>

<li id="delete"><img src="<%=request.getContextPath() %>/img/delete.gif"/>删除</li>

</ul>

</div>

</body>

</html>

新tree.jsp如下：

<%@ page language="java" pageEncoding="utf-8"%>

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

<html>

<head>

</head>

<body>

<p><a href="javascript: jqueryDtree.openAll();">open all</a> | <a href="javascript: jqueryDtree.closeAll();">close all</a></p>

//以下作用是当选择节点时候屏蔽系统右键其他功能，

dTree.prototype.isParentNode = function(id) {

var isParentNode = false;

var n=0;

for (n; n<this.aNodes.length; n++)

{

if (this.aNodes[n].pid == id)

{

isParentNode = true;

break;

}

// alert(isParentNode);

return isParentNode;

};

$(document).ready(function() {

$('a').contextMenu('jqueryDtreeMenu', {

//以下作用是只有具有子节点时才弹出右键对话框

/*onContextMenu: function(e) {

var nodeId = $(e.target).attr('id').substr(jqueryDtree.obj.length+1);

if(jqueryDtree.isParentNode(nodeId))

{

return true;

}else

return false;

},*/

bindings: {

'add': function(t) {

id = t.id.substring(12);//t.id为取到<a id="1" href="#"> 点击链接的id值

alert(id);

location.href="/ktabrsa7/savePLibraryType.action&ltId="+id;

'upd': function(t) {

alert('Trigger was '+t.id+'/nAction was update');

'delete': function(t) {

alert('Trigger was '+t.id+'/nAction was Delete');

}

});

jqueryDtree = new dTree('jqueryDtree');//创建一个对象.

$.ajax({

url:'NodesPrint',

type:'post', //数据发送方式

dataType:'xml', //接受数据格式

timeout: 1000,

error: function(xml){

alert('Error loading XML document'+xml);

async: false ,

success: function(xml){

$(xml).find("node").each(function(){

var nodeId=$(this).attr("nodeId");

var parentId=$(this).attr("parentId");

var nodeName=$(this).text();

var hrefAddress=$(this).attr("hrefAddress");

//alert(nodeName);//这里就是ID的值了。

//alert(nodeId+"/"+parentId+"/"+nodeName+"/"+hrefAddress);

jqueryDtree.add(nodeId,parentId,nodeName,hrefAddress,"","","","",false);

//alert(tree)

});

}

});

document.write(jqueryDtree);

</script>

<ul>

<li id="add"><img src="<%=request.getContextPath() %>/img/folder.gif"/> 增加</li>

<li id="upd"><img src="<%=request.getContextPath() %>/img/question.gif"/> 修改</li>

<li id="delete"><img src="<%=request.getContextPath() %>/img/delete.gif"/>删除</li>

</ul>

</div>

</body>

</html>