Application of jQuery treeview Tree Structure

2021-11-01 23:19:21
OfStack

This article example for everyone to share jQuery treeview tree structure application code, for your reference, the specific content is as follows

After the Bootstrap-treeview application, I tried to solve this problem with jquery-treeview, and recorded my solution, but it was definitely the best.

Introducing prerequisite css

jquery.treeview.css

Introducing prerequisite js

jquery-3.0.0.js jquery.treeview.js

Write the page treeview_jQuery. html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>TreeViewByJQuery</title>
 <link href="../static/css/jquery.treeview.css" rel="stylesheet">
 <script src="../static/js/jquery-3.0.0.js"></script>
 <script src="../static/js/jquery.treeview.js"></script>
</head>
<script>
 $(function () {
 $.ajax({
 type:"GET",
 url:"/tree/treeView.do", // Background interface path 
 async:false, // Non-asynchronous 
 dataType:"json", // The data format is json
 success:function (data) {
 var html = buildTree(data); // Call buildtree() Build a tree structure 
 $("#tree").append(html); // Append the tree structure to the DOM Element 
 }
 });

 $("#tree").treeview({});// Pass jquery.treeview Turn the constructed attribute structure into 1 Dynamic tree 
 });
 /*
  Recursively access the data returned from the background, spelling html Code building tree structure 
 */
 var buildTree = function(data){
 var html="";
 $.each(data,function(i,n){ // Traverse all tree nodes in the current data 
 html = html+"<li><span class=\"folder\">"+n.text+"</span>"; // The current node is the parent node 
 var children = buildTree(n.nodes); // Recursively traverses all children of the current node 
 html = html+"<ul>"+children+"</ul>"; // Spell parent and child nodes in 1 Rise 
 })

 return html;// Returns the constructed tree structure 
 }

</script>
<body>
<ul id="tree" class="filetree"></ul>

</body>
</html>