jquery.orgcharts插件的使用

最新推荐文章于 2024-09-13 21:46:11 发布

珊珊美眉

最新推荐文章于 2024-09-13 21:46:11 发布

阅读量2.8k

点赞数 2

分类专栏： jquery.orgcharts 前端插件文章标签： orgchart

本文链接：https://blog.csdn.net/small_33/article/details/107835141

版权

前端插件同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

jquery.orgcharts

1 篇文章 0 订阅

订阅专栏

珊妹又来给大家推荐好物了，哈哈~

首先官网资料：https://github.com/dabeng/OrgChart

官网上下载的是vue的项目哦，但是demo目录下的样例可以直接双击在浏览器访问，但是直接下载下来的样例里面引用的js/css路径都不对，你想看哪个样例需要改下里面引用文件的路径，因为是vue项目里面用的js是一些依赖包，那么我们双击打开看的话就需要自己去找一些js文件，珊妹遇到的问题是导出pdf,所以只改了这个文件

因为导出pdf，需要html2canvas和jspdf的支持，所以珊妹又去找了这两个资源，现在也提供给大家：

html2canvas官网：http://html2canvas.hertzen.com/

jspdf官网：https://parall.ax/products/jspdf

大家可以去下载，然后引入就可以：

引入的文件就是以上这几个，代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全景</title>
    <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="./js/orgchart/jquery.orgchart.min.css">
    <script type="text/javascript" src="./js/orgchart/jquery.orgchart.min.js"></script>
    <script src="./js/orgchart/html2canvas.min.js"></script>
    <script src="./js/orgchart/jspdf.min.js"></script>
</head>
<body>
    <div id='jOrgChart'></div>
    <script type='text/javascript'>
        var datascource = {
            'id': '1',
            'name': '顶层模型',
            'title': '非功能指标',
            'children': [{
                'id': '2',
                'name': '模型分组',
                'title': '运维架构设计'
            },
            {
                'id': '3',
                'name': '模型分组',
                'title': '应用容量',
                'children': [{
                    'id': '4',
                    'name': '一级分类',
                    'title': '基础容量',
                    'children': [{
                        'id': '6',
                        'name': '二级分类',
                        'title': '性能要求',
                        'children': [{
                            'id': '6',
                            'name': '具体指标',
                            'title': '业务计划',
                            },
                            {
                                'id': '7',
                                'name': '具体指标',
                                'title': '系统承载客户数及用户数'
                            },
                            {
                                'id': '7',
                                'name': '具体指标',
                                'title': '应用系统平均响应时间要求'
                            }]
                    },
                    {
                        'id': '7',
                        'name': '二级分类',
                        'title': '应用服务器启停'
                    }]
                },
                {
                    'id': '5',
                    'name': '一级分类',
                    'title': '资源容量',
                    'children': [{
                        'id': '6',
                        'name': '二级分类',
                        'title': '业务指标'
                    },
                    {
                        'id': '7',
                        'name': '二级分类',
                        'title': '资源阈值'
                    }]
                }]
            }]
        };
        
            $('#jOrgChart').orgchart({
                'data': datascource,
                'nodeContent': 'title',
                'nodeID': 'id',
                'visibleLevel':3, //默认展开几层
                // 'zoom':true, //鼠标滑动滚轮，放大缩小
                'direction':'l2r', //展示形式，从左到右
                // 'parentNodeSymbol':'font', //展示有子级，去掉则展示默认的
                'exportButton':true, //启用导出按钮
                'exportFileextension':'pdf',
                'exportFilename':'Myorgcharts',
                'createNode': function($node, data) {
                    var secondMenuIcon = $('<i>', {
                        'class': 'fa fa-info-circle second-menu-icon',
                        click: function() {
                            $(this).siblings('.second-menu').toggle();
                        }
                    });
                    var secondMenu = '<div class="second-menu"></div>';
                    $node.append(secondMenuIcon).append(secondMenu);
                },
            });
    </script>
</body>
</html>

结果截图：