jQuery Treeview 简介

来源：互联网发布：c语言精品课程网站编辑：程序博客网时间：2024/06/05 05:41

【声明】

内容源自网络，整理而成。

1.静态

<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>tree demo</title>    <link rel="stylesheet" href="./jquery.treeview.css" />    <!-- <link rel="stylesheet" href="./css/screen.css" /> -->    <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>    <script type="text/javascript" src="./js/jquery.treeview.js"></script>    <script type="text/javascript">$(function(){$("#browser").treeview();})</script></head><body><h4>Sample Tree - default</h4><ul id="browser" class="filetree"><li><span class="folder">Folder 1</span><ul><li><span class="file">Item 1.1</span></li></ul></li><li><span class="folder">Folder 2</span><ul><li><span class="folder">Subfolder 2.1</span><ul id="folder21"><li><span class="file">File 2.1.1</span></li><li><span class="file">File 2.1.2</span></li></ul></li><li><span class="file">File 2.2</span></li></ul></li><li class="closed"><span class="folder">Folder 3 (closed at start)</span><ul><li><span class="file">File 3.1</span></li></ul></li><li><span class="file">File 4</span></li></ul></body></html>

2.动态

官网

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

①前端jsp

<%@page contentType="text/html; charset=utf-8" %><%String basePath = request.getContextPath();%><html><head><title>dynamic Demo</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="<%=basePath%>/jquery.treeview.css" /><script type="text/javascript" src="<%=basePath%>/js/jquery-1.7.2.js"></script><script type="text/javascript" src="<%=basePath%>/js/jquery.cookie.js"></script>    <script type="text/javascript" src="<%=basePath%>/js/jquery.treeview.js"></script>    <script type="text/javascript" src="<%=basePath%>/js/jquery.treeview.async.js"></script>    <script type="text/javascript">function initTrees(){$("#tree").treeview({url:"<%=basePath%>/dynamicTree",ajax:{data:{"additional":function(){return "yeah: " + new Date;}},type: "post"}});}$(function(){initTrees();});</script></head><body><ul id="tree"></ul></body></html>

②后端servelet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoPost(request, response);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.setHeader("Cache-Control", "no-cache"); response.setContentType("text/json;charset=UTF-8");//response.setContentType("text/plain");response.setCharacterEncoding("utf-8");PrintWriter out = response.getWriter();String re = "[{'text':'root','expanded':false,"+ "'children':[{'text':'系统管理',"+ "'children':[{'text':'用户管理'}, {'text':'权限管理'}]},{'text':'业务管理'}]}]";out.flush();System.out.println(re);out.write(re);out.close();}

效果图

【总结】

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

阅读全文

0 0