jquery 竖向实现组织结构图，自定义样式

q290108231

于 2019-01-07 10:02:05 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/q290108231/article/details/85986632

这篇博客分享了如何利用jQuery实现竖向的组织结构图，内容包括找到的解决方案和简洁的代码实现，适合需要展示类似二叉树形式结构的场景。

网上找了很多都是简单的展示一条数据，或者不是类似二叉树形式的展示。

在放弃的时间终于找到合适的，直接上图

代码实现超级简单

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>Organization Chart Plugin</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/jquery.orgchart.css">
    <link rel="stylesheet" href="css/style.css">
    
</head>

<body>
    <div id="chart-container"></div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.orgchart.js"></script>
    <script type="text/javascript">
        $.get("http://member.weikang.com/member/api/MiMember/test.ashx?MemberNo=12", function (data) {
                var datascource = data.data[0]