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

随机推荐

web.py模版系统
介绍: 调用的web.py模版语言Templetor旨在将python的强大功能带入模版.它不是为模板创建新语法,而是重用python语法. Templetor故意限制模版中的变量访问.用户可以访问传 ...
linux移动复制删除命令
用mv命令1.作用mv命令来为文件或目录改名或将文件由一个目录移入另一个目录中.该命令等同于DOS系统下的ren和move命令的组合.它的使用权限是所有用户.2.格式mv [options] 源文件或 ...
python学习之----urllib与urllib2的区分
urllib 还是urllib2 ? 如果你用过Python 2.x 里的urllib2 库,可能会发现urllib2 与urllib 有些不同. 在Python 3.x 里,urllib2 改名为u ...
Pillow 读取图片截断错误
做图像处理的时候,Pillow是经常使用到的模块. 最近在读取图片的时候出现了一个错误. OSError: image file is truncated (461 bytes not process ...
Redis安装及五种数据类型
redis是非关系型数据库,也叫内存数据库.数据是键值对的形式,通过key查找value 安装Radis:6379 sudo apt-get update sudo apt-get install r ...
UVA127
模拟游戏,规则如下把卡牌一张接一张,从左到右依次摊开,不可以重叠,每当某张卡片和左边(左边第三张)卡片匹配,它就能放到另外一张卡片上,匹配的规则是他们有一样的级别或者花色,在每次移动完成以后,还需要再 ...
12.nodejs事件轮询机制
一:nodejs事件轮询机制就是函数的执行顺序 <script type="text/javascript"> setImmediate(function(){ ...
UILabel 自适应高度，宽度
mLabel1 = [[UILabel alloc]initWithFrame:CGRectMake(0, 20, 10, 1)]; mLabel1.text = @"my label 1, ...
WP8.1 页面跳转，overwrite后退键
In 8.1 we use the below code to navigate between pages: this.Frame.Navigate(typeof(PivotPage)); In 8 ...
find命令之时间戳使用示例
查看当前目录以及子目录下哪些文件占用的空间最大: find ./ -type f -exec du -m {} \; | sort -nr | head find ./ -type f ...

OrgChart 组织架构与PHP结合使用

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

随机推荐

热门专题