jQuery treeview tree structure application

This article example shares the application code of jQuery treeview tree structure for your reference. The specific content is as follows

Following the application of Bootstrap-treeview, I tried to solve this problem with jquery-treeview and recorded my solution, but it may not be the best.

Introduce necessary CSS

jquery.treeview.css

Introduce necessary 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", //Backend interface path async:false, //Non-asynchronous dataType:"json", //Data format is json
 success:function (data) {
 var html = buildTree(data); //Call buildtree() to build a tree structure $("#tree").append(html); //Append the tree structure to the DOM element }
 });

 $("#tree").treeview({}); //Use jquery.treeview to turn the constructed attribute structure into a dynamic tree });
 /*
 Recursively access the data returned by the background, and construct a tree structure by spelling out HTML code*/
 var buildTree = function(data){
 var html="";
 $.each(data,function(i,n){ //Traverse all tree nodes in the current datahtml = html+"<li><span class=\"folder\">"+n.text+"</span>"; //The current node is the parent nodevar children = buildTree(n.nodes); //Recursively traverse all child nodes of the current nodehtml = html+"<ul>"+children+"</ul>"; //Put the parent node and child node together})

 return html; //Return the constructed tree structure}

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

</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

jQuery TreeView tree control based on MVC5 and Bootstrap (Part 2) data supports json string and list collection
jQuery TreeView tree control based on MVC5 and Bootstrap (I) data supports json string and list collection
jQuery implements clicking the TreeView text parent node to expand/collapse child nodes
High-performance TreeView supplement based on JQUERY in ASP.NET
Building a high-performance TreeView based on jQuery (asp.net)
Add the implementation code of the right-click menu to jQuery.Treeview
Jquery.TreeView combines ASP.Net and database to generate menu navigation bar
jQuery Learning Lesson 6 Implementing an Ajax TreeView
JS method (jquery) to select the tree data node of the TreeView control
jQuery tree structure selector

<<: Detailed explanation of Nginx proxy_redirect usage

>>: CentOS7 uses rpm package to install mysql 5.7.18