jsTree右键菜单事件

jsTree右键菜单事件

主要步骤详解：

1.导入js文件和css文件

/*导入css文件*/
<link rel="stylesheet" href="css/style.min.css"></link>
/*导入js文件*/
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jstree.min.js"></script>

2.编写显示位置

 <div id="jst"  style="background: #E0E0E0; border: 1px solid #E0E0E0; width: 240px; height: 800px;"></div>

3.初始化节点数据

/*初始化节点数据*/
var nodeTreeData=[{"id" : "people","text" : "人员","state" : { "opened" : true},"type" : "people",},
                       {"id" : "relate","text" : "关系","state" : { "opened" : true},"type" : "relate",} ];

4.使用jstree插件编写函数

    $('#jst').jstree(
            {
            /*core：表示jstree核心参数，主要设置两个data：也就是初始化时候jstree样子，check_callback：必须为true（否则增删改动作没有反应，这些动作都是需要回调。）*/
                "core" : {
                    "themes" : {
                        "stripes" : true
                    },
                    "check_callback" : true, // enable all modifications
                    "data" : nodeTreeData,                  
                },

                "types" : {
                    "default" : {

                    },
                    "people" : {
                        "icon" : "img/people.png",
                    },
                    "relate" : {
                        "icon" : "img/draw_line.png",
                    },
                /*plugins:表示你使用那些插件*/
                "plugins" : [ "dnd", "contextmenu", "types" ],
                /*contextmenu:就是右键菜单插件，items就是自定义右键菜单选项，label是右键菜单选项的名称。icon就是选项前面的图标，action点击选项触发事件*/
                "contextmenu" : {

                    "items" : {
                        "create" : {
                            "label" : "新增节点",
                            "action" : function(obj) {
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                var newNode = inst.create_node(obj.reference,clickedNode.val);
                                var ty = inst.get_type(obj.reference);
                                inst.set_type(newNode, ty);
                                var Nodeobj = inst.get_json(newNode);
                                var str = {
                                    "id" : Nodeobj.id,
                                    "text" : Nodeobj.text,
                                    "icon" : Nodeobj.icon,
                                    "type" : Nodeobj.type,
                                    "parentid" : clickedNode.id,
                                    "tablelist" : null
                                };
                                var selectedTab = $('#t_map').tabs('getSelected');
                                var pageTitle = selectedTab.panel('options').title;
                                $.post("lwy/createNode.do", {changedata : JSON.stringify(str),pageTitle:pageTitle}, 
                                        function(data) {});
                                inst.edit(newNode);
                                inst.open_node(obj.reference);
                            },
                        },
                        "rename" : {
                            "label" : "重命名",
                            "action" : function(obj) {
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                inst.edit(obj.reference,clickedNode.val);
                            }
                        },
                        "delete" : {
                            "label" : "删除节点",
                            "action" : function(obj) {
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                inst.delete_node(obj.reference);
                        },

                        }
                    }
                }   
            });

效果图：

---

关于contextmenu插件的各个属性的意义，你可以查看jstree官方文档·，了解更多。