树形图

最新推荐文章于 2024-05-06 08:15:27 发布
最新推荐文章于 2024-05-06 08:15:27 发布
阅读量141 收藏
点赞数
分类专栏： js 文章标签： vue.js或js实现树形图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37605470/article/details/89818555
版权

先看效果
在这里插入图片描述

1.vue.js代码 下面是js代码

// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .chkbox-item {
            list-style: none;
        }

        .chkbox-icon, .chkbox-txt {
            cursor: pointer;
        }

        .chkbox-icon-more {
            display: none;
        }

        .chkbox-item.active > .chkbox-icon > .chkbox-icon-sort {
            display: none;
        }

        .chkbox-item.active > .chkbox-icon > .chkbox-icon-more {
            display: inline;
        }

        .chkbox-item > .chkbox-container {
            display: none;
        }

        .chkbox-item.active > .chkbox-container {
            display: block;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script rel="stylesheet" src="../../../static/vue/node_modules/vue/dist/vue.js"></script>
<script rel="stylesheet" src="../../../static/vue/node_modules/vue/dist/axios.js"></script>

<div id="app">
    <ul id="chkbox-container">
        <li class="chkbox-item chkbox-item1" v-for="item1 in list">
            <span class="chkbox-icon">
                <span class="chkbox-icon-sort">+</span>
                <span class="chkbox-icon-more">- </span>
            </span>
            <input class="chkbox-chkbx" type="checkbox">
            <span class="chkbox-txt">{{item1.name}}</span>
            <ul class="chkbox-container">
                <li class="chkbox-item chkbox-item2 active" v-for="item2 in item1.children">
                <span class="chkbox-icon">
                    <span class="chkbox-icon-sort">+</span>
                    <span class="chkbox-icon-more"> - </span>
                </span>
                    <input class="chkbox-chkbx" type="checkbox">
                    <span class="chkbox-txt">{{item2.name}}</span>
                    <ul class="chkbox-container">
                        <li class="chkbox-item chkbox-item3" v-for="item3 in item2.children">
                            <input class="chkbox-chkbx" type="checkbox" :id="item3.id">
                            <span class="chkbox-txt">{{item3.name}}</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <button @click="submit">提交</button>
</div>
</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            list: [],
            ids:[],
        },
        created: function () {
            this.getList();
        },
        methods: {
            getList: function () {
                var that = this;
                axios.post('/index/demo/datajson').then(function (response) {
                    var data = response.data.data;
                    that.list = data;
                    app.list;
                    setTimeout(function () {
                        that.eventsFn();
                    }, 20)
                })
            },
            eventsFn: function () {
                var that = this;
                // 展开/收起 事件
                $(".chkbox-icon,.chkbox-txt").on("click", function () {
                    var $this = $(this);
                    var $item = $this.closest(".chkbox-item");
                    $item.toggleClass("active");
                });
                // 设置点选 事件
                $(".chkbox-chkbx").on("change", function () {
                    var $this = $(this);
                    var $item = $this.closest(".chkbox-item");
                    var isChk = $this.prop("checked");
                    isChk ? $item.find(".chkbox-chkbx").prop("checked", true) : $item.find(".chkbox-chkbx").prop("checked", false);
                    $(".chkbox-item2").each(function () {
                        that.chkFn($(this));
                    });
                    $(".chkbox-item1").each(function () {
                        that.chkFn($(this));
                    })
                })
            },
            chkFn: function ($this) {
                var $chk = $this.find(">.chkbox-chkbx");
                var leng = $this.find(">.chkbox-container>.chkbox-item>.chkbox-chkbx:checked").length;
                leng ? $chk.prop("checked", true) : $chk.prop("checked", false);
            },
            submit:function () {
                var that = this;
                that.ids = [];
                $(".chkbox-item3 .chkbox-chkbx:checked").each(function () {
                    that.ids.push($(this).attr("id"));
                });
              //  console.log("ids : ",that.ids);
                console.log("ids : ",JSON.stringify(that.ids));
            }
        },

    });

    // 设置点选
    //    function chkFn($this) {
    //        var $chk = $this.find(">.chkbox-chkbx");
    //        var leng = $this.find(">.chkbox-container>.chkbox-item>.chkbox-chkbx:checked").length;
    //        leng ? $chk.prop("checked", true) : $chk.prop("checked", false);
    //    }

    // 设置事件
    //    function eventsFn() {
    //        // 展开/收起 事件
    //        $(".chkbox-icon,.chkbox-txt").on("click", function () {
    //            var $this = $(this);
    //            var $item = $this.closest(".chkbox-item");
    //            $item.toggleClass("active");
    //        });
    //        // 设置点选 事件
    //        $(".chkbox-chkbx").on("change", function () {
    //            var $this = $(this);
    //            var $item = $this.closest(".chkbox-item");
    //            var isChk = $this.prop("checked");
    //            isChk ? $item.find(".chkbox-chkbx").prop("checked", true) : $item.find(".chkbox-chkbx").prop("checked", false);
    //            $(".chkbox-item2").each(function () {
    //                chkFn($(this));
    //            });
    //            $(".chkbox-item1").each(function () {
    //                chkFn($(this));
    //            })
    //        })
    //    }
    //    eventsFn();

</script>
</html>

2.php接口代码

 public function dataJson()
    {
        $data = [
            [
                'id' => '1',
                'parent_id' => 0,
                'name' => 'iphone',
                'children' => [
                    [
                        'id' => '3',
                        'parent_id' => 1,
                        'name' => 'iphone-1',
                        'children'=>[
                            [
                                'id' => '5',
                                'parent_id' => 3,
                                'name' => 'iphone-1-1',
                            ],
                            [
                                'id' => '6',
                                'parent_id' => 3,
                                'name' => 'iphone-1-1',
                            ]
                        ]
                    ],
                    [
                        'id' => '4',
                        'parent_id' => 1,
                        'name' => 'iphone-2',
                        'children'=>[
                            [
                                'id' => '7',
                                'parent_id' => 4,
                                'name' => 'iphone-2-1',
                            ],
                            [
                                'id' => '8',
                                'parent_id' => 4,
                                'name' => 'iphone-2-1',
                            ]
                        ]
                    ],
                ]
            ],
            [
                'id' => '2',
                'parent_id' => 0,
                'name' => 'huawei',
                'children' => [
                    [
                        'id' => '9',
                        'parent_id' => 2,
                        'name' => 'huawei-1',
                        'children'=>[
                            [
                                'id' => '10',
                                'parent_id' => 9,
                                'name' => 'huawei-1-1',
                            ],
                            [
                                'id' => '11',
                                'parent_id' => 9,
                                'name' => 'huawei-1-1',
                            ]
                        ]
                    ],
                    [
                        'id' => '12',
                        'parent_id' => 2,
                        'name' => 'huawei-2',
                        'children'=>[
                            [
                                'id' => '13',
                                'parent_id' => 12,
                                'name' => 'huawei-2-1',
                            ],
                            [
                                'id' => '14',
                                'parent_id' => 12,
                                'name' => 'huawei-2-1',
                            ]
                        ]
                    ],
                ]
            ],
        ];

        echo  json_encode(['errorCode'=>0,'errorMsg'=>'ok','data'=>$data]);

    }
qq_37605470
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts树形图样式_echarts实现树形图绘制
weixin_42347671的博客
02-23 1596
$(function () {//本周详细信息var tree_echarts_id = 'tree_echarts';var tree_data = {{tree_data|safe}};echarts_tree(tree_echarts_id, tree_data);});//树形图function echarts_tree(id, data) {// 基于准备好的dom，初始化echarts...
echarts树形图样式_echarts的树形结构图及参数
weixin_39688856的博客
12-24 2656
官网代码：myChart.showLoading(); //显示Loading标志；var myChart = echarts.init(document.getElementById('页面中div的id'));$.get('data/asset/data/flare.json', function (data) {myChart.hideLoading(); //得到数据后隐藏Lo...
echarts 树形图
weixin_45804159的博客
01-11 2701
效果图： html:（script ：echarts.js 自己去官网下载） <div class="modal fade" id="treediagram" style="height: 900px;background: #00ceff"> <div id="container" style="height:600px;"></div> </div> js:(我这是点击按钮出现的) $('#btn_Grid_tr
IDE/在Visio中绘制树形图，模版搜索功能的使用
river.qu
05-06 1109
本文主要讲述在微软 Visio 中绘制树形图的方法，并顺便讲述了形状模版搜索功能的使用。
语言学句法分析树形图怎么画_科学网—《泥沙龙笔记：漫谈自动句法分析和树形图表达》 - 李维的博文...
weixin_39545269的博客
12-20 2957
我: 关键是，一个 real life robust parser 可能不能把所有句子 parse 对，但是每个完整句法树中间可以分解为n个binary的依存关系，然后可以数一数这n个关系中有多少的查准率和查全率。因为实际上在使用的过程中，极少真地用到全树matching，用的都是子树matching (subtree matching)，无论是SVO搜索还是SVO支持的图谱抽取，都是如此。在子树...
LabVIEW基础-树形图
weixin_43781045的博客
10-23 4929
labview 树形图
最小树形图-朱刘算法详解 +例题解析
pursuit的博客
08-17 5925
文章目录最小树形图定义和最小生成树的区别朱刘算法思想步骤流程展示算法实现例题 最小树形图 定义 对于有向图G=(V,E)G = (V,E)G=(V,E)，其中具有如下性质 GGG中不包含有向环。 存在一个根结点uuu，它不是任何弧的终点，而且uuu的其他顶点都恰好是唯一的一条弧的终点。 那么则称GGG是以uuu为根的树形图。 更笼统的讲，实际上就是有一颗不存在有向环的有向树，且除根结点uuu外的每个顶点都只有一条入边。 而最小树形图则是权值最小的那个。 这是一个最小树形图的例子。 和最小生成树的区别
语言学句法分析树形图怎么画_语言学树形图
weixin_39900206的博客
12-20 3089
树形图详细讲解1.Indicatethecategoryofeachwordinthefollowingsentences.a)Theoldladysuddenlyleft.DetANQualVb)Thecarstoppedattheendoftheroad.DetNVPDetNPDetNc)Thesnowmighth...
【机器学习实战】python中使用Matplotlib绘制树形图
ZhShy
02-04 2965
上一篇：决策树——构造决策树 文章目录Matplotlib注解使用文本注解绘制树节点测试构造注解树获取叶节点的数目和树的层数测试plotTree测试 Matplotlib注解 Matplotlib提供了一个非常有用的注解工具annotations，它可以在数据图形上添加文本注解。注解通常用于解释数据的内容。由于数据上面直接存在文本描述非常丑陋，因此工具内嵌支持带箭头的划线工具，使得我们可以在其他恰当的地方指向数据位置，并在此处添加描述信息，解释数据内容。如图3-4所示，在坐标（0.2, 0.1）的位置有一个
在vue中使用d3做一个动态加载的树形图
hello world
08-12 2150
树形图数据量可能会很大，一次性全部加载可能会有延迟，所以一开始只加载一层节点的数据，当我们点击节点去展开的子节点的时候，再通过请求去加载子节点的数据，并更新到树上 本demo中还添加了放大缩小、点击节点居中的功能，参考链接http://www.jq22.com/yanshi21370 注意：本demo用的d3版本是v3，用最新版有些功能无法使用 <script src="https://d3js.org/d3.v3.min.js"></script> 效果图
树形图工具
01-11
树形图工具是一种高效的数据可视化和组织方法，尤其在处理层次结构或逻辑关系时非常有用。在编程、项目管理、数据分析、语言学等多个领域中，它都能发挥重要作用。本篇文章将深入探讨树形图工具的功能、应用以及如何...
最小树形图_树形图权_最小树形图虚根_
10-02
在计算机科学和图论中，"最小树形图"（Minimum Spanning Tree, MST）是一个经典问题，它涉及寻找一个无向加权图中的边子集，这些边连接了图中的所有顶点，且该子集的总权重尽可能小。在解决这个问题时，通常会用到...
js实现树形图
09-03
在网页中实现树形图，可以帮助用户更好地理解和导航数据结构，如目录树、组织结构或层级关系。本篇将详细介绍如何使用JavaScript来创建树形图。 一、基本概念 树形图是一种非线性的数据结构，它由节点（或称为顶点...
Python如何生成树形图案
09-20
在Python编程中，生成树形图案是一种有趣且富有创意的应用，它可以用来展示数据结构或创建艺术作品。本篇文章将深入探讨如何使用Python结合Tkinter库来实现这一目标。Tkinter是Python的标准图形用户界面（GUI）库，...
zuixiaoshuxingtu.rar_最小树形图
09-22
最小树形图，也称为最小生成树，是图论中的一个重要概念，主要应用于网络优化问题，如设计最短路径、最低成本通信网络等。在这个压缩包文件“zuixiaoshuxingtu.rar”中，包含了一个名为“51CTO下载-最小树形图.txt”...
分包合同计量单.docx
07-13
分包合同计量单.docx
树莓派简介PPT课件.ppt
07-13
树莓派简介PPT课件.ppt
项目债务盘点明细表.docx
07-13
项目债务盘点明细表.docx
全网最热Python3入门+进阶 更快上手实际开发
最新发布
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
echarts树形图
02-01
ECharts是百度开源的一个基于JavaScript的可视化图表库，它提供了丰富的图表类型和交互功能，其中包括树形图(Tree Chart)。树形图是一种用于展示层级结构数据的图表，常用于组织结构、分类关系等场景。 在ECharts中，树形图可以通过配置项进行创建和定制。以下是创建树形图的一般步骤： 1. 引入ECharts库和主题文件： ```html <script src="echarts.min.js"></script> <script src="echarts-theme.js"></script> ``` 2. 创建一个具有指定宽度和高度的DOM容器： ```html <div id="chart" style="width: 600px; height: 400px;"></div> ``` 3. 初始化ECharts实例： ```javascript var chart = echarts.init(document.getElementById('chart')); ``` 4. 配置树形图的数据和样式： ```javascript var option = { series: [{ type: 'tree', data: [ { name: 'Node 1', children: [ { name: 'Node 1.1' }, { name: 'Node 1.2' } ] }, { name: 'Node 2', children: [ { name: 'Node 2.1' }, { name: 'Node 2.2' } ] } ] }] }; ``` 5. 将配置项设置给ECharts实例并渲染图表： ```javascript chart.setOption(option); ``` 以上是一个简单的树形图的创建过程，你可以根据实际需求进行更多的配置和样式调整。ECharts还提供了丰富的交互功能和扩展能力，可以通过配置项进行进一步的定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值