正文
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;
}
}
}
五、效果如下：
