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

                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",//右键d出菜单的此项 *** 作图标

                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)

}

})

jstree默认打开有两种方式，一种在生成树结构时在有子节点的li中加class="jstree-open"还有一种是树形载入完成后用jstree的所有节点open_all事件所有节点跳转是要在生成时在li中加XXX或在载入完后再用js加载

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()这样就得到了所有的选中节点。

---