jQuery treeview树形结构应用

继Bootstrap-treeview应用后，我又尝试了用jquery-treeview解决这个问题，记录我的解决方案，但是不一定是最优。

引入必备css

• jquery.treeview.css

引入必备js

• jquery-3.0.0.js
• jquery.treeview.js
  

编写页面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", //后台接口路径 async:false, //非异步 dataType:"json", //数据格式为json success:function (data) {
     VAR html = buildTree(data);
     //调用buildtree()构建树形结构 $("#tree").append(html);
 //将树形结构追加到DOM元素中 }
 }
    );
 $("#tree").treeview({
}
    );
//通过jquery.treeview将构建好的属性结构变成一个动态的树 }
    );
 /* 递归访问后台返回的数据，拼html代码构建树形结构 */ var buildTree = function(data){
     var html="";
 $.each(data,function(i,n){
     //遍历当前数据中的所有树节点 html = html+"li>
    span class=\"folder\">
    "+n.text+"/span>
    ";
     //当前节点为父节点 var children = buildTree(n.nodes);
     //递归遍历当前节点的所有子节点 html = html+"ul>
    "+children+"/ul>
    ";
 //将父节点与子节点拼在一起 }
    ) return html;
//返回构建的树形结构 }
    /script>
    body>
    ul id="tree" class="filetree">
    /ul>
    /body>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
• 基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
• jquery实现点击TreeView文本父节点展开/折叠子节点
• ASP.NET中基于JQUERY的高性能的TreeView补充
• 打造基于jQuery的高性能TreeView(asp.net)
• 为jQuery.Treeview添加右键菜单的实现代码
• Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
• jQuery 学习第六课 实现一个Ajax的TreeView
• 选择TreeView控件的树状数据节点的JS方法(jquery)
• jQuery 树形结构的选择器

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！