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 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python使用tornado实现登录和登出
2018/07/28 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python getpass实现密文实例详解
2019/09/24 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
世博会口号
2014/06/20 职场文书
高中生毕业评语
2014/12/30 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
Java基础-封装和继承
2021/07/02 Java/Android
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫