首页 > 代码库 > 拖拽生成组织架构

拖拽生成组织架构

2024-07-14 04:23:20   219人阅读

因为项目需要 找了下网上可以拖拽生成组织架构的资料 找到了 jOrgChart这个控件 花半天自己实现了拖拽生成 用的EASYUI Draggable Droppable 当然熟悉 JQUERYUI 的 也可以用 JQUERY UI 的 拖拽 功能 只完成很基本的功能 但愿能帮到需要用的人^^

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<link rel="stylesheet" href="http://www.mamicode.com/Content/jOrgChart-master/example/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://www.mamicode.com/Content/jOrgChart-master/example/css/jquery.jOrgChart.css" />
<link rel="stylesheet" href="http://www.mamicode.com/Content/jOrgChart-master/example/css/custom.css" />
<link href="http://www.mamicode.com/Content/jOrgChart-master/example/css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.mamicode.com/Content/jOrgChart-master/example/prettify.js"></script>
<script src="http://www.mamicode.com/Scripts/jquery.min.js"></script>
<script src="http://www.mamicode.com/Content/jOrgChart-master/jquery.jOrgChart.js"></script>
<script src="http://www.mamicode.com/Content/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<script type="text/javascript" language="javascript">
var json = [{ name: "开发部门", children: [{ name: "开发一部", children: [{ name: ‘架构组‘ }, { name: ‘UI组‘ }
, { name: ‘编码组‘ }, { name: ‘DB组‘}]
}, { name: "开发二部" }, { name: "开发三部" }, { name: "开发四部" }, { name: "开发五部"}]
}];
$(function () {
$("#org").html(createList(json));
$("#org>ul").jOrgChart({
depth: -1,
chartElement: ‘#chart‘
});
initDraggableAndDroppable();
});

function initDraggableAndDroppable() {
$(‘.node‘).draggable({
proxy: ‘clone‘,
revert: true,
cursor: ‘move‘,
onStartDrag: function () {
$(‘.node‘).not(this).addClass("over");
},
onStopDrag: function () {
$(‘.over‘).removeClass("over");
}
});
$(‘.node‘).droppable({
accept: ‘.node‘,
onDragEnter: function (e, source) {
$(source).draggable(‘options‘).cursor = ‘auto‘;
$(source).draggable(‘proxy‘).css(‘border‘, ‘1px solid red‘);
$(this).addClass(‘over‘);
},
onDragLeave: function (e, source) {
$(source).draggable(‘options‘).cursor = ‘not-allowed‘;
$(source).draggable(‘proxy‘).css(‘border‘, ‘1px solid #ccc‘);
$(this).removeClass(‘over‘);
},
onDrop: function (e, source) {
appendNode(json, $(this).text(), $(source).text());
}
});
}

function createList(jsonData) {
var html = ‘<ul>‘;
for (var i = 0; i < jsonData.length; i++) {
html += ‘<li>‘ + jsonData[i].name;
if (jsonData[i].children) {
html += createList(jsonData[i].children);
}
html += ‘</li>‘;
}
html += ‘</ul>‘;
return html;
}

function appendNode(jsonData, parentName, childName) {
var nodeChild = findNode(jsonData, childName);
jsonData = http://www.mamicode.com/removeNode(jsonData, childName);
jsonData = http://www.mamicode.com/insertNode(jsonData, parentName, nodeChild);
$("#chart").hide();
$("#chart").html(‘‘);
$("#org").html(createList(jsonData));
$("#org>ul").jOrgChart({
depth: -1,
chartElement: ‘#chart‘
});
$("#chart").show();
initDraggableAndDroppable();
json = jsonData;
}


function insertNode(jsonData, parentName, childNode) {
for (var i = 0; i < jsonData.length; i++) {
var name = jsonData[i].name;
if (name == parentName) {
if (jsonData[i].children) {
jsonData[i].children.push(childNode);
}
else {
var children = new Array();
children.push(childNode);
jsonData[i].children = children;
}
}
else if (jsonData[i].children) {
jsonData[i].children = insertNode(jsonData[i].children, parentName, childNode);
}
}
return jsonData;
}

function removeNode(jsonData, nodeName) {
for (var i = 0; i < jsonData.length; i++) {
var name = jsonData[i].name;
if (name == nodeName) {
jsonData.splice(i, 1);
}
else if (jsonData[i].children) {
jsonData[i].children = removeNode(jsonData[i].children, nodeName);
}
}
return jsonData;
}

function findNode(jsonData, nodeName) {
for (var i = 0; i < jsonData.length; i++) {
var name = jsonData[i].name;
if (name == nodeName) {
return jsonData[i];
}
else if (jsonData[i].children) {
var result = findNode(jsonData[i].children, nodeName);
if (result) {
return result;
}
}
}
}

</script>
<style type="text/css">
.over
{
border: 6px solid red !important;
}
</style>
</head>
<body>
<div id="org" style="display: none">
</div>
<div id="chart" class="orgChart">
</div>
</body>
</html>


联系
我们