jquery treeview 简介

【声明】

内容源自网络。

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 也不是太好用!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值