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 ...

随机推荐

开发需求：每个表dump出部分数据
mysqldump 每张数据表统一导出的N个记录数需求: 在开发过程中,需要将生产的数据导出到本地开发环境,希望可以每个表都导出部分数据.由于生产数据表都是上千万或亿级别,直接从服务器导出数据会影响 ...
基于sklearn的 BaseEstimator开发接口：模型融合Stacking
转载:https://github.com/LearningFromBest/CMB-credit-card-department-prediction-of-purchasing-behavior- ...
补充 3：Golang 一些特性
1 丰富的内置类型 2 函数多返回值 3 Go的错误处理 : Go语言引入了3个关键字用于标准的错误处理流程,这3个关键字分别为defer. panic和 recover 4 在Go语言中,所有的 ...
javascript cookie操作.
给cookie追加name: document.cookie="name="+escape("我叫钢蛋");//这里可以不写secape,这样写会更加的安全., ...
第14章 UDP编程（3）_利用UDP实现广播功能
3. 广播的介绍 (1)广播 ①广播实现一对多的通信,如QQ群 ②它通过向广播地址发送数据报文实现的 (2)SO_BROADCAST选项 ①SO_BROADCAST选项控制着UDP套接字是否能发送广播 ...
第1课学习 C++ 的意义
1. 回顾历史 (1)UNIX操作系统诞生之初是直接用汇编语言写成的.随着UNIX的发展,汇编语言的开发效率成为一个瓶劲. (2)1971年,Ken Thompson和Denis Ritchie对B ...
Centos7修改profile错误导致命令行不能用，情况的解救方案,dir命令不能用
Linux修改profile文件改错了,恢复的方法 Linux修改profile文件改错了,恢复的方法在改profile的时候,改出问题了,除了cd以外的命令基本都不能用了,连vi都不能用了,上网查了 ...
php中array_map和array_walk的使用对比_php技巧
一.array_map() 1.array_map() 函数将用户自定义函数作用到数组中的每个值上,并返回用户自定义函数作用后的带有新值的数组,若函数作用后无返回值,则对应的新值数组中为空. 2.回调 ...
GET和POST的真正区别
文章来源: http://www.nowamagic.net/librarys/veda/detail/1919 如果有人问你,GET和POST,有什么区别?你会如何回答? 我的经历前几天有人问我这 ...
VBA 使用QueryTables 中文乱码的处理
一般情况: cnn = "OLEDB;Provider=IBMDA400;Data Source=TFB4001;User ID=;Password=;" Sql = " ...

OrgChart 组织架构与PHP结合使用

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

随机推荐

热门专题