jquery treeview 简介

最新推荐文章于 2024-09-22 16:54:14 发布
最新推荐文章于 2024-09-22 16:54:14 发布
阅读量755 收藏 3
点赞数

【声明】

内容源自网络。

1.静态


[html]  view plain  copy
  1. <html>  
  2. <head>  
  3.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
  4.     <title>tree demo</title>  
  5.     <link rel="stylesheet" href="./jquery.treeview.css" />  
  6.     <!-- <link rel="stylesheet" href="./css/screen.css" /> -->  
  7.     <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>  
  8.     <script type="text/javascript" src="./js/jquery.treeview.js"></script>  
  9.     <script type="text/javascript">  
  10. $(function(){  
  11.     $("#browser").treeview();  
  12. })  
  13. </script>  
  14.       
  15. </head>  
  16. <body>  
  17. <h4>Sample Tree - default</h4>  
  18. <ul id="browser" class="filetree">  
  19.     <li>  
  20.         <span class="folder">Folder 1</span>  
  21.         <ul>  
  22.             <li><span class="file">Item 1.1</span></li>  
  23.         </ul>  
  24.     </li>  
  25.       
  26.     <li>  
  27.         <span class="folder">Folder 2</span>  
  28.         <ul>  
  29.             <li><span class="folder">Subfolder 2.1</span>  
  30.                 <ul id="folder21">  
  31.                     <li><span class="file">File 2.1.1</span></li>  
  32.                     <li><span class="file">File 2.1.2</span></li>  
  33.                 </ul>  
  34.             </li>  
  35.             <li><span class="file">File 2.2</span></li>  
  36.         </ul>  
  37.     </li>  
  38.       
  39.     <li class="closed">  
  40.         <span class="folder">Folder 3 (closed at start)</span>  
  41.         <ul>  
  42.             <li><span class="file">File 3.1</span></li>  
  43.         </ul>  
  44.     </li>  
  45.       
  46.     <li><span class="file">File 4</span></li>  
  47. </ul>  
  48. </body>  
  49. </html>  


2.动态

官网

http://docs.jquery.com/Plugins/Treeview
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

①前端jsp

[html]  view plain  copy
  1. <%@page contentType="text/html; charset=utf-8" %>  
  2. <%  
  3.     String basePath = request.getContextPath();  
  4. %>  
  5. <html>  
  6. <head>  
  7.     <title>dynamic Demo</title>  
  8.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
  9.     <link rel="stylesheet" href="<%=basePath%>/jquery.treeview.css" />  
  10.     <script type="text/javascript" src="<%=basePath%>/js/jquery-1.7.2.js"></script>  
  11.     <script type="text/javascript" src="<%=basePath%>/js/jquery.cookie.js"></script>  
  12.     <script type="text/javascript" src="<%=basePath%>/js/jquery.treeview.js"></script>  
  13.     <script type="text/javascript" src="<%=basePath%>/js/jquery.treeview.async.js"></script>  
  14.       
  15. <script type="text/javascript">  
  16. function initTrees(){  
  17.     $("#tree").treeview({  
  18.             url:"<%=basePath%>/dynamicTree",  
  19.             ajax:{  
  20.                 data:{  
  21.                     "additional":function(){  
  22.                         return "yeah: " + new Date;  
  23.                     }  
  24.                 },  
  25.                 type: "post"  
  26.             }  
  27.             });  
  28. }  
  29.   
  30. $(function(){  
  31.     initTrees();  
  32. });  
  33. </script>  
  34.   
  35. </head>  
  36. <body>  
  37. <ul id="tree">  
  38. </ul>  
  39. </body>  
  40. </html>  

②后端servelet

[java]  view plain  copy
  1. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  2.     // TODO Auto-generated method stub  
  3.     doPost(request, response);  
  4. }  
  5.   
  6. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  7.     // TODO Auto-generated method stub  
  8.     response.setHeader("Cache-Control", "no-cache");   
  9.     response.setContentType("text/json;charset=UTF-8");  
  10. //      response.setContentType("text/plain");  
  11.     response.setCharacterEncoding("utf-8");  
  12.     PrintWriter out = response.getWriter();  
  13.       
  14.     String re = "[{'text':'root','expanded':false,"  
  15.             + "'children':[{'text':'系统管理',"  
  16.             + "'children':[{'text':'用户管理'}, {'text':'权限管理'}]},{'text':'业务管理'}]}]";  
  17.       
  18.       
  19.     out.flush();  
  20.     System.out.println(re);  
  21.     out.write(re);  
  22.     out.close();  
  23. }  

效果图


【总结】

感觉jquery 树插件 treeview 也不是太好用！

provence_20
关注
jQuery Treeview 插件使用教程
csbysj2020
07-15 476
jQuery Treeview 是一个基于 jQuery 的插件，用于在网页上创建可折叠的树形结构。它支持多种数据源，包括 HTML、JSON 和 AJAX，并且可以通过丰富的配置选项进行定制。简单易用：通过简单的 HTML 标记和 jQuery 代码即可创建树形结构。可定制性：提供多种配置选项，如折叠/展开图标、动画效果等。事件驱动：支持多种事件，如节点点击、折叠/展开等，方便开发者进行交互处理。兼容性：兼容主流浏览器，如 Chrome、Firefox、Safari 和 IE 等。
jquery treeview树控件.zip
07-04
《jQuery Treeview 树形控件深度解析及应用实践》 jQuery Treeview 是一个流行的 jQuery 插件，它为网页提供了强大的树形视图功能。这个插件在 "JS特效-其它代码" 领域中广泛应用，尤其适用于构建层次结构清晰、...
jquery treeview控件
03-21
用jquery写的一个treeview控件类，树形目录结构采用静态json数据，动态加载节点。
jquery treeview 树形插件
weixin_34179762的博客
01-16 388
jquery treeview 插件参数说明 treeview开源地址：https://github.com/jzaefferer/jquery-treeview 1、animated：String or Number 设置展开子节点时的显示速度，有 slow、normal、fast 或者指定速度值，与 jQuery 的 hide（show）中的 speed 参数相似。 这...
深入探究TreeView控件：实现高效交互的层级GUI组件
最新发布
weixin_35391606的博客
09-22 1459
本文还有配套的精品资源，点击获取 简介：TreeView控件是Windows应用程序开发中用于展示层级数据的GUI组件。本讨论深入分析了TreeView的拖放功能、动态效果以及其他扩展特性。包括节点结构、自定义数据存储、事件处理、多选支持和性能优化。TreeView支持多种编程语言实现，并为开发者提供了丰富的交互功能和用户友好的界面设计。 1. TreeView控...
jQuery Treeview
gitblog_00007的博客
03-09 725
jQuery Treeview 去发现同类优质开源项目:https://gitcode.com/ 是一个轻量级的 JavaScript 插件，用于将 HTML 列表或表格转换为树状视图。它可以帮助您在网页上构建易于浏览、操作和交互的目录结构。 功能与用途 树状视图创建：jQuery Treeview 可以将任何 HTML 列表或表格转换为树状视图。您可以轻松地组织数据，让访问者能够快速找到所需的...
jQuery treeview的简单用法
weixin_30367945的博客
05-06 346
　　最近的项目要用到treeview插件，刚好就自己整理一下这方面的资料。 　1.文档树示例 　　最简单的一个例子就是文档树的实现。效果如下图所示。 　　 　　在使用treeview之前，html文档中需要包含几个jquery.js、jquery.treeview.js、jquery.treeview.css几个文件。具体的请从官网下载。记住jquery.js的引用必须在jque...
jQuery 树型菜单插件(Treeview)
unber的博客
06-10 1035
jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航，支持基于 cookie 的持久性菜单。
jquery插件库(jquery.treeview插件库)
06-02
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jquery treeview demo
07-08
《jQuery Treeview 演示详解》 在Web开发领域，jQuery库因其强大的功能和易用性而备受青睐。其中，jQuery UI中的TreeView组件是一种用于展示层级数据的强大工具，它能够将数据结构以树状的形式呈现，使得用户可以更...
jquery treeview树控件特效代码
03-20
《jQuery Treeview 树形控件详解与应用》 在Web开发中，树形控件是一种常见的用户界面元素，用于展示层次结构的数据。jQuery Treeview是jQuery库的一个强大插件，它提供了优雅的树状视图，使得网页中的数据结构...
jquery-treeview
12-06
jquery-treeview
jQuery treeview 树形菜单插件 v1.4
05-12
内容索引:脚本资源,jQuery,treeview,树形菜单　　jQuery treeview 是一款来自jQuery的树形菜单插件，支持无限制扩展，支持动态添加菜单项，可以配合ASP/PHP/等动态语言完成漂亮的无刷新动态树状菜单，当前版本号 v1.4，官方包中含有示例。
jsontree (jquery.treeview.js) jQuery插件版
06-27
欢迎大家下载使用 并提出宝贵意见............
jquery.treeview
李义星
03-31 236
第一步：装入所需文件 在HTML文档的标识里加入下面代码： XML/HTML Code复制内容到剪贴板 script> script> script> 第二步：添加HTML代码 在HTML文档的标识里加入下面代码： XML/HTML Code复制内容到剪贴板 div> 第三步：添加JavaScrip...
jquery.treeview.js php mysql,jQuery treeview树形结构应用
weixin_31865445的博客
04-02 156
本文实例为大家分享了jQuery treeview树形结构的应用代码，供大家参考，具体内容如下继Bootstrap-treeview应用后，我又尝试了用jquery-treeview解决这个问题，记录我的解决方案，但是不一定是最优。引入必备cssjquery.treeview.css引入必备jsjquery-3.0.0.jsjquery.treeview.js编写页面treeview_jQuery...
jQuery Treeview(树形图)
张默的博客
01-14 5345
jQuery Treeview jQuery Treeview 插件用于把一个无序列表改为一个可扩展的可折叠的树，有利于导航。该插件支持位置和基于 cookie 的持久性。 文件树示例 在使用jQuery Treeview之前，HTML文档中需要包含jquery.js、jquery.treeview.js、jquery.treeview.css几个文件，你可以从官网下载。 &lt;ul ...
构建高性能jQuery TreeView：ASP.NET实现
"打造高性能的jQuery TreeView，适用于ASP.NET项目，旨在实现静态树、异步树、Checkbox树、大数据量处理和跨浏览器兼容性。本文将介绍如何构建满足这些需求的树形视图控件，重点关注DOM结构设计、CSS样式以及解决在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值