（JQuery）如何给JsTree生成的树的每个节点添加上自定义的右键菜单？
一个带有右键操作的树形菜单
$(document)ready(function(){$ajaxSetup({cache:false});
$("#browser")tree({
data : {
type : "json",
url : src,
async : true,
async_data : function (NODE) {
return { parent_Id : $(NODE)attr("id") || 0}
}
},
lang:{
loading:"目录加载中……"
},
rules:
{
draggable : "all" //这个设置可以使得节点进行拖动操作
},
ui:{
context : [ //自定义右键操作的可操作内容
{
id : "create",
label : "添加下级目录", //右键弹出菜单的此项操作屏显字样
visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); }, //允许节点被右击时出现操作菜单
icon : "<%=requestgetContextPath() %>/css/themes/default/createpng",//右键弹出菜单的此项操作图标
action : function (NODE, TREE_OBJ) {
//进行此项操作，将有这个函数事件被响应
}
},
"separator"//这个是在两个操作之间画一条分隔线
,
{
id : "edit",
label : "编辑目录信息",
visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },
icon : "<%=requestgetContextPath() %>/image/reg2gif",
action : function (NODE, TREE_OBJ) {
openWindow('myurl','','',function(){treeRefresh($(NODE)attr("id"));});
}
},
"separator"
,
{
id : "privilege",
label : "设置目录权限",
visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },
icon : "<%=requestgetContextPath() %>/css/themes/default/renamepng",
action : function (NODE, TREE_OBJ) {
openWindow('myurl','','',function(){treeRefresh($(NODE)attr("id"));});
}
},
"separator",
{
id : "delete",
label : "删除",
visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },
icon : "<%=requestgetContextPath() %>/css/themes/default/removepng",
action : function (NODE, TREE_OBJ) {
var tree=$tree_reference("browser");
openWindow('myurl','','',function(){
//下边的parent()和refresh()均为v098版本提供，如果你使用的是其他版本如v096等，这些将不被支持。
NODE=$(treeparent(NODE));
if($(NODE)attr("id")==undefined){
treerefresh();
}else{
TreeRefresh();
}
});
}
},
"separator",
{
id : "others",
label : "其他操作",
visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },
icon : "<%=requestgetContextPath() %>/css/images/cutpng",
action : function (NODE, TREE_OBJ) {
alert("暂无可提供操作。");
}
}
]
},
callback : {
onselect: function(node) {
//(a);
}
}
});
function treeRefresh(nodeid){
var rid=nodeid;
var tree=$tree_reference("browser");
var par_node=treeparent($("#"+rid));
treerefresh(par_node);
}
});
//缩起全部
$('tree > ul li')hide();
//展示第一个
$('tree > ul > li: first')show();
大概就是这样
下次问问题建议贴代码(htmlcssjs)，不要放，没法调试。。。
query ztree 当前父节点下增加子节点问题_点击事件增加子节点
一、功能描述：利用jQuery ztree31版本插件做导航树形菜单时，页面打开先加载二级菜单，通过点击事件，异步加载的方式，在添加当前父节点的子节点。
二、初始步骤：
1按照文档要求，导入jquery包，ztree插件包31版本；
2编写相应的jsp页面代码
三、遇到问题：
1、通过chrome调试的时候，提示：addNodes不是当前jquery对象treeObj的方法。但是在api文档里确实存在这个方法。
2、经过很长时间的摸索，开始把ztree-corejs插件换成高版本的，结果addNodes好用了，但是没有了菜单的图标，而且所有的都是异步加载。
四、解决问题：
原因：最后在32版本更新日志中，发现这么一句话：
修改代码结构，将 addNodes、removeNode、removeChildNodes 方法 和 beforeRemove、onRemove 回调 转移到 core 内。
最终领悟，原来32版本之前的addNodes。。。等一些方法在ztreeexeditjs中，而且在31文档中，方法前也有E字母标识。
所以只要引入jqueryztreeexedit-31js 包，即可解决这个问题。
五、总结
粗心浪费了好多时间，注意API中的小细节。
这是jqueryztree 各个版本的URL：http://codegooglecom/p/jquerytree/downloads/list，供大家参考。
六、jsp代码，只需要加入jqueryztreeexedit-31js ，url换了即可。
%@ page language="java" import="javautil" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Strict//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-strictdtd">
<html>
<head>
<title>机构维护</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/zTreeStyle/zTreeStylecss" type="text/css"/>
<script type="text/javascript" src="/jquery-142js"></script>
<script type="text/javascript" src="/jqueryztreecore-31js"></script>
<script type="text/javascript"
</head>
<body>
<div>
<ul id="orgTree" class="ztree" style="width:230px; overflow:auto;"></ul>
</div>
<script type="text/javascript">
//配置setting
var ztreeObj,
setting = {
async: {
enable: true,//开启异步加载模式
contentType: "application/json", //Ajax 提交参数的数据类型。
type: "post",
dataType: "text",//Ajax 获取的数据类型
"url" : "${pageContextrequestcontextPath}/org/makeOrgTreeaction",
//自动提交当前节点的id
//假设 异步加载 父节点(node = {id:1, name:"test"}) 的子节点时，将提交参数 id=1
autoParam: ["id"]
},
//Ajax 返回的数据格式中，页面主要参数的设置
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid",
rootPid: "0"
}
},
//树形图动作
view: {
expandSpeed: "fast", //节点展开的速度
selectedMulti: false //设置是否允许同时选中多个节点。
},
//回调函数的设置
callback: {
onClick: zTreeOnClick //点击事件，当点击节点，做的事情。
}
};
/
初始化树形菜单
/
$(function(){
ztreeObj = $fnzTreeinit($("#orgTree"),setting);
});
//点击事件的处理
function zTreeOnClick(event,treeId,treeNode){
pid =treeNodeid;
var data = {"orgid":pid};
$ajax({
url:"${pageContextrequestcontextPath}/org/makeOrgTreeAgainaction",
type: "post",
dataType: "json",
data: data,
cache: false,
success: function(jsonArray){
var treeObj = $fnzTreegetZTreeObj("orgTree");
treeObjaddNodes(treeNode,jsonArray);
}
});
}
</body>
</html>
（JQuery）如何给JsTree生成的树的每个节点添加上自定义的右键菜单？
本文2023-11-29 16:07:06发表“资讯”栏目。
本文链接：https://www.lezaizhuan.com/article/580693.html
相关文章
