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卸载全部事件的思路详解
Apr 03 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery实现简单每周轮换的日历
Sep 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
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
setTimeout学习小结
2017/02/08 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
使用JavaScript破解web
2018/09/28 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
python配置grpc环境
2019/01/01 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python加载自定义词典实例
2019/12/06 Python
python实现电子词典
2020/03/03 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
python中spy++的使用超详细教程
2021/01/29 Python
C++的几个面试题附答案
2016/08/03 面试题
自我鉴定思想方面
2013/10/07 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
爱心募捐感谢信
2015/01/22 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python