jstree树形结构

最新推荐文章于 2024-08-05 22:43:05 发布
最新推荐文章于 2024-08-05 22:43:05 发布
阅读量807 收藏 1
点赞数 1
文章标签： 前端 jquery jstree 树形结构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blingbling_123/article/details/98885198
版权

jstree树形结构

效果图

初始化效果
初始化效果
节点展开后
节点展开后
文件夹右击事件
文件夹右击事件
文件右击事件
文件右击事件

需要引用的文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

设置容器元素

<div id="jstree"></div>

.js代码

<script type="text/javascript">
    $(function(){
        //当DOM准备好时创建一个jstree实例
        $('#jstree').jstree({
            //core 存储核心的所有默认值
            'core' : {
                //如果保留为false，则防止创建、重命名、删除、移动或复制等操作
                "check_callback" : true,
                //data 数据配置:在这里可以传递HTML字符串或JSON数组
                'data' : [
                    {
                        'id' : 'ajson1',
                        'parent' : '#',//  #  根目录
                        'icon' : 'jstree-folder',//jstree-folder 文件夹图标(默认图标)
                        'text':'1',
                        "type":"level_1",
                        "state" :{
                            "opened" : true //默认打开文件夹
                        }

                    },
                    {
                        'id': 'ajson1.1',
                        'parent' : 'ajson1',
                        'text':'1.1',
                        "type":"level_1"
                    },
                    {
                        'id': 'ajson1.1.1',
                        'parent' : 'ajson1.1',
                        'icon' : 'jstree-file',//jstree-file 文件图标
                        'text':'1.1.1',
                        "type":"level_2"
                    },
                    {
                        'id': 'ajson1.1.2',
                        'parent' : 'ajson1.1',
                        'icon' : 'jstree-file',//jstree-file 文件图标
                        'text':'1.1.2',
                        "type":"level_2"
                    },
                    {
                        'id': 'ajson1.2',
                        'parent' : 'ajson1',
                        'text':'1.2',
                        "type":"level_1"
                    },
                    {
                        'id': 'ajson1.2.1',
                        'parent' : 'ajson1.2',
                        'text':'1.2.1',
                        "type":"level_1"
                    },
                    {
                        'id': 'ajson1.2.2',
                        'parent' : 'ajson1.2',
                        'text':'1.2.2',
                        "type":"level_1"
                    },
                    {
                        'id': 'ajson1.1.2.1.1',
                        'parent' : 'ajson1.2.1',
                        'icon' : 'jstree-file',//jstree-file 文件图标deng
                        'text':'1.1.2.1.1',
                        "type":"level_2"
                    },
                    {
                        'id': 'ajson1.3',
                        'parent' : 'ajson1',
                        'text':'1.3',
                        "type":"level_1"
                    },
                    {
                        'id': 'ajson1.1.3.1',
                        'parent' : 'ajson1.3',
                        'icon' : 'jstree-file',//jstree-file 文件图标deng
                        'text':'1.1.3.1',
                        "type":"level_2"
                    },
                    {
                        'id': 'ajson1.4',
                        'parent' : 'ajson1',
                        'text':'1.4',
                        "type":"level_1"
                    },
                    {
                        'id': 'ajson1.1.4.1',
                        'parent' : 'ajson1.4',
                        'icon' : 'jstree-file',//jstree-file 文件图标deng
                        'text':'1.1.4.1',
                        "type":"level_2"
                    },
                    {
                        'id': 'ajson1.5',
                        'parent' : 'ajson1',
                        'text':'1.5',
                        "type":"level_1"
                    },
                    {
                        'id': 'ajson1.5.1',
                        'parent' : 'ajson1.5',
                        'icon' : 'jstree-file',//jstree-file 文件图标
                        'text':'1.5.1',
                        "type":"level_2"
                    },
                    {
                        'id': 'ajson1.5.2',
                        'parent' : 'ajson1.5',
                        'icon' : 'jstree-file',
                        'text':'1.5.2',
                        "type":"level_2"
                    },
                    {
                        'id': 'ajson1.5.3',
                        'parent' : 'ajson1.5',
                        'icon' : 'jstree-file',
                        'text':'1.5.3',
                        "type":"level_2"
                    },
                    {
                        'id': 'ajson1.5.4',
                        'parent' : 'ajson1.5',
                        'icon' : 'jstree-file',
                        'text':'1.5.4',
                        "type":"level_2"
                    },
                    {
                        'id': 'ajson1.5.5',
                        'parent' : 'ajson1.5',
                        'icon' : 'jstree-file',
                        'text':'1.5.5',
                        "type":"level_2"
                    },
                    {
                        'id': 'ajson1.5.6',
                        'parent' : 'ajson1.5',
                        'icon' : 'jstree-file',
                        'text':'1.5.6',
                        "type":"level_2"
                    }
                ]
            },
            // plugins  存储所有已加载的jstree插件
            'plugins' : [
                'contextmenu',
                'types'
            ],
            'contextmenu' : {
                'items' : customMenu  //每个节点都会调用这个函数
            },
            'types' : {
                '#' : {  },
                'level_1' : {  },
                'level_2' : { }

            }
            //contextmenu 存储contextmenu插件的所有默认值
        });
    });
    function customMenu(node) {
        var items={
            'create': {
                'label': '增加文件夹',
                'action': function (obj) {
                    var inst = jQuery.jstree.reference(obj.reference);
                    var parentZNode = inst.get_node('', obj.reference); //获取父节点
                    var clickedNode = inst.get_node(obj.reference);
//                    alert(parentZNode);
                    /*
                       inst.create_node
                       参数1:父节点  参数2:新节点的数据
                       参数3: 1）first：当前节点下的头部新增节点
                              2）last：当前节点下的尾部新增节点
                              3）before：当前节点同级的上部新增节点
                              4）after：当前节点同级的下部新增节点
                       参数4:回调函数
                       参数5:Boolean类型,内部参数，指示父节点是否成功加载
                   */
                    var newNodeSame = inst.create_node(clickedNode,
                        {  // 'id': 'ajson1.1',
                            // 'parent' : 'ajson1',
                            'icon': 'jstree-folder',
                            'text': '新增文件夹'
                        }, 'first', function (node) {
                            //回调返回创建后点节点，给新节点改名
                            inst.edit(node, node.val);
                        }, '');
                }

            },
            'add': {
                'label': '新增分类',
                'action': function (obj) {
                    //reference获取当前选中节点的引用
                    var inst = jQuery.jstree.reference(obj.reference);
                    //通过get_node方法获取节点的信息，类似于实例对象
                    var clickedNode = inst.get_node(obj.reference);
                    /*
                        inst.create_node
                        参数1:父节点  参数2:新节点的数据
                        参数3: 1）first：当前节点下的头部新增节点
                               2）last：当前节点下的尾部新增节点
                               3）before：当前节点同级的上部新增节点
                               4）after：当前节点同级的下部新增节点
                        参数4:回调函数
                        参数5:Boolean类型,内部参数，指示父节点是否成功加载
                    */
                    var newNode = inst.create_node(clickedNode,
                        {    //'id': 'ajson20',
                            //'parent' : 'ajson2',
                            'icon': 'jstree-file',
                            'text': '新节点'
                        }, 'last', function (node) {
                            //回调返回创建后点节点，给新节点改名
                            inst.edit(node, node.val);
                        }, '');
                }
            },
            '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);
                }
            }
        }
//        console.log(node) 文件和文件夹右击显示不同菜单   不需要的进行隐藏
        if(node.type==='level_1'){

        }else if(node.type==='level_2'){
            delete items.create;
            delete items.add;
        }
        return items;    //注意要有返回值
    }
</script>
blingbling_123
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
BootStrap Jstree 树形菜单的增删改查的实现
10-20
主要介绍了BootStrap Jstree 树形菜单的增删改查的实现源码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
jsTree树形结构展示的简单使用总结
Sagitarioo的博客
03-27 3094
一、生成树形数据 官网下载js资源的时候，已经在里面包含demo,最基本的复制粘贴就好了。 说几个遇到的问题 1、后台数据动态生成树 如果是Json结构的字符串，需要转一下再传给data var jsonData=JSON.parse('${ujson}'); $('#data').jstree({ 'core' : { "check_callback" : true, '...
jstree树形结构的使用
进化的深山猿
06-24 4512
1js和css的下载和引入 下载地址： http://www.jstree.com/， api：https://www.jstree.com/api/#/?q=( 事件监听：https://www.jstree.com/api/#/?q=.jstree%20Event&f=deselect_all.jstree 翻译好的参考：https://blog.csdn.net/m0_...
jstree树形结构Api
水势年华的博客
11-15 2322
1. jsTree 核心功能（core functionality） 1.1. $.jstree 包含所有 jstree 相关的函数和变量，包括用于创建、访问、维护实例的类和方法。 + 1.2. $.jstree.version jstree 的版本号 + 1.3. $.jstree.defaults 包含用于创建新实例的默认配置 + 1.4. $.jstree.default...
JS tree树形结构父子操作
看陌生的风景的博客
11-18 507
【代码】JS tree树形结构父子操作。
前端jsTree树形结构使用以及复选框怎样默认选中
hehuan8363的博客
12-06 845
前端jsTree树形结构使用以及复选框怎样默认选中 引入 <link rel="stylesheet" href="css/plugins/jsTree/style.min.css"> //css文件 <script src="js/plugins/jsTree/jstree.min.js"></script> //js文件 //JS代码片段 $(funct...
js tree树形结构，通过子节点找到所有父节点
Lccccb的博客
04-26 1955
js tree树形结构，通过子节点找到所有父节点
js 组装树形结构数据
ChuanDD的博客
07-03 732
js 组装树形结构数据，组装树形用户数据，js 组装树形结构，js组装树形结构，js组装树形结构数据
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1590
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 509
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 257
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
【面试经验】滴滴 秋招储备实习 前端面经
最新发布
litterfinger的博客
08-05 275
时间线：5.15 11点半一面，下午2点半二面。● 不知道盒子宽高情况下水平垂直居中。● scale是怎么放大盒子宽高的。● transform的属性。滴滴秋招储备实习 前端面经。● 文件断点续传+切片上传。● 自我介绍+项目介绍。
文章相关接口
qq_74474809的博客
08-03 218
跟着黑马程序员学习SpringBoot3+Vue3
小程序支付（前端）
weixin_43993121的博客
08-05 108
【代码】小程序支付（前端）
vuex知识
qq_16570607的博客
08-04 328
将getMoviesRankingInDouban的action用promise包装一下, 在此次请求结束后, 根据此次请求返回的电影的id, 根据id再次请求电影的信息。数据请求,在action中, 根据传入的参数(数字1-250)异步请求电影数据, 在请求完成后提交mutation。例子：在action中, 根据传入的参数(数字1-250)异步请求电影数据, 在请求完成后提交mutation。状态更改,在mutation中,将查询的结果(传入的参数), 赋值给state中声明的变量。
【网页设计】基于HTML+CSS上海旅游网站网页作业制作
爱敲代码的卡拉米的博客
08-02 859
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
【前端面试】五、框架
weixin_49015558的博客
07-31 590
1 Vue2 2 Vue3 3 React 4 Angular
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2806
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
js tree - 树形菜单插件
10-29
Js tree是一款强大的树形菜单插件。它基于JavaScript开发，可以帮助我们轻松地创建和管理树状结构的菜单。这个插件提供了丰富的功能和选项，可以满足不同项目的需求。 首先，Js tree具有良好的扩展性，允许我们根据自己的需求进行定制。它提供了多种配置选项和API，可以自定义菜单的外观和行为。例如，我们可以设置节点的图标、背景颜色和样式，以及展开和折叠的动画效果等。 其次，Js tree支持异步加载数据。这对于大型树形菜单非常有用，它可以在需要的时候按需加载子节点，而不是一次性加载所有节点。这样可以减少初始化时间和资源占用，提高用户体验。 此外，Js tree还支持复选框和拖拽功能。复选框可以让用户一次性选择多个节点，用于批量操作。拖拽功能可以让用户轻松地调整节点的位置和层级，实现树的重新排序和结构调整。 最后，Js tree提供了丰富的事件和回调函数，可以让我们对菜单的各种操作进行监听和处理。例如，我们可以监听节点的点击、展开和折叠事件，以及复选框的勾选和取消勾选事件。这样可以方便地与后端交互，实现菜单的动态更新。 总的来说，Js tree是一款强大而灵活的树形菜单插件，具有丰富的功能和选项。无论是构建网站导航菜单，还是实现组织结构图等复杂的树状结构，Js tree都是一个理想的选择。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值