（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(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); }, //允许节点被右击时出现 *** 作菜单

                icon    : "<%=requestgetContextPath() %>/css/themes/default/createpng",//右键d出菜单的此项 *** 作图标

                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_2')jstree({

'plugins': ["wholerow", "checkbox", "types"],

'core': {

"themes" : {

"responsive": false

},

'data': [{

"text": "Same but with checkboxes",

"children": [{

"text": "initially selected",

"state": {

"selected": true

}

}, {

"text": "custom icon",

"icon": "fa fa-warning icon-state-danger",

"state": {

"selected": true

}

}, {

"text": "initially open",

"icon" : "fa fa-folder icon-state-default",

"state": {

"opened": true

},

"children": ["Another node"]

}, {

"text": "custom icon",

"icon": "fa fa-warning icon-state-warning"

}, {

"text": "disabled node",

"icon": "fa fa-check icon-state-success",

"state": {

"disabled": true

}

}]

},

"And wholerow selection"

]

},

"types" : {

"default" : {

"icon" : "fa fa-folder icon-state-warning icon-lg"

},

"file" : {

"icon" : "fa fa-file icon-state-warning icon-lg"

}

}

});

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

$(document)ready(function(){

var idsstr = "";

var isc = "";

$("#a input[name=chkId]")each(function(){ //遍历table里的全部checkbox

idsstr += $(this)val() + ","; //获取所有checkbox的值

if($(this)attr("checked")) //如果被选中

isc += $(this)val() + ","; //获取被选中的值

});

if(idsstrlength > 0) //如果获取到

idsstr = idsstrsubstring(0, idsstrlength - 1); //把最后一个逗号去掉

if(isclength > 0) //如果获取到

isc = iscsubstring(0, isclength - 1); //把最后一个逗号去掉

alert("所有checkbox的值：" + idsstr);

alert("被选中checkbox的值：" + isc);

});

择ztree替代jstree是因为ztree的官网的api文档详细，容易理解。

下面说下在开发中ztree的2个功能的实现

1、给树赋值如下图

代码如下：

//修改-人员管理

function achievementmag_peopedit_click(id){

achievementmag_peop_add=false;

achievementmag_peop_validformresetForm();

//以下代码实现树赋值

var treeObj = $fnzTreegetZTreeObj("achievementmag_peop_structure");//根据 treeId 获取 zTree 对象

var node=treeObjgetNodeByParam("id",id, null);//根据节点数据的属性(id)获取条件完全匹配的节点数据 JSON 对象集合

treeObjselectNode(node,false);//根据节点数据选中指定节点,false表示单独选中，之前选中的节点会被取消选中状态，为true 表示追加选中

以上就是关于（JQuery）如何给JsTree生成的树的每个节点添加上自定义的右键菜单全部的内容，包括:（JQuery）如何给JsTree生成的树的每个节点添加上自定义的右键菜单、jstree从后台取数据加载后，在前台为什么展开不了节点，急啊···在线等、请教关于jstree展开节点加载子节点问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！