如何给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 : "添加下级目录", //右键d出菜单的此项 *** 作屏显字样

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn TREE_OBJ.check("creatable", NODE)}, //允许节点被右击时出现 *** 作菜单

icon: "<%=request.getContextPath() %>/css/themes/default/create.png",//右键d出菜单的此项 *** 作图标

action : function (NODE, TREE_OBJ) {

//进行此项 *** 作，将有这个函数事件被响应

}

},

"separator"//这个是在两个 *** 作之间画一条分隔线

,

{

id : "edit",

label : "编辑目录信息",

visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) return falsereturn 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 falsereturn 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 falsereturn 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 falsereturn 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)

}

})

1.1.创建一棵树

2.使用如下方式

3.var tree=new JsTree('DivId')

4.说明，html的body里面必须事先有id为'DivId'的层。

5.这棵树将在此渲染。

6.2.创建节点

7.var node1=new JsNode("nodeid")

8.树在以一始不能渲染，要渲染必须设置它的根

9.用下面的语法：

10.tree.setRoot(node1)// 这样就将node1设置成了它的根，div已经被渲染。

11.以后只要按照一棵树的形态加入节点就可以了。

12.如下所示：

13.var tree=new JsTree("div1")

14.var root=new JsNode("root")//root为节点的ID

15.root.text="刘u22791 "//设置节点显示的文本，也可以是超链接，html代码 等，要是不设置这个属性，树就显示它的Id

16.root.hasCheckBox=true//设置了这个属性以后，节点就还有一个CheckBox

17.tree.setRoot(root)//根节点的属性设置好以后才能将它给树对象

18.var n1=new JsNode("张u-26402 ")

19.var n2=new JsNode("关u32701 ")

20.var n3=new JsNode("赵u20113 ")

21.var n4=new JsNode("将")

22.var n5=new JsNode("将")

23.var n6=new JsNode("兵")

24.var n7=new JsNode("兵")

25.var n8=new JsNode("兵")

26.root.add(n1)

27.root.add(n2)

28.n2.add(n4)//这些方法，就将1个节点添加它的子节点

29.n2.add(n5)

30.n4.add(n6)

31.n4.add(n7)

32.n1.add(n8)

33.root.add(n3)

34.这样就能动态的构建树了

35.

36.下面提供一些全局API，直接使用这些方法

37.getAllTrees() 获得所有的树对象，一个html上面可能有很多树

38.getTreeByDivId(divid) 通过树注册的divId获得这棵树

39.getNodeById(nid) //通过节点Id，从所有的树中查找一个节点对象，找到就返回，找不到返回null

40.checkCbo(node) 选中这个节点的CheckBox

41.checkCboById(nodeid) 通过节点的Id来选中起CheckBox

42.cancelCbo(node) 取消对Checkbox的选中

43.cancelCboById(nid) 通过节点id取消对Checkbox的选中

44.closeThis(node) 关闭节点

45.openThis(node) 打开

46.closeNodeById(nid) 通过节点Id关闭

47.openNodeById(nid) 通过Id节点打开

48.

49.下面是树对象的API

50.getById(key) // getNodeById

51.removeNode(node) // 核心方法

52.getCheckedNodesXml() /// 对外 API

53.getCheckedNodes() /// 对外 API

54.showText()//////对外 API

55.showId()//对外 API

56.上面的方法 如此使用 var arr=tree.getCheckedNodes()这样就得到了所有的选中节点。

刚好我也碰到这个问题。bind("select_node.jstree", function (event, data) { //myThis.id 是jstree的Id,还有你必须设置每个节点的id

$('#' + myThis.id).jstree("toggle_node", "#"+data.rslt.obj.attr("id"))

})

---