jquery jstree实现带右键菜单的目录树结构效果代码

代码语言:html

所属分类:其他

代码描述:jquery jstree实现带右键菜单的目录树结构效果代码

代码标签: 右键 菜单 目录树 结构 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Simple jsTree</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/themes/default/style.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jstree.js"></script>
    <script type="text/javascript">
        $(function () {

            var jsondata = [{
                "id": "ajson1", "parent": "#", "text": "我的文档"
            },
                {
                    "id": "ajson2", "parent": "#", "text": "我的图片"
                },
                {
                    "id": "ajson3", "parent": "ajson2", "text": "2019年拍的"
                },
                {
                    "id": "ajson4", "parent": "ajson2", "text": "2020年拍的"
                },
            ];

            createJSTree(jsondata);
        });

        function createJSTree(jsondata) {
            $('#SimpleJSTree').jstree({
                "core": {
                    "check_callback": true,
                    'data': jsondata

                },
                "plugins": ["contextmenu"],
                "contextmenu": {
                    "items": function ($node) {
                        var tree = $("#SimpleJSTree").jstree(true);
                        return {
                            "Create": {
                                "separator_before": false,
                                "separator_after": true,
                                "label": "新建",
                                "action": false,
                                "submenu": {
                                    "File": {
                                        "seperator_before": false,
                                        "seperator_after": false,
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0