问题

写【草书文档】这个应用的时候用到了目录树,相关配置挺多的,留存一下。
jstree中文官网
jsttee英文官网
英文官网要比中文的版本高一些,所以用要用github最新版的,看文档就都差不多了。

代码解析

$("#menu").jstree({
                    "core": {
                        "check_callback" : true,
                        "themes": {"stripes": true},
                        "data": d.menu
                    },
                    contextmenu   : {
                        items : function(node){
                            let menu = {
                                createCatalog  : {
                                    label   : "新建目录",
                                    icon    : "fa fa-folder-open",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.create_node(obj, {type:"catalog"}, "last", function (new_node) {
                                            console.log(new_node)
                                            try {
                                                new_node.text="新建目录";
                                                inst.edit(new_node);
                                            } catch (ex) {
                                                setTimeout(function () { inst.edit(new_node); },0);
                                            }
                                        })
                                    }
                                },
                                createPage : {
                                    label: "新建文档",
                                    icon: "fa fa-file-o",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.create_node(obj, {type:"page"}, "last", function (new_node) {
                                            console.log(new_node)
                                            try {
                                                new_node.text="新建文档";
                                                inst.edit(new_node);
                                            } catch (ex) {
                                                setTimeout(function () { inst.edit(new_node); },0);
                                            }
                                        })
                                    }
                                },
                                rename  : {
                                    label: "重命名",
                                    icon: "fa fa-share",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.edit(obj);
                                    }
                                },
                                delete  : {
                                    label: "删除",
                                    icon: "fa fa-times",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        if(inst.is_selected(obj)) {
                                            inst.delete_node(inst.get_selected());
                                        } else {
                                            inst.delete_node(obj);
                                        }
                                    }
                                },
                            }
                            if(node.type == "page"){
                                // 文档-重命名、删除
                                delete menu.createCatalog;
                                delete menu.createPage;
                            }
                            return menu;
                            
                        }
                    },
                    types : {
                        root    : {
                            icon  : "fa fa-home",
                            valid_children : ["catalog","page"]
                        },
                        catalog   : {
                            icon  : "fa fa-folder-open",
                            valid_children : ["catalog","page"]
                        },
                        page      : {
                            icon  : "fa fa-file-o",
                            valid_children : []
                        }
                    },
                    plugins : ["contextmenu", "dnd", "search","state", "types", "wholerow"]
                }).on("changed.jstree",function(e,d){
                    // console.log(d)
                    // if(d.node.children.length == 0 && d.node.original.type == "page"){
                    //     console.log(d.node.id)
                    // }
                });

本文由 管理员 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

只有地板了

  1. gluilacftb
    gluilacftb

    2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
    新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
    新车首发,新的一年,只带想赚米的人coinsrore.com
    新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
    做了几十年的项目 我总结了最好的一个盘(纯干货)coinsrore.com
    新车上路,只带前10个人coinsrore.com
    新盘首开 新盘首开 征召客户!!!coinsrore.com
    新项目准备上线,寻找志同道合的合作伙伴coinsrore.com
    新车即将上线 真正的项目,期待你的参与coinsrore.com
    新盘新项目,不再等待,现在就是最佳上车机会!coinsrore.com
    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹!coinsrore.com

添加新评论