正文
jquery的tree,jQuery用法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
（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(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); }, //允许节点被右击时出现操作菜单
icon : "%=request.getContextPath() %/css/themes/default/create.png",//右键弹出菜单的此项操作图标
action : function (NODE, TREE_OBJ) {
//进行此项操作，将有这个函数事件被响应
}
},
"separator"//这个是在两个操作之间画一条分隔线
,
{
id : "edit",
label : "编辑目录信息",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
icon : "%=request.getContextPath() %/image/reg2.gif",
action : function (NODE, TREE_OBJ) {
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
}
},
"separator"
,
{
id : "privilege",
label : "设置目录权限",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
icon : "%=request.getContextPath() %/css/themes/default/rename.png",
action : function (NODE, TREE_OBJ) {
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
}
},
"separator",
{
id : "delete",
label : "删除",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
icon : "%=request.getContextPath() %/css/themes/default/remove.png",
action : function (NODE, TREE_OBJ) {
var tree=$.tree_reference("browser");
openWindow('myurl','','',function(){
//下边的.parent()和.refresh()均为v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，这些将不被支持。
NODE=$(tree.parent(NODE));
if($(NODE).attr("id")==undefined){
tree.refresh();
}else{
TreeRefresh();
}
});
}
},
"separator",
{
id : "others",
label : "其他操作",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); },
icon : "%=request.getContextPath() %/css/images/cut.png",
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=tree.parent($("#"+rid));
tree.refresh(par_node);
}
});
相关问答
Q1: jquery的树形控件ztree怎么用怎么导入
zTree是最流行的一款jquery树形控件。 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步...
Q2: 如何使用jquery中tree下面的checkbox选中
在后台java中判断是否选中，选中就赋上"checked":true,如下面的：
[{
"id":4,
"text":"File3",
"attributes":{
"p1":"value1",
"p2":"value2"
},
"checked":true,
"iconCls":"icon-reload"
}]
如果是前台判断比较麻烦，在后台对json操作方便些
Q3: 如何通过js脚本获得jquery tree树节点的Id号
使用jQuery框架操作HTML DOM是一件极其便捷的事情，如下操作即可获取相应节点的数据，id和名字（下文中引用“$(this)”表示一个jQuery对象）：
获取节点标签内容数据： $(this).html( )
获取表单组件中的值： $(this).val()
获取节点中的文本内容（例如textarea）: $(this).text()
获取节点的id： $(this).attr("id")
获取节点的名字： $(this).attr("name")
