jquery-easyui-tree异步树

zheyiw

浏览: 1016400 次
性别:
来自: 广州

最近访客更多访客>>

jklwan

devcang

weblxw

daikainan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery Java JSP json HTML

用jsp做服务器做个简单的jqueryeasyui的异步树
1、html使用的是官方的demo里的tree.html
唯一修改的地方将url: 'tree_data.json' 修改为 url: 'treeServer.jsp',

<!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">
<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="/JQuery/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/JQuery/js/easyui/themes/icon.css">
	<script type="text/javascript" src="/JQuery/js/easyui/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="/JQuery/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#tt1').tree({
				animate:true,
				onClick:function(node){
					alert('you click '+node.text);
				}
			});
			$('#tt2').tree({
				checkbox: true,
				url: 'treeServer.jsp',
				onClick:function(node){
					alert('you click '+node.text);
				}
			});
		});
		function reload(){
			$('#tt2').tree('reload');
		}
		function getChildNodes(){
			var node = $('#tt2').tree('getSelected');
			if (node){
				var children = $('#tt2').tree('getChildNodes', node.target);
				var s = '';
				for(var i=0; i<children.length; i++){
					s += children[i].text + ',';
				}
				alert(s);
			}
		}
		function getChecked(){
			var nodes = $('#tt2').tree('getChecked');
			var s = '';
			for(var i=0; i<nodes.length; i++){
				if (s != '') s += ',';
				s += nodes[i].text;
			}
			alert(s);
		}
		function getSelected(){
			var node = $('#tt2').tree('getSelected');
			alert(node.text);
		}
		function collapse(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('collapse',node.target);
		}
		function expand(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('expand',node.target);
		}
		function collapseAll(){
			$('#tt2').tree('collapseAll');
		}
		function expandAll(){
			$('#tt2').tree('expandAll');
		}
		function append(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('append',{
				parent: node.target,
				data:[{
					text:'new1',
					checked:true
				},{
					text:'new2',
					state:'closed',
					children:[{
						text:'subnew1'
					},{
						text:'subnew2'
					}]
				}]
			});
		}
		function remove(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('remove', node.target);
		}
		function update(){
			var node = $('#tt2').tree('getSelected');
			if (node){
				node.text = '<span style="font-weight:bold">new text</span>';
				node.iconCls = 'icon-save';
				$('#tt2').tree('update', node);
			}
		}
		function isLeaf(){
			var node = $('#tt2').tree('getSelected');
			var b = $('#tt2').tree('isLeaf', node.target);
			alert(b)
		}
	</script>
</head>
<body>
	<h1>Tree</h1>
	<p>Create from HTML markup</p>
	<ul id="tt1">
		<li>
			<span>Folder</span>
			<ul>
				<li>
					<span>Sub Folder 1</span>
					<ul>
						<li>
							<span><a href="#">File 11</a></span>
						</li>
						<li>
							<span>File 12</span>
						</li>
						<li>
							<span>File 13</span>
						</li>
					</ul>
				</li>
				<li>
					<span>File 2</span>
				</li>
				<li>
					<span>File 3</span>
				</li>
				<li>File 4</li>
				<li>File 5</li>
			</ul>
		</li>
		<li>
			<span>File21</span>
		</li>
	</ul>
	<hr></hr>
	<p>Create from JSON data</p>
	<div style="margin:10px;">
		<a href="#" onclick="reload()">reload</a>
		<a href="#" onclick="getChildNodes()">getChildNodes</a>
		<a href="#" onclick="getChecked()">getChecked</a>
		<a href="#" onclick="getSelected()">getSelected</a>
		<a href="#" onclick="collapse()">collapse</a>
		<a href="#" onclick="expand()">expand</a>
		<a href="#" onclick="collapseAll()">collapseAll</a>
		<a href="#" onclick="expandAll()">expandAll</a>
		<a href="#" onclick="append()">append</a>
		<a href="#" onclick="remove()">remove</a>
		<a href="#" onclick="update()">update</a>
		<a href="#" onclick="isLeaf()">isLeaf</a>
	</div>

	<ul id="tt2"></ul>
</body>
</html>

2、treeServer.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%

 String treeData="[{\"id\":1,\"text\":\"Folder1\",\"iconCls\":\"icon-ok\",\"children\":[{\"id\":2,\"text\":\"File1\",\"checked\":true},{\"id\":3,\"text\":\"Folder2\",\"state\":\"open\",\"children\":[{\"id\":4,\"text\":\"File3\",\"checked\":true,\"iconCls\":\"icon-reload\"},{\"id\": 8,\"text\":\"Async Folder\",\"state\":\"closed\"}]}]},{\"text\":\"Languages\",\"state\":\"closed\",\"children\":[{\"text\":\"Java\"},{\"text\":\"C#\"}]}]";

String id = request.getParameter("id");
//输出
if (id!=null) {
	response.getWriter().write("[{\"text\":\"Languages\",\"state\":\"closed\",\"children\":[{\"text\":\"Java\"},{\"text\":\"C#\"}]}]");
}else{
	response.getWriter().write(treeData);
}
%>

分享到：

优化myEclipse的启动速度 | ExtTree异步树

2010-06-30 18:02
浏览 29116
评论(2)
分类:Web前端
查看更多

2 楼 qq466862016 2013-01-28

后台封装的json对象能否让看下！

1 楼 youjianbo_han_87 2011-08-27

String id = request.getParameter("id");

这行你能拿到值？？？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery-easyui-tree异步树

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery-easyui-tree异步树

评论

发表评论

相关推荐

最近访客更多访客>>