OrgChart 组织架构与PHP结合使用

时间：2023-12-14 15:49:38

一、OrgChart下载地址：

https://github.com/dabeng/OrgChart
二、组织架构的表设计
CREATE TABLE `org_info` (

`id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '组织ID',

`name` varchar(36) NOT NULL DEFAULT '' COMMENT '组织名称',

`content` varchar(256) NOT NULL DEFAULT '' COMMENT '组织内容',

`pid` int(11) NOT NULL DEFAULT '0' COMMENT '父级ID',

`path` varchar(256) NOT NULL DEFAULT '' COMMENT '父级路径(逗号分割)',

PRIMARY KEY (`id`),

KEY `path` (`path`)

) ENGINE=MyISAM AUTO_INCREMENT=22 DEFAULT CHARSET=utf8 COMMENT='组织信息表';
三、index.html代码如下：
<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="./css/jquery.orgchart.css" />

    <style type="text/css">

    .orgchart {background-image:none; border: 1px dashed #ccc;}

    .orgchart td.left {border-left: 1px solid #518fcc;}

    .orgchart td.right {border-right: 1px solid #518fcc;}

    .orgchart td.top {border-top: 2px solid #518fcc;}

    .orgchart td>.down {background-color: #518fcc;}

    .orgchart .node .title {background-color:#518fcc;}

    .orgchart .node .content {border: 1px solid #518fcc;}

    </style>

</head>

<body>

    <div class="org-act">

        <form class="org-act-frm">

            <table>

                <tr>

                    <td>

                        当前节点：<input type="text" name="curNodeName" value="" />

                        <input type="hidden" name="curNodeId" value="" />

                    </td>

                    <td>部门名称：<input type="text" name="orgName" value="" /></td>

                </tr>

                <tr>

                    <td colspan="2">

                        <input type="radio" name="addOrgType" value="sub" />子部门

                        <input type="radio" name="addOrgType" value="sib" />同级部门

                    </td>

                </tr>

                <tr>

                    <td colspan="2">

                        <input type="button" name="addOrgAct" data="add" value="添加" />

                        <input type="button" name="addOrgAct" data="del" value="删除" />

                        <input type="button" name="addOrgAct" data="edt" value="编辑" />

                        <input type="reset" name="reset" value="重置" />

                    </td>

                </tr>

            </table>

        </form>

    </div>

    <div class="org"></div>

</body>

<script type="text/javascript" src="./js/jquery.js"></script>

<script type="text/javascript" src="./js/jquery.orgchart.js"></script>

<script type="text/javascript">

$(function() {

    $(".org-act-frm input[name='addOrgAct']").on("click", function() {

        var curNodeName = $.trim($(".org-act-frm input[name='curNodeName']").val());

        var curNodeId = $.trim($(".org-act-frm input[name='curNodeId']").val());

        var orgName = $.trim($(".org-act-frm input[name='orgName']").val());

        var addOrgType = $.trim($(".org-act-frm input[name='addOrgType']:checked").val());

        var addOrgAct = $.trim($(this).attr("data"));

        $.post("./data.php?act=orgFrm", {

            "curNodeName":curNodeName,

            "curNodeId":curNodeId,

            "orgName":orgName,

            "addOrgType":addOrgType,

            "addOrgAct":addOrgAct

        }, function(data) {

            if(data) {

                var org = $(".org");

                var selNode = $(".org .node").filter(".focused");

                if(!selNode.length) {

                    selNode = $(".org tr:eq(0)").find(".node");

                }

                data = eval("(" + data + ")");

                if(addOrgAct == "add") {

                    if(addOrgType == "sib") {

                        org.orgchart("addSiblings", selNode, {"siblings":[data]});

                    } else {

                        var hasChild = selNode.parent().attr('colspan') > 0 ? true : false;

                        if (!hasChild) {

                            org.orgchart("addChildren",

                            selNode,

                            {"children":[data]});

                        } else {

                            org.orgchart("addSiblings",

                            selNode.closest('tr').siblings('.nodes').find('.node:first'),

                            {"siblings":[data]});

                        }

                    }

                } else if(addOrgAct == "del") {

                    org.orgchart("removeNodes", selNode);

                } else if(addOrgAct == "edt") {

                    selNode.children(".title").text(orgName);

                }

            }

        });

    });

    $(".org").on("click", ".node", function() {

        var nodeId = $(this).attr("id");

        var nodeName = $(this).children("div.title").text();

        $(".org-act-frm input[name='curNodeId']").val(nodeId);

        $(".org-act-frm input[name='curNodeName']").val(nodeName);

    });

    function flushOrg() {

        $.get("./data.php?act=getData&r=" + Math.random(), function(data) {

            if(data) {

                data = eval("(" + data + ")");

            } else {

                data = {};

            }

            $(".org").orgchart({

                "data" : data,

                "nodeId": "id"

            });

        });

    }

    flushOrg();

});

</script>

</html>
四、data.php代码如下：
<?php

$db = mysql_connect('127.0.0.1', 'root', '') or die('connect error');

mysql_select_db('test') or die('select db error');

mysql_query('set names utf8') or die('set names error');

$act = !empty($_GET['act']) ? trim($_GET['act']) : '';

function genTree($items, $id = 'id', $pid = 'pid', $son = 'child') {

    $tree = array();

    $tmpMap = array();

    foreach ($items as $item) {

        $tmpMap[$item[$id]] = $item;

    }

    foreach ($items as $item) {

        if (isset($tmpMap[$item[$pid]])) {

            $tmpMap[$item[$pid]][$son][] = &$tmpMap[$item[$id]];

        } else {

            $tree[] = &$tmpMap[$item[$id]];

        }

    }

    unset($tmpMap);

    return $tree;

}

if($act == 'getData') {

    //获取组织数据

    $sql = "SELECT `id`,`name`,`pid` FROM `org_info`";

    $ret = mysql_query($sql);

    $data = array();

    while($row = mysql_fetch_assoc($ret)) {

        $data[] = $row;

    }

    $data = genTree($data, 'id', 'pid', 'children');

    $obj = new StdClass();

    $obj->name = 'xxx有限公司';

    $obj->children = $data;

    echo json_encode($obj);

} else if($act == 'orgFrm') {

    //处理组织表单

    $addOrgAct = !empty($_POST['addOrgAct']) ? trim($_POST['addOrgAct']) : '';

    //判断表单方法是否为空

    if(empty($addOrgAct)) {

        exit;

    }

    //当前节点名

    $curNodeName = !empty($_POST['curNodeName']) ? trim($_POST['curNodeName']) : '';

    //当前节点ID

    $curNodeId = !empty($_POST['curNodeId']) ? trim($_POST['curNodeId']) : 0;

    //组织名称

    $orgName = !empty($_POST['orgName']) ? trim($_POST['orgName']) : '';

    if($addOrgAct == 'add') {

        $addOrgType = !empty($_POST['addOrgType']) ? trim($_POST['addOrgType']) : '';

        if(empty($orgName)) {

            exit;

        }

        if($addOrgType == 'sib') {

            //添加兄弟节点

            if(empty($curNodeId)) {

                exit;

            }

            //获取兄弟节点的pid和path

            $sql = "SELECT `pid`,`path` FROM `org_info` WHERE `id`={$curNodeId}";

            $ret = mysql_query($sql);

            $row = mysql_fetch_assoc($ret);

            $path = $row['path'];

            $pid = $row['pid'];

            //添加节点

            $sql = "INSERT INTO `org_info`(`name`, `pid`, `path`) VALUES('{$orgName}', {$pid}, '{$path}')";

            mysql_query($sql);

            $nodeId = mysql_insert_id();

            if(mysql_affected_rows()) {

                $obj = new StdClass();

                $obj->name = $orgName;

                $obj->id = $nodeId;

                echo json_encode($obj);

                exit;

            }

        } else {

            //添加子节点

            //获取当前节点的path

            $sql = "SELECT `path` FROM `org_info` WHERE `id`={$curNodeId}";

            $ret = mysql_query($sql);

            $row = mysql_fetch_assoc($ret);

            $path = $row['path'];

            $path = !empty($path) ? (rtrim($path, ',') . ',' . $curNodeId) : $curNodeId;

            $pid = $curNodeId;

            //添加节点

            $sql = "INSERT INTO `org_info`(`name`, `pid`, `path`) VALUES('{$orgName}', {$pid}, '{$path}')";

            mysql_query($sql);

            $nodeId = mysql_insert_id();

            if(mysql_affected_rows()) {

                $obj = new StdClass();

                $obj->name = $orgName;

                $obj->id = $nodeId;

                echo json_encode($obj);

                exit;

            }

        }

    } else if($addOrgAct == 'del') {

        //删除所有有父节点中有该节点的子节点

        $sql = "DELETE FROM `org_info` WHERE FIND_IN_SET('{$curNodeId}',`path`) OR `id`={$curNodeId}";

        mysql_query($sql);

        if(mysql_affected_rows()) {

            $obj = new StdClass();

            $obj->name = $orgName;

            $obj->id = $curNodeId;

            echo json_encode($obj);

            exit;

        }

    } else if($addOrgAct == 'edt') {

        if(empty($orgName)) {

            exit;

        }

        //更新节点

        $sql = "UPDATE `org_info` SET `name`='{$orgName}' WHERE `id`={$curNodeId}";

        mysql_query($sql);

        if(mysql_affected_rows()) {

            $obj = new StdClass();

            $obj->name = $orgName;

            $obj->id = $curNodeId;

            echo json_encode($obj);

            exit;

        }

    }

}
五、效果如下：
OrgChart 组织架构与PHP结合使用

相关文章