jQuery treeview tree structure application

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

Recommend

Graphical tutorial on installing JDK1.8 under CentOS7.4

Linux installation JDK1.8 steps 1. Check whether ...

What is the function and writing order of the a tag pseudo class

The role of the a tag pseudo-class: ":link&qu...

Teach you how to deploy zabbix service on saltstack

Table of contents Saltstack deploys zabbix servic...

Example analysis of the page splitting principle of MySQL clustered index

This article uses an example to illustrate the pa...

Summary of MySQL common functions

Preface: The MySQL database provides a wide range...

Vue+thinkphp5.1+axios to realize file upload

This article shares with you how to use thinkphp5...

How to build a K8S cluster and install docker under Hyper-V

If you have installed the Win10 system and want t...

Tips for designing photo preview navigation on web pages

<br />Navigation does not just refer to the ...

js implements a simple countdown

This article example shares the specific code of ...

Detailed tutorial on installing VirtualBox and Ubuntu 16.04 under Windows system

1. Software Introduction VirtualBox VirtualBox is...

Methods and steps for deploying multiple war packages in Tomcat

1 Background JDK1.8-u181 and Tomcat8.5.53 were in...

Example sharing of anchor tag usage in HTML

Anchor tag usage: Linking to a specific location i...

How to build php-nginx-alpine image from scratch in Docker

Although I have run some projects in Docker envir...

How to set a fixed IP in Linux (tested and effective)

First, open the virtual machine Open xshell5 to c...

centos 7 modify sshd | prohibit root login and sshd port script definition

1. Create a new user wwweee000 [root@localhost ~]...