Плагин tree-drag tree-drag | Рекомендация проекта с открытым исходным кодом

Открытый исходный код
Плагин tree-drag tree-drag | Рекомендация проекта с открытым исходным кодом

предисловие

Несколько дней назад руководитель попросил меня реализовать плагин drag-and-drop для древовидных диаграмм.Этот плагин используется для описания отношений между руководителями и сотрудниками различных отделов.Каждый родительский узел отображает количество дочерних узлы, и перетащите любой конечный узел человека на другой узел, взаимосвязь между ними изменится, и древовидная карта будет перерисована. После завершения пользовательских операций нажмите Сохранить, чтобы сгенерировать JSON в соответствии с древовидной диаграммой, отправить JSON на серверную часть, и серверная часть модифицирует кадровую переписку в базе данных в соответствии с JSON.

Далее я поделюсь с вами плагином, который я реализовал.Заинтересованные разработчики могут прочитать эту статью.

Давайте посмотрим на окончательный рендеринг:

Анализ сложности

  • Реализовать перетаскиваемые древовидные карты Реализация перетаскиваемой древовидной диаграммы также является основной функцией этого плагина.Дерево строится в соответствии с конкретными правилами dom, и реализована функция перетаскивания.Для функции перетаскивания я использую предоставленный метод с помощью JQueryUI, чтобы получить текущий узел перетаскивания и целевой узел.Исходный дом точки, перестройте дерево.

Расположение кода реализации этой части:"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.Нам нужно отображать данные json в нужные нам узлы DOM в соответствии с правилами узла 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-to-DOM. Наконец, я обратился за помощью к пользователю сети и успешно решил эту проблему. Спасибо @Ann Muxi за решение.

❞

каталог проекта

  • каталог плагинов
    • jquery хранит файлы, связанные с jquery
    • jqueryui хранит файлы, связанные с jqueryui
    • Плагин перетаскивания дерева treeDrag реализует связанные файлы
  • src
    • каталог хранения статических ресурсов активов
      • css, используемый в плагине css
      • js файлы, используемые в плагине js
    • файл конфигурации, необходимый для рендеринга древовидной структуры
      • treeDragData.json отображает данные JSON с древовидной структурой
    • index.html демонстрационный файл подключаемого модуля перетаскивания дерева

как использовать

  • Внесите следующие зависимости в 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, чтобы принять результат рендеринга карты дерева.
<!--渲染树形拖拽的容器-->
<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

напиши в конце

  • Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
  • Эта статья была впервые опубликована на Наггетс, перепечатка без разрешения запрещена 💌
Категории