jQuery Treeview 简介

最新推荐文章于 2024-05-14 13:32:35 发布

卡卡西CC

最新推荐文章于 2024-05-14 13:32:35 发布

阅读量4.7k

点赞数

【声明】

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

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 stub
	doPost(request, response);
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	// TODO Auto-generated method stub
	response.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 也不是太好用！

卡卡西CC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Treeview 简介

【声明】内容源自网络，整理而成。1.静态 tree demo --> $(function(){ $("#browser").treeview();}) Sample Tree - default Folder 1 Item 1.1 Folder 2
复制链接

扫一扫