jqueryAjaxTres002.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/jquery.treeview.css" />
<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../js/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type:"POST",
url:"test.jsp",
data:{id:"id001"},
dataType:"html",
success:function(result){
$("#main").html(result);
$("#browser").treeview({
toggle: function() {
console.log("%s was toggled.", $(this).find(">span").text());
}
});
$(".file").click(function() {
$this = $(this);
alert($this.text() + " , " + $this.attr("title"));
});
}
});
});
</script>
<title>Insert title here</title>
</head>
<body>
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/">jQuery Treeview Plugin</a> Demo</h1>
<div id="main">
</div>
</body>
</html>test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id") == null ? "" : request.getParameter("id");
System.out.println("\n\n\n\n");
System.out.println(" id = " + id);
System.out.println("\n\n\n\n");
%>
<ul id="browser" class="filetree treeview-famfamfam">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="folder">Item 1.1</span>
<ul>
<li><span class="file" title="aaa" >Item 1.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="folder">Subfolder 2.2</span>
<ul>
<li><span class="file">File 2.2.1</span></li>
<li><span class="file">File 2.2.2</span></li>
</ul>
</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>
</li>
</ul> 
jquery.treeview.zip'javascript' 카테고리의 다른 글
| AJAX 한글 파라미터 전송 (0) | 2012.01.18 |
|---|---|
| jQuery로 json 객체 다루기 (1) | 2011.12.22 |
| datejs 사용하기 (0) | 2011.11.04 |
| chrome 에서 jQuery loading 하기 (0) | 2011.10.11 |
| javascript hash (0) | 2011.10.10 |