jQuery treeview树形结构应用


Posted in jQuery onMarch 24, 2021

继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>

 

jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 #jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 #jQuery
jquery实现广告上下滚动效果
Mar 04 #jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 #jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 #jQuery
jquery实现点击左右按钮切换图片
Jan 27 #jQuery
You might like
关于文本留言本的分页代码
2006/10/09 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
jquery animate动画持续运动的实例
2017/11/29 jQuery
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python实现停车管理系统
2018/11/30 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python创建数字列表的示例
2019/11/28 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
团支书的期末学习总结自我评价
2013/11/01 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
法院执行局工作总结
2015/08/11 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书