<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>动态增加“树”节点</title>
<!-- 1：引入文件 -->
<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<link href="lib/ligerUI/skins/Aqua/css/ligerui-tree.css"
rel="stylesheet" type="text/css" />
<script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
<!-- 2：配置数据 -->
<script type="text/javascript">
var manager = null;
$(function() {
//显示图标
$("#.l-tree").ligerTree({
checkbox : true
});
manager = $("#.l-tree").ligerGetTreeManager();
});
//添加节点
function addTreeItem() {
var node = manager.getSelected();//获取当前指定的节点
var nodes = [];
nodes.push({
text : $("#txtNode").val()
});
if (node) {//如果选择了节点，就添加节点
manager.append(node.target, nodes);
} else {
manager.append(null, nodes);
}
}
//添加多个节点
function addTreeItems(){
var node = manager.getSelected();
var nodes=[];
nodes.push({text:$("#txtNode").val(),
children:[{text:'子1'},{text:'子2'}]
});
if(node){
manager.append(node.target,nodes);
}else{
manager.append(null,nodes);
}
}
//删除节点
function removeTreeItem() {
var node = manager.getSelected();
if (node) {
manager.remove(node.target);
} else {
alert('请先选择节点');
}
}
//清空节点
function clearTreeItem() {
manager.clear();
}
</script>
</head>
<body>
带复选框和图标，动态添加、删除、清空节点
<br>
<input type="text" class="l-text" value="节点名" id="txtNode"
style="display:block; float:left; margin-right:10px;" />
<a class="l-button" onclick="addTreeItem()"
style="float:left;margin-right:10px;">增加节点</a>
<a class="l-button" onclick="removeTreeItem()"
style="float:left;margin-right:10px;">删除节点</a>
<a class="l-button" onclick="clearTreeItem()"
style="float:left;margin-right:10px;">清空节点</a>
<a class="l-button" onclick="addTreeItems()"
style="width:150px;float:left;margin-right:10px;">增加节点(带子节点)</a>
<br>
<!-- 2：编写HTML -->
<div
style="width:200px; height:300px; border:1px solid #ccc; overflow:auto; clear:both;">
<ul class="l-tree">
<li><span>节点1</span>
<ul>
<li><span>节点1.1</span>
<ul>
<li><span>节点1.1.1</span></li>
<li><span>节点1.1.2</span></li>
</ul></li>
<li><span>节点1.2</span></li>
</ul></li>
<li><span>节点2</span></li>
<li isexpand="false"><span>节点3</span>
<ul>
<li><span>节点3.1</span></li>
<li><span>节点3.2</span></li>
</ul></li>
</ul>
</div>
<div style="display:none"></div>
<a href="index6.jsp">下一效果：</a>
</body>
</html>