OrgChart 组织架构与PHP结合使用
2017-01-26 20:56
337 查看
一、OrgChart下载地址：
二、组织架构的表设计
三、index.html代码如下：
四、data.php代码如下：
五、效果如下：
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;
}
}
}五、效果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- MVC4结合GetOrgChart.js实现组织架构图
- 结合使用 PHP 和 RSS(转-待消化...)
- 个人技术作品 - PHP 水印类及上传图片加水印结合使用的API及使用实例
- 使用objectdatasource结合数据绑定控件进行简单三层架构的开发
- php使用NuSoap产生webservice结合WSDL让asp.net调用
- 使用jQuery结合PHP和MySQL读取和发表评论
- while循环+list+each结合使用 php
- AJAX与PHP的结合使用
- heredoc 不能结合 php中的循环使用？
- [转] 使用 PHP 实现云计算，第 1 部分: 结合使用 Amazon S3 和 Zend Framework
- 结合 PHP 使用 HTML 表单
- 使用objectdatasource结合数据绑定控件进行简单三层架构的开发
- 结合PHP使用HTML表单（3）
- 结合PHP使用HTML表单（2）
- 结合PHP使用HTML表单访问单个和多个表单值
- 结合使用 PHP 和 RSS
- 结合PHP使用HTML表单(1)
- 结合 PHP 使用 HTML 表单
- Memcached 与 PHP 结合使用
- 初探PureMVC：使用PHP+MySQL+Flex结合PureMVC框架做了个Flex留言本