OrgChart 组织架构与PHP结合使用 - 怀素真

公告

一、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;
        }
    }
}

五、效果如下：

posted on 2017-01-26 20:56 怀素真阅读(1526) 评论(0) 编辑收藏举报

刷新页面返回顶部