JQuery easy ui tree
<!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>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
$('#tt1').tree({
animate:true,
onClick:function(node){
alert('you click '+node.text);
}
});
$('#tt2').tree({
checkbox: true,
url: 'tree_data.json',
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>
tree_data.json:
[
{
"id": "10",
"text": "根节点",
"data": "",
"children": [
{
"id": "1002",
"text": "一级节点1",
"children": [
{
"id": "100201",
"text": "二级节点11",
"children": [
{
"id": "10020102",
"text": "三级节点111",
"children": "",
"parId": "100201"
},
{
"id": "10020101",
"text": "三级节点222",
"children": "",
"parId": "100201"
}
],
"parId": "1002"
},
{
"id": "100202",
"text": "二级节点22",
"children": "",
"parId": "1002"
}
],
"parId": "10"
},
{
"id": "1003",
"text": "一级节点2",
"children": "",
"parId": "10"
},
{
"id": "1001",
"text": "一级节点3",
"children": [
{
"id": "100101",
"text": "二级节点33",
"children": "",
"parId": "1001"
}
],
"parId": "10"
}
],
"parId": "-1"
}
]