jstree的基本使用例子

Posted 2020-11-10 人本善良

var menu = (function() {
    var _menu = {data:{},
        initMenu : function() {
            $.jstree.defaults.core.themes.variant = "large";
            $.jstree.defaults.core.themes.responsive = true;
            $.jstree.defaults.sort=function(a,b){
                return this.get_node(a).original.order > this.get_node(b).original.order ? 1 : -1;
            }
            var jsTree = $(\'#tree_1\').jstree(
                            {
                                \'core\' : {
                                    \'data\' :{
                                        \'url\':$.hr_contextUrl()+"menu/list",
                                        \'data\':function(node){
                                            return node;
                                        }
                                    }
                                },
                                \'plugins\':[\'contextmenu\',\'sort\'],
                                "contextmenu":{  
                                    "items":{  
                                        "create":null,  
                                        "rename":null,  
                                        "remove":null,  
                                        "ccp":null,  
                                        "新建菜单":{  
                                            "label":"新建菜单",  
                                            "action":function(data){
                                                var node = _menu.data.jsTree.jstree(\'get_node\',data.reference[0])
                                                var pid = node.parent;
                                                _menu.operation.addMenu(pid,node);
                                            }  
                                        },
                                        "删除菜单":{  
                                            "label":"删除菜单",  
                                            "action":function(data){
                                                var node = _menu.data.jsTree.jstree(\'get_node\',data.reference[0]);
                                                _menu.operation.delMenu(node);
                                            }  
                                        },
                                        "修改菜单":{  
                                            "label":"修改菜单",  
                                            "action":function(data){
                                                var node = _menu.data.jsTree.jstree(\'get_node\',data.reference[0]).original;
                                                _menu.operation.editMenu(node);
                                            }  
                                        },
                                        "上移菜单":{  
                                            "label":"上移菜单",  
                                            "action":function(data){
                                                var node = _menu.data.jsTree.jstree(\'get_node\',data.reference[0]);
                                                var prev_dom = $(data.reference[0]).closest("li").prev();
                                                _menu.operation.sortMenu(node,prev_dom);
                                            }  
                                        },
                                        "下移菜单":{  
                                            "label":"下移菜单",  
                                            "action":function(data){
                                                var node = _menu.data.jsTree.jstree(\'get_node\',data.reference[0]);
                                                var next_dom = $(data.reference[0]).closest("li").next();
                                                _menu.operation.sortMenu(node,next_dom);
                                            }  
                                        },
                                        "新建子菜单":{  
                                            "label":"新建子菜单",  
                                            "action":function(data){
                                                var node = _menu.data.jsTree.jstree(\'get_node\',data.reference[0]);
                                                var pid = node.id;
                                                _menu.operation.addMenu(pid,node);
                                            }  
                                        }
                                    }
                                }  
                            });
            this.data.jsTree=jsTree;
        },
        initEvent: function(){
            $("#closeMenu").click(function(){
                _menu.data.jsTree.jstree(\'close_all\');
            });
            _menu.data.jsTree.on(\'load_node.jstree\',function(){
                var root = _menu.data.jsTree.jstree(\'get_node\',"#");
                var children = _menu.data.jsTree.jstree("get_children_dom",root);
                var a = $("a",children);
                $.each(a,function(){
                    $(this).bind("contextmenu",function(){
                        var parent = _menu.data.jsTree.jstree(\'get_parent\',$(this));
                        if(parent!==\'#\'){
                            if(_menu.data.jsTree.jstree(true).settings.contextmenu.items["新建子菜单"]){
                                delete _menu.data.jsTree.jstree(true).settings.contextmenu.items["新建子菜单"];
                            }
                        }else{
                            if(!_menu.data.jsTree.jstree(true).settings.contextmenu.items["新建子菜单"]){
                                _menu.data.jsTree.jstree(true).settings.contextmenu.items["新建子菜单"]={  
                                    "label":"新建子菜单",  
                                    "action":function(data){
                                        var node = _menu.data.jsTree.jstree(\'get_node\',data.reference[0]);
                                        var pid = node.id;
                                        _menu.operation.addMenu(pid);
                                    }  
                                };
                            }
                        }
                    });
                });
                _menu.data.jsTree.jstree(\'select_node\',root.children[0]);
            });
            _menu.data.jsTree.on(\'select_node.jstree\',function(node,selected,event){
                $.get($.hr_contextUrl()+"menu/getMenu",{id:selected.node.id},function(data){
                    $("#menuForm").resetForm();
                    $("#menuForm").disableForm();
                    $("#menuForm").loader(data);
                    $("#menuForm [name=\'pMenuName\']").val(data.pMenu?(data.pMenu.text||\'\'):\'\');
                },"json")
            });
            $("#showMenu").click(function(){
                _menu.data.jsTree.jstree(\'open_all\');
            });
        },
        operation:{
            addMenu:function(pid,node){
                if(pid==="#"){
                    $("#menuForm [name=pid]").val("");
                }else{
                    $("#menuForm [name=pid]").val(pid);
                }
                $("#menuForm").resetForm();
                this.setOrder(pid);
                $("#menuForm").enableForm();
            },
            editMenu:function(node){
                $("#menuForm").resetForm();
                $("#menuForm").enableForm().loader(node);
            },
            sortMenu:function(node,dom){
                if(dom.length>0){
                    var otherNode = _menu.data.jsTree.jstree(\'get_node\',dom[0]);
                    $.post($.hr_contextUrl()+"menu/order",{"currId":node.id,"otherId":otherNode.id},function(){
                        _menu.operation.refresh();
                    },"json");
                }
            },
            setOrder:function(pid){
                var root = _menu.data.jsTree.jstree(\'get_node\',pid);
                var children = _menu.data.jsTree.jstree("get_children_dom",root);
                var lastNode = _menu.data.jsTree.jstree(\'get_node\',children[children.length-1]);
                $("#menuForm [name=\'order\']").val(lastNode.original.order+1);
            },
            refresh:function(){
                _menu.data.jsTree.jstree(\'refresh\');
                $("#menuForm .control-group").removeClass(\'success\')
            },
            delMenu:function(node){
                var children = _menu.data.jsTree.jstree("get_children_dom",node);
                if(children.length>0){
                    $.Zebra_Dialog(\'该菜单下还有子菜单不能删除！\', {
                        \'type\':     \'error\',
                        \'title\':    \'系统提示\'
                    });
                    return;
                }
                var id = node.id;
                $.Zebra_Dialog(\'您确认要删除该菜单么？\', {
                    \'type\':     \'question\',
                    \'title\':    \'系统提示\',
                    \'buttons\':  [
                                    {caption: \'确定\', callback: function() { 
                                            $.post($.hr_contextUrl()+"menu/delMenu",{\'id\':id},function(msg){
                                                new $.Zebra_Dialog(msg, {
                                                    \'buttons\':  false,
                                                    \'modal\': false,
                                                    \'position\': [\'right - 20\', \'bottom - 20\'],
                                                    \'auto_close\': 2500,
                                                    \'animation_speed_show\':500,
                                                    \'animation_speed_hide\':500,
                                                    \'onClose\':function(){
                                                        _menu.operation.refresh();
                                                    }
                                                });
                                            },\'json\');
                                    }},
                                    {caption: \'取消\'},
                                ]
                });
            }
        }
    };
    return {
        init:function(){
            _menu.initMenu();
            _menu.initEvent();
            _menu.initForm();
        }
    };
})();

 

 
这个是做好的效果图，代码中对contextmenu的数量做了调整，当用户点击一级菜单时 

当用户点击二级菜单时 

其实在jstree中，它将菜单项保存在了settings.contextmenu.items这个数组中，所以在用户右键的时候动态设置items就可以做到菜单的动态改变。

如果想获取到从后台传递的不属于jstree配置属性的值，可以查看节点的original属性，这个属性中存储的是这个节点所对应的所有数据。

比如：

@Entity
@Table(name = "t_menu")
public class Menu {

    private String id;
    private String text;
    private String url;
    private Menu pMenu;
    private String pid;
    private String icon;
    private State state;
    private Integer order;
    private String descr;
    private Set<Menu> children = new HashSet<Menu>();
    /**省略setter和getter*/
}

 

如果后台程序中与jstree的对应属性为 上面的类，实际上在前台通过jstree的get_node方法获取到这个节点, 
节点的original属性中就会有url,order,descr等值。