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;

        }

    }

}

五、效果如下：

OrgChart 组织架构与PHP结合使用的更多相关文章

PHP Yii框架开发——组织架构网站重构
最近一段时间在维护公司的组织架构网站(Org),旧版网站只是用了xampp简单搭建了一套环境部署在了windows机器上,代码结构相对简单. 整个架构如下: 整个架构没有用到复杂的结构,class里放 ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（41）-组织架构
系列目录本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当初设计的项目解决方案就是可伸缩可以拆离,可共享的项目解决方案.所以我们同时要添加App.Flow文件夹 ...
Atittit.研发公司的组织架构与部门架构总结
Atittit.研发公司的组织架构与部门架构总结 1. archi组织架构与部门规划2 1.1. 最高五大组织机构2 1.2. 宗教事务部2 1.3. 制度与重大会议委员会2 1.4. 纠纷处理部: ...
使用jOrgChart插件实现组织架构图的展示
项目要做组织架构图,要把它做成自上而下的树形结构. 一.说明 (1)通过后台查询数据库,生成树形数组结构,返回到前台. (2)需要引入的js插件和css文件: ①jquery.jOrgChart.cs ...
2，SFDC 管理员篇 - 组织架构
1,组织架构 Setup | Administrator | Manage User| Role 组织层级有三种模式,基于区域划分,基于产品划分,基于公司规模划分层级(目标客户群体划分层级或渠道划分) ...
Oracle 组织架构(转)
原文地址:Oracle 组织架构我们先来看一下实际生活中的集团组织架构. 下图是一个典型的投资集团组织架构. 集团在各个国家有独立的法人. 每个法人会负责若干个业务进行,比如石油开采,汽车制造,软件 ...
两个和尚抬水有水喝，三个和尚抬水没水喝------IT项目管理之组织架构
说到项目经理岗位,一般的想法是,一个项目只能有一个项目经理,否则责任不明,互相推诿.偏偏IT项目需要有两个甚至三个项目经理.原因何在呢? 典型的IT项目(不包含纯技术或工具类项目)是把用户的需求转化成 ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（41）-组织架构
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(41)-组织架构本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当 ...
在Activiti中如何使用自定义的组织架构
1.概述我们知道,activiti是一个不错的流程引擎,它有自身的人员组织架构,但仅限于用户.用户组的管理,流程产生的任务(UserTask),就涉及到任务的所属人(Owner),任务的执行人(as ...

随机推荐

使用Golang进行性能分析(Profiling)
转自:http://www.cppblog.com/sunicdavy/archive/2015/04/11/210308.html 本文介绍游戏服务器的性能分析, web服务器性能分析不在本文分析范 ...
【洛谷】P1357 花园（状压+矩阵快速幂）
题目传送门:QWQ 分析因为m很小,考虑把所有状态压成m位二进制数. 那么总状态数小于$ 2^5 $. 如果状态$ i $能转移到$ j $,那么扔进一个矩阵,n次方快速幂一下. 答案是对角线之和 ...
C# implement java like CountDownLatch
CountDownLatch是在java1.5被引入的,跟它一起被引入的并发工具类还有CyclicBarrier.Semaphore.ConcurrentHashMap和BlockingQueue,它 ...
解决不能正常访问workerman的问题
问题描述: 在阿里云ECS上部署了workerman的应用(ECS是专有网络),在ECS安全组里已经允许workerman需要的全部端口,但是外网一直不能正常打开(注,其他服务,比80端口外部是可以用 ...
php 数组随机取值
array_rand()在你想从数组中取出一个或多个随机的单元时相当有用.它接受 input 作为输入数组和一个可选的参数 num_req,指明了你想取出多少个单元 - 如果没有指定,默认为 1. a ...
显式锁（三）读写锁ReadWriteLock
前言: 上一篇文章,已经很详细地介绍了显式锁Lock 以及其常用的实现方式- - ReetrantLock(重入锁),本文将介绍另一种显式锁 - - 读写锁ReadWriteLock. ...
20180201之Burp Suite Professional V1.7.31 相关英文翻译
Burp Suite Professional V1.7.31 打嗝套件专业
2018-2019-2 《网络对抗技术》Exp4 恶意代码分析 Week6 20165233
Exp4 恶意代码分析实验内容一.基础问题 1.如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. 使用wi ...
zabbix自动发现与监控内存和CPU使用率最高的进程,监测路由器
https://cloud.tencent.com/info/488cfc410f29d110c03bcf0faaac55b2.html (未测试) https://www.cnblo ...
HTML5 ES6 语法基础
// 解构赋值 let [a, b, c, [s,e],d] = ["aa", "bb", "cc", [12, 23], "dd ...

OrgChart 组织架构与PHP结合使用

OrgChart 组织架构与PHP结合使用的更多相关文章

随机推荐

热门专题