树形图拖拽插件tree-drag | 开源项目推荐

神奇的程序员
9,000 阅读4分钟

前言

好多天前，领导让我实现一个树形图拖拽插件，这个插件用来描述各部门领导与员工之间的关系，每个父节点显示其子结点数量，拖拽任意一个叶结点上的人到另一个结点，他们之间的关系发生改变，树形图重新渲染。用户操作都完成后，点击保存根据树形图生成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

写在最后

  • 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
  • 本文首发于掘金，未经许可禁止转载💌
avatar
文章
阅读
粉丝