preface
A few days ago, the leader asked me to implement a tree graph drag plug-in, which is used to describe the relationship between the leaders and employees of each department. Each parent node shows the number of its children, and drag the people on any leaf node to another node, the relationship between them changes, and the tree graph is re-rendered. After all user operations are complete, click Save to generate JSON according to the tree diagram and send the JSON to the back end, which modifies the personnel mapping in the database according to the JSON.
Next, I would like to share with you the plugin I implemented, and welcome interested developers to read this article.
Take a look at the final implementation:
The difficulties in analysis
- The implementation of drag tree graph is also the core function of this plug-in. According to the specific rules of DOM, a tree is constructed to achieve drag function. I use the method provided by JQueryUI to obtain the original DOM of the current drag node and the target node and rebuild the tree.
This part of the implementation of the code position: “plugins/treeDrag/js/jquery. TreeDrag. Js”
Dom rules to be generated are as follows:
<li data-id="1000"><p>China</p>
<ul>
<li data-id="1001"><p>guangdong</p>
<ul>
<li data-id="1002"><p>Guangzhou</p>
<ul>
<li data-id="1003"><p>The tianhe district</p></li>
</ul>
</li>
<li data-id="1007"><p>shenzhen</p>
<ul>
<li data-id="1008"><p>Futian district</p></li>
</ul>
</li>
</ul>
</li>
<li data-id="1011"><p>shaanxi</p>
<ul>
<li data-id="1017"><p>shangluo</p>
<ul>
<li data-id="1018"><p>Los south</p></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
Copy the code- Since the background returns the tree JSON structure data, rendering the drag tree requires a specific DOM node, we need to render the JSON data into the DOM node we need according to the DOM node rules.
This part of the implementation of the code position: “plugins/treeDrag/js/JsonToDomParser js”
Json rules are as follows:
{
"name":"Country"."value":"China"."id": "1000"."children":[
{
"name":"Province"."value":"Guangdong"."id": "1001"."children": [{"name":"City"."value": "Shenzhen"."id": "1007"."children": [{"name":"Administrative district"."value": "Futian District"."id": "1008"}}]}, {"name":"Province"."value":"Shaanxi"."id": "1011"."children": [{"name":"City"."value": "Xi 'an"."id": "1012"."children": [{"name":"Administrative district"."value": "Lianhu District"."id": "1013"}]}]}Copy the code- After the user drags the tree, we need to send the mapping of people in the current tree to the back end. The back end can only parse JSON data, so we need to convert the DOM back to JSON.
This part of the implementation of the code position: “plugins/treeDrag/js/JsonToDomParser js”
❝
Json-to-dom parser, I have been working on it for a long time. Finally, I asked a netizen for help and successfully solved this problem. Thanks @Amoush for providing the solution.
❞
Project directory
- The plugins directory
- Jquery Stores jquery-related files
- Jqueryui Stores files related to jqueryui
- TreeDrag drag-and-drop plugin implements related files
- src
- Assets Directory for storing static resources
- CSS file used in the CSS plug-in
- Js plugin used in the JS file
- Config Files required for tree structure rendering
- Treedragdata. json Renders json data in a tree structure
- Index.html tree drag-and-drop plugin DEMO file
- Assets Directory for storing static resources
How to use
- Introduce the following dependencies in the HTML file that you want to use the plug-in
<! -- Tree drag plugin style file -->
<link rel="stylesheet" href="plugins/treeDrag/css/jquery.treeDrag.css">
<link rel="stylesheet" href="src/assets/css/custom.css">
<! - JQuery dependence - >
<script src="Plugins/jquery / 1.7.1 / jquery. Min. Js." "></script>
<script src="Plugins/jqueryui / 1.8.16 / jquery - UI. Min. Js." "></script>
<! -- Tree drag plugin -->
<script src="plugins/treeDrag/js/jquery.treeDrag.js"></script>
<! JSON to DOM parsers -->
<script type="text/javascript" src="plugins/treeDrag/js/JsonToDomParser.js"></script>
<! -- Business logic -->
<script type="text/javascript" src="src/assets/js/index.js"></script>
<link rel="stylesheet" href="src/assets/css/index.css">
Copy the code- Add a container to the body of the HTML that accepts the tree rendering
<! Render tree drag containers -->
<div id="chart" class="orgChart"></div>
<! Generate JSON button -->
<div class="btn-panel">
<button type="button" class="btn" onclick="generateJSON()">
<span>Generate a JSON</span>
</button>
</div>
Copy the code- Write JS code, render don structure as a tree drag control
/** * render page * @param dataTree tree to render JSON * @param DomNode to receive render result dom node * @param isDrag */
const renderPage = function(dataTree={},DomNode="#chart",isDrag=true){
// Dom string to Dom object
const org = $(JsonToDomParser(dataTree));
// Render the page
return org.treeDrag({
chartElement: DomNode,
dragAndDrop: isDrag
});
};
let treeData = {};
let treeDom = {};
// Generate JSON data
const generateJSON = function(){
const jsonTree = new DomToJsonParser(treeDom);
console.log(jsonTree);
alert("Json has been generated, please view it on the console");
};
jQuery(document).ready(function () {
$.ajax({
url:"src/config/treeDragData.json".type:"get".dataType:"JSON".success:(res) = >{
treeData = res;
// Render the pagetreeDom = renderPage(treeData); }})});Copy the code❝
This completes the introduction to the use of the plug-in.
❞
The project address
GitHub address: tree-drag
Online experience address: tree-drag-demo
Write in the last
- If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊
- This article was first published in nuggets. Reprint is prohibited without permission 💌