jquery easyui tree
用jsp做服务器做个简单的jqueryeasyui的异步树
1、html使用的是官方的demo里的tree.html
唯一修改的地方将url: 'tree_data.json' 修改为 url: 'treeServer.jsp',
Java代码
- <!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>
<!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
Java代码
- <%@ 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);
- }
- %>