(JQuery)如何给JsTree生成的树的每个节点添加上自定义的右键菜单?

(JQuery)如何给JsTree生成的树的每个节点添加上自定义的右键菜单?,第1张

一个带有右键 *** 作的树形菜单

$(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)

}

})

<!DOCTYPE HTML>

<html>

<title>38</title>

<head>

<style>

div{

    width:500px

    height:500px

    background-color:#aabbcc

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<div></div>

<button>trigger</button>

</body>

<script>

$(function(){

    $('div').mousedown(function(event, a){

        if(event.which == 1 || a == 'left'){

            alert('left click')

        }

        if(event.which == 3 || a == 'right'){

            alert('right click')

        }

    })

    $('button').click(function(){

        $('div').trigger('mousedown', ['right'])

    })

})

</script>

</html>

这是最简单的办法,

还可以给div加data来进行判断, 适用于比较复杂的数据结构的时候

得先分清楚这两个东西都是什么。

javascript(js)

JS脚本语言是在浏览器客户端执行的语言。

要澄清一个概念就是 你所上网的浏览器(如IE)=客户端。

比如:单击某网页的右键菜单,点击“查看源文件”,Ctrl+F查找一下JavaScript代码,会找到这样一句话:

<script language="JavaScript">...</script>

这段代码就是JavaScript代码。

jquery(jq)是一个轻量级的javascript(js)库,而不是一门单独的语言。即它是基于js封装而成的,也就是使用用javascript语言编写的一套函数库。

jq封装了许多 *** 作HTML节点、动画等常用函数,可以直接调用而不用费心费力的去自己编写原生的js代码。

因此,如果单纯从易学角度来看的话,jq好学一些,但是如果没有任何javascript语言基础的话,可能使用起来简单,但是不能深入理解~ 遇到一些疑难问题自己解决起来就费劲了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11329870.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存