（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);

}

});

jsp从mysql数据库读取数据，并填充到树形结构菜单并展现出来的实现方法：

1、引入jquerytreeviewjs树控件

<script type="text/javascript" src="jquery/easyui/jqueryminjs"></script>

 <script type="text/javascript" src="jquery/easyui/jqueryeasyuiminjs"></script>

2、jsp页面中获取后台mysql数据，并传到jsp页面来

<% 

// 数据库的名字

String dbName = "zap";

// 登录数据库的用户名

String username = "sa";

// 登录数据库的密码

String password = "123";

// 数据库的IP地址，本机可以用 localhost 或者 127001

String host = "127001";

// 数据库的端口，一般不会修改，默认为1433

int port = 1433;

String connectionUrl = "jdbc:sqlserver://" + host + ":" + port + ";databaseName=" + dbName + ";user=" + username

+ ";password=" + password;

//

//声明需要使用的资源 

// 数据库连接，记得用完了一定要关闭

Connection con = null;

// Statement 记得用完了一定要关闭

Statement stmt = null;

// 结果集，记得用完了一定要关闭

ResultSet rs = null;

try {

// 注册驱动 

ClassforName("commicrosoftsqlserverjdbcSQLServerDriver");

// 获得一个数据库连接

con = DriverManagergetConnection(connectionUrl);

String SQL = "SELECT from note";

// 创建查询

stmt = concreateStatement();

// 执行查询，拿到结果集

rs = stmtexecuteQuery(SQL);

while (rsnext()) {

%>

<tr>

3、填充树形菜单：

{

 id          : "string" // will be autogenerated if omitted

 text        : "string" // node text

 icon        : "string" // string for custom

 state       : {

   opened    : boolean  // is the node open

   disabled  : boolean  // is the node disabled

   selected  : boolean  // is the node selected

 },

 children    : []  // array of strings or objects

 li_attr     : {}  // attributes for the generated LI node

 a_attr      : {}  // attributes for the generated A node

}

$('#tree')jstree({

   'core' : {

       'data' : function (obj, cb) {

           cbcall(this,

             ['Root 1', 'Root 2']);

       }

   }});

择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代码中，首先使用attr()方法获取某元素的class，然后使用addClass()方法为另一个元素添加这个class，或者使用attr()方法为另一个元素的class赋值。下面进行实例演示:

1、新建一个HTML文件，输入如下的HTML结构。为了演示本问题，假设了一个带有背景色样式的A元素和一个红色的B元素，实现在点击按钮后将A元素的类样式（背景色）应用到B元素上。

<style>

red{color:red !important;} /红色css样式/

bg_green{background:#00cc00;} /背景色类样式/

</style>

<div id="test">

<div id="a" class="bg_green">A（我是bg_green类）</div>

<div id="b" class="red">B（我是red类）</div>

</div>

<input type="button" id="btn" value="获取A的class并应用到元素B">

2、在上面建立的文件的开头部分加入如下的jquery代码（主要步骤参见注释）：

<script>

$(function(){

$("#btn")click(function() { //点击按钮后响应下面的事件

var cls = $("#a")attr("class"); // 首先使用attr()获取A元素的类（即bg_green）

$("#b")addClass(cls); // 然后将获取的类应用到B元素上

});

});

</script>

3、保存文件，然后使用浏览器打开即可显示效果。

var tree = jQueryjstreereference("#jstree");

treerefresh();

请参考这个国外的网址： >

以上就是关于（JQuery）如何给JsTree生成的树的每个节点添加上自定义的右键菜单全部的内容，包括:（JQuery）如何给JsTree生成的树的每个节点添加上自定义的右键菜单、jsp怎么从mysql数据库把树形结构展现出来、怎么把字符串赋值给treeNodes等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！