前言
好多天前，领导让我实现一个树形图拖拽插件，这个插件用来描述各部门领导与员工之间的关系，每个父节点显示其子结点数量，拖拽任意一个叶结点上的人到另一个结点，他们之间的关系发生改变，树形图重新渲染。用户操作都完成后，点击保存根据树形图生成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
- treeDragData.json 渲染树形结构的json数据
- css 插件内用到的css文件
- js 插件内用到的js文件
- assets 静态资源存放目录
- config 树形结构渲染需要的文件
- 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
写在最后
- 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
- 本文首发于掘金，未经许可禁止转载💌
