jquery.orgchart.js 简单demo,自定义内容，自定义事件

最新推荐文章于 2024-04-20 09:50:35 发布

吕驴驴

最新推荐文章于 2024-04-20 09:50:35 发布

阅读量2.2k

点赞数

分类专栏：前端插件文章标签：插件 demo 自定义 orgchart

本文链接：https://blog.csdn.net/weixin_44369335/article/details/102474392

版权

前端插件专栏收录该内容

18 篇文章 1 订阅

订阅专栏

在这里插入图片描述

orgchart简单demo

GIT地址： https://github.com/Vlovely/orgchartDemo.git

预览图

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Organization Chart Plugin</title>
  <link rel="icon" href="img/logo.png">
  <link rel="stylesheet" href="css/jquery.orgchart.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="font/iconfont.css">
  <style>
    /* 取消默认箭头 不标准。官网给出的用js修改class类名方法*/
    .edge{display: none;}
  </style>
</head>
<body>
  <div id="chart-container"></div>

  <script type="text/javascript" src="font/iconfont.js"></script>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.orgchart.js"></script>
  <script type="text/javascript" src="js/jquery.mockjax.min.js"></script>
  <script type="text/javascript">
  $(function() {
    // 模拟请求数据
    $.mockjax({
      url: '/orgchart/children',
      contentType: 'application/json',
      responseTime: 1000,
      responseText: { 'children': [
        { 'id': 'id6', 'title': '二2-三1', 'type': '2' },
        { 'id': 'id7', 'title': '二2-三2', 'type': '2' }
      ]}
    });
    // 默认数据
    var datascource = {
      'id': 'id1',
      'title': '一',
      'type': '1',
      'relationship': '001', 
      //第一个字符代表当前节点是否具有父节点；
      //第二个字符代表当前节点有同级节点；
      //第三个字符代表当前节点是否有子节点。
      'children': [
        {'id': 'id2', 'title': '二1', 'type': '2' , 'children': [
          {
            'id': 'id3',
            'title': '二1-三1',
            'type': '3'
          }
        ]},
        {'id': 'id4', 'title': '二2', 'type': '2' },
        {'id': 'id5', 'title': '二3', 'type': '2' },
      ]
    };
    // HTML模板
    var nodeTemplate = function(data) {
      let iconName
      if (data.children && data.children.length > 0) {
        iconName = 'icon-suoxiao'
      } else {
        iconName = 'icon-fangda'
      }
      return `
      <img src="./img/avatar/${data.type}.jpg" style="width:100%" title="${data.title}"/>
      <span>${data.title}</span>
      <i class="iconfont ${iconName}" style="width:14px;height:14px;top:-4px;left:-4px;position:absolute;"></i>
      `;
    };
    // 初始化
    const oc = $('#chart-container').orgchart({
      'data' : datascource,
      'visibleLevel': '3', // 它表示在最开始的orgchart扩展到的级别。
      'nodeTemplate': nodeTemplate,
      'nodeId': 'id'
    });
    // 绑定点击事件
    $('#chart-container').delegate('.icon-suoxiao', 'click', function() {
      $(this).removeClass('icon-suoxiao').addClass('icon-fangda');
      $(this).parent().parent().parent().siblings().hide()
    })
    $('#chart-container').delegate('.icon-fangda', 'click', function() {
      if ($(this).parent().parent().parent().siblings().length > 0) {
        $(this).parent().parent().parent().siblings().show()
        $(this).removeClass('icon-fangda').addClass('icon-suoxiao');
      } else if ($(this).parent().attr('id') === 'id4') {
        let that = this
        $.post("/orgchart/children", function(res) {
          oc.addChildren($(that).parent(), res.children)
          $(that).removeClass('icon-fangda').addClass('icon-suoxiao');
        });
      }
    })
  });
  </script>
  </body>
</html>

吕驴驴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery.orgchart.js 简单demo,自定义内容，自定义事件

orgchart简单demoGIT地址： https://github.com/Vlovely/orgchartDemo.git预览图代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Organization Chart P...
复制链接

扫一扫