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
Introduce necessary 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:
|
<<: Detailed explanation of Nginx proxy_redirect usage
>>: CentOS7 uses rpm package to install mysql 5.7.18
Linux installation JDK1.8 steps 1. Check whether ...
The role of the a tag pseudo-class: ":link&qu...
Table of contents Saltstack deploys zabbix servic...
This article uses an example to illustrate the pa...
Preface: The MySQL database provides a wide range...
This article shares with you how to use thinkphp5...
If you have installed the Win10 system and want t...
<br />Navigation does not just refer to the ...
This article example shares the specific code of ...
1. Software Introduction VirtualBox VirtualBox is...
1 Background JDK1.8-u181 and Tomcat8.5.53 were in...
Anchor tag usage: Linking to a specific location i...
Although I have run some projects in Docker envir...
First, open the virtual machine Open xshell5 to c...
1. Create a new user wwweee000 [root@localhost ~]...