前言
好多天前，领导让我实现一个树形图拖拽插件，这个插件用来描述各部门领导与员工之间的关系，每个父节点显示其子结点数量，拖拽任意一个叶结点上的人到另一个结点，他们之间的关系发生改变，树形图重新渲染。用户操作都完成后，点击保存根据树形图生成JSON，将JSON发送给后端，后端根据JSON修改数据库中的人员对应关系。
接下来就跟大家下分享下我实现的这个插件，欢迎各位感兴趣的开发者阅读本文。
先看下最终实现的效果图：
难点分析
实现可拖拽树形图 可拖拽树形图的实现，也是本插件的核心功能，根据dom的特定规则构建树，实现拖拽功能，拖拽功能我使用的是JQueryUI提供的方法，获取当前拖拽结点和目标结点的原始dom，重新构建树。
这一部分的实现代码位置: 「plugins/treeDrag/js/jquery.treeDrag.js」
需要生成的dom规则如下：
<li data-id="1000"><p>中国</p>
<ul>
<li data-id="1001"><p>广东</p>
<ul>
<li data-id="1002"><p>广州</p>
<ul>
<li data-id="1003"><p>天河区</p></li>
</ul>
</li>
<li data-id="1007"><p>深圳</p>
<ul>
<li data-id="1008"><p>福田区</p></li>
</ul>
</li>
</ul>
</li>
<li data-id="1011"><p>陕西</p>
<ul>
<li data-id="1017"><p>商洛</p>
<ul>
<li data-id="1018"><p>洛南</p></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
实现JSON转DOM解析器 由于后台返回的是树形json结构数据，渲染拖拽树需要特定的dom结点，我们需要根据dom结点规则，将json数据渲染成我们需要的dom结点。
这一部分的实现代码位置：「plugins/treeDrag/js/JsonToDomParser.js」
json规则如下：
{
"name":"国家",
"value":"中国",
"id": "1000",
"children":[
{
"name":"省份",
"value":"广东",
"id": "1001",
"children": [
{
"name":"城市",
"value": "深圳",
"id": "1007",
"children": [
{
"name":"行政区",
"value": "福田区",
"id": "1008"
}
]
}
]
},
{
"name":"省份",
"value":"陕西",
"id": "1011",
"children": [
{
"name":"城市",
"value": "西安",
"id": "1012",
"children": [
{
"name":"行政区",
"value": "莲湖区",
"id": "1013"
}
]
}
]
}
]
}
实现DOM转JSON,将树形图转换为JSON数据 用户拖拽完树形图后，我们需要将当前树形图中的人员对应关系发给后端，后端只能解析json数据，所以我们需要将dom重新转回json。
这一部分的实现代码位置：「plugins/treeDrag/js/JsonToDomParser.js」
❝JSON转DOM的解析器，我搞了好久没弄出来，最后求助了一个网友，成功解决了这个问题，感谢 @安慕希 提供的解决方案。
❞
项目目录
plugins 插件目录 jquery 存放jquery相关文件 jqueryui 存放jqueryui相关文件 treeDrag 树形拖拽插件实现相关文件
src assets 静态资源存放目录 css 插件内用到的css文件 js 插件内用到的js文件
config 树形结构渲染需要的文件 treeDragData.json 渲染树形结构的json数据
index.html 树形拖拽插件演示DEMO文件
如何使用
在要使用插件的html文件里引入下述依赖
<!--树形拖拽插件样式文件-->
<link rel="stylesheet" href="plugins/treeDrag/css/jquery.treeDrag.css">
<link rel="stylesheet" href="src/assets/css/custom.css">
<!--JQuery依赖-->
<script src="plugins/jquery/1.7.1/jquery.min.js"></script>
<script src="plugins/jqueryui/1.8.16/jquery-ui.min.js"></script>
<!--树形拖拽插件-->
<script src="plugins/treeDrag/js/jquery.treeDrag.js"></script>
<!--JSON转DOM解析器-->
<script type="text/javascript" src="plugins/treeDrag/js/JsonToDomParser.js"></script>
<!--业务逻辑-->
<script type="text/javascript" src="src/assets/js/index.js"></script>
<link rel="stylesheet" href="src/assets/css/index.css">
在html的body里添加容器，用于接受树形图的渲染结果
<!--渲染树形拖拽的容器-->
<div id="chart" class="orgChart"></div>
<!--生成JSON按钮-->
<div class="btn-panel">
<button type="button" class="btn" onclick="generateJSON()">
<span>生成JSON</span>
</button>
</div>
编写js代码，渲染don结构为树形拖拽控件
/**
* 渲染页面
* @param dataTree 需要渲染的树形JSON
* @param DomNode 接收渲染结果的dom结点
* @param isDrag
*/
const renderPage = function(dataTree={},DomNode="#chart",isDrag=true){
// Dom字符串转Dom对象
const org = $(JsonToDomParser(dataTree));
// 渲染页面
return org.treeDrag({
chartElement: DomNode,
dragAndDrop: isDrag
});
};
let treeData = {};
let treeDom = {};
// 生成json数据
const generateJSON = function(){
const jsonTree = new DomToJsonParser(treeDom);
console.log(jsonTree);
alert("json已生成，请在控制台查看");
};
jQuery(document).ready(function () {
$.ajax({
url:"src/config/treeDragData.json",
type:"get",
dataType:"JSON",
success:(res)=>{
treeData = res;
// 渲染页面
treeDom = renderPage(treeData);
}
})
});
❝至此，插件的使用介绍就完成了。
❞
项目地址
「GitHub地址」: tree-drag
「在线体验地址」: tree-drag-demo
写在最后
文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊 本文首发于掘金，未经许可禁止转载💌
评论区