js前端使用jOrgChart插件實現組織架構圖的展現

時間 2019-11-30

標籤前端使用 jorgchart 插件實現組織架構展現欄目 JavaScript 简体版

原文原文鏈接

1、說明

（1）經過後臺查詢數據庫，生成樹形數組結構，返回到前臺。javascript

（2）須要引入的js插件和css文件：css

①jquery.jOrgChart.csshtml

②jquery.min.jsjava

③jquery.jOrgChart.jsnode

（3）使用jOrgChart插件，根據返回的數據將其子節點加入到相應的<li></li>中。mysql

首先，咱們的數據表應該要有 id（節點），pid（父節點的id），name的字段，jquery

那麼咱們要把這個數組轉爲樹形數組結構，即將各個元素放在 pid 父類元素的 childrens字段中，下面就是簡單生成樹形數組的代碼。至於展現出來的樣式，能夠在html頁面中添加自定義樣式覆蓋它以前的樣式。ajax

注意：sql

後臺返回的數據格式必須以下，其中id，pid字段爲必需要有。childrens字段也爲必須的，不過字段名能夠本身定義，name字段是根據本身業務需求的字段，在這裏以name字段做爲要顯示的文本內容：數據庫

{
  "data": [{
    "id": 1,
    "name": "企業主體信用得分",
    "pid": null,
    "childrens": [
      {
        "id": 2,
        "name": "企業素質",
        "pid": 1,
        "childrens": [
          {
            "id": 5,
            "name": "基本信息",
            "pid": 2,
            "childrens": [
              {
                "id": 10,
                "name": "企業主體信息識別",
                "pid": 5,
                "childrens": [
                ]
              },
              {
                "id": 11,
                "name": "企業持續註冊時間",
                "pid": 5,
                "childrens": [
                ]
              },
              {
                "id": 12,
                "name": "註冊資本",
                "pid": 5,
                "childrens": [
                ]
              }
            ]
          },
          {
            "id": 6,
            "name": "管理認證",
            "pid": 2,
            "childrens": [
              {
                "id": 13,
                "name": "國際性管理認證",
                "pid": 6,
                "childrens": [
                ]
              }
            ]
          }
        ]
      },
      {
        "id": 3,
        "name": "履約記錄",
        "pid": 1,
        "childrens": [
          {
            "id": 7,
            "name": "稅務執行狀況",
            "pid": 3,
            "childrens": [
              {
                "id": 14,
                "name": "是否按時繳納稅款",
                "pid": 7,
                "childrens": [
                ]
              }
            ]
          },
          {
            "id": 8,
            "name": "網貸狀況",
            "pid": 3,
            "childrens": [
              {
                "id": 15,
                "name": "網貸逾期",
                "pid": 8,
                "childrens": [
                ]
              }
            ]
          }
        ]
      },
      {
        "id": 4,
        "name": "公共監督",
        "pid": 1,
        "childrens": [
          {
            "id": 9,
            "name": "行政處罰",
            "pid": 4,
            "childrens": [
              {
                "id": 16,
                "name": "處罰信息",
                "pid": 9,
                "childrens": [
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]
}

2、實例：

一、json文件（test.json）（即後臺接口返回的json格式的數據）

{
  "data": [{
    "id": 1,
    "name": "企業主體信用得分",
    "pid": null,
    "childrens": [
      {
        "id": 2,
        "name": "企業素質",
        "pid": 1,
        "childrens": [
          {
            "id": 5,
            "name": "基本信息",
            "pid": 2,
            "childrens": [
              {
                "id": 10,
                "name": "企業主體信息識別",
                "pid": 5,
                "childrens": [
                ]
              },
              {
                "id": 11,
                "name": "企業持續註冊時間",
                "pid": 5,
                "childrens": [
                ]
              },
              {
                "id": 12,
                "name": "註冊資本",
                "pid": 5,
                "childrens": [
                ]
              }
            ]
          },
          {
            "id": 6,
            "name": "管理認證",
            "pid": 2,
            "childrens": [
              {
                "id": 13,
                "name": "國際性管理認證",
                "pid": 6,
                "childrens": [
                ]
              }
            ]
          }
        ]
      },
      {
        "id": 3,
        "name": "履約記錄",
        "pid": 1,
        "childrens": [
          {
            "id": 7,
            "name": "稅務執行狀況",
            "pid": 3,
            "childrens": [
              {
                "id": 14,
                "name": "是否按時繳納稅款",
                "pid": 7,
                "childrens": [
                ]
              }
            ]
          },
          {
            "id": 8,
            "name": "網貸狀況",
            "pid": 3,
            "childrens": [
              {
                "id": 15,
                "name": "網貸逾期",
                "pid": 8,
                "childrens": [
                ]
              }
            ]
          }
        ]
      },
      {
        "id": 4,
        "name": "公共監督",
        "pid": 1,
        "childrens": [
          {
            "id": 9,
            "name": "行政處罰",
            "pid": 4,
            "childrens": [
              {
                "id": 16,
                "name": "處罰信息",
                "pid": 9,
                "childrens": [
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]
}

二、html頁面(test.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jOrgChart異步加載</title>
    <link rel="stylesheet" href='jquery.jOrgChart.css'/>
    <script type='text/javascript' src='jquery.min.js'></script>
    <script type='text/javascript' src='jquery.jOrgChart.js'></script>
    <style>
        a {
            text-decoration: none;
            color: #fff;
            font-size: 12px;
        }
        .jOrgChart .node {
            width: 120px;
            height: 50px;
            line-height: 50px;
            border-radius: 4px;
            margin: 0 8px;
        }
    </style>
</head>
<body>
<!--顯示組織架構圖-->
<div id='jOrgChart'></div>


<script type='text/javascript'>
    $(function(){
        //數據返回
        $.ajax({
            url: "test.json",
            type: 'GET',
            dataType: 'JSON',
            data: {action: 'org_select'},
            success: function(result){
                var showlist = $("<ul id='org' style='display:none'></ul>");
                showall(result.data, showlist);
                $("#jOrgChart").append(showlist);
                $("#org").jOrgChart( {
                    chartElement : '#jOrgChart',//指定在某個dom生成jorgchart
                    dragAndDrop : false //設置是否可拖動
                });

            }
        });
    });

    function showall(menu_list, parent) {
        $.each(menu_list, function(index, val) {
            if(val.childrens.length > 0){

                var li = $("<li></li>");
                li.append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
                //遞歸顯示
                showall(val.childrens, $(li).children().eq(1));
            }else{
                $("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").appendTo(parent);
            }
        });

    }

</script>
</body>
</html>

Tp3admin的html代碼

{extend name='admin@public/content'}

{block name="content"}
<head>
    <meta charset="utf-8">
    <title>jquery組織架構插件-jOrgChart.js | jQuery特效|手機微信網站特效| 網頁特效庫</title>
    <link rel="stylesheet" href="/static/jorgcharts/css/jquery.jOrgChart.css"/>
    <link href="/static/jorgcharts/css/prettify.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="/static/jorgcharts/css/cus.css"/>
    <script type="text/javascript" src="/static/jorgcharts/prettify.js"></script>
    <script type="text/javascript" src="/static/jorgcharts/jquery-ui.min.js"></script>
    <script src="/static/jorgcharts/jquery.jOrgChart.js"></script>
    <script>
        jQuery(document).ready(function() {
            $("#org").jOrgChart({
                chartElement : '#chart',
                dragAndDrop  : true
            });
        });
    </script>

        <style>

    </style>

</head>

<!--顯示組織架構圖-->
<div id='jOrgChart'></div>


<script type='text/javascript'>
    $(function(){
        //數據返回
        $.ajax({
            url: '{:url("$classuri/return_json")}',
            type: 'GET',
            dataType: 'JSON',
            data: {action: 'org_select'},
            success: function(result){
                var showlist = $("<ul id='org' style='display:none'></ul>");
                console.log(result.data);
                showall(result.data, showlist);
                $("#jOrgChart").append(showlist);
                $("#org").jOrgChart( {
                    chartElement : '#jOrgChart',//指定在某個dom生成jorgchart
                    dragAndDrop : false //設置是否可拖動
                });

            }
        });
    });

    function showall(menu_list, parent) {
        $.each(menu_list, function(index, val) {
            if(val.childrens.length > 0){

                var li = $("<li></li>");
                li.append("<a href='javascript:void(0)'  >"+val.id+val.user_name+"</a>").append("<ul></ul>").appendTo(parent);
                //遞歸顯示
                showall(val.childrens, $(li).children().eq(1));
            }else{
                $("<li></li>").append("<a href='javascript:void(0)'  >"+val.id+val.user_name+"</a>").appendTo(parent);
            }
        });

    }

</script>
</body>


{/block}