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 17 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 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读注册表
2006/10/09 PHP
杏林同学录(四)
2006/10/09 PHP
php简单静态页生成过程
2008/03/27 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
php简单的会话类代码
2011/08/08 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
python3实现mysql导出excel的方法
2019/07/31 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
python中upper是做什么用的
2020/07/20 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
家教广告词
2014/03/19 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
材料员岗位职责
2015/02/10 职场文书
学生通报表扬范文
2015/05/04 职场文书
亮剑观后感300字
2015/06/05 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫