本文介绍如何使用JSP、JavaScript及JSTL标签库实现动态树形选择器，该选择器能够从服务器获取区域数据并构建为树形结构进行展示，支持编辑和删除操作。
效果如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>添加区域</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<script type="text/javascript">
var data = new Array();
/**
data[0] = {id: '0',pid: '1',text: '河北'};
data[1] = {id: '1',pid: '-1',text: '中国'};
data[2] = {id: '2',pid: '6',text: '莫斯科'};
data[3] = {id: '3',pid: '0',text: '邯郸'};
**/
var i=0;
var temp;
<c:forEach items="${allRegions}" var="r">
<c:if test="${r.regionId gt 1}">
data[i] = {id: '${r.regionId}',pid: '${r.superiorRegion.regionId}',text: '${r.regionName}'};
i=i+1;
</c:if>
</c:forEach>
function TreeSelector(item, data, rootId) {
this._data = data;
this._item = item;
this._rootId = rootId;
this._item.options.add(new Option('无',1 ));//如果是顶级目录
}
TreeSelector.prototype.createTree = function() {
var len = this._data.length;//获取数据的长度
for (var i = 0; i < len; i++) {
if (this._data[i].pid == this._rootId) {
this._item.options.add(new Option(this._data[i].text, this._data[i].id));
var a=document.createElement("tr");
a.style="border:1px solid red";
a.innerHTML="<td>"+this._data[i].text+"</td>"+
"<td><a href='region!edit.action?regionName="+this._data[i].text+"®ionId="+this._data[i].id+"'>编辑</a></td>"+
"<td><a href='region!deleteRegion.action?regionId="+this._data[i].id+"'>删除</a></td>";
document.getElementById("test").appendChild(a);
for (var j = 0; j < len; j++) {
this.createSubOption(len, this._data[i], this._data[j]);
}
}
}
}
TreeSelector.prototype.createSubOption = function(len, current, next) {
var blank = "";
if (next.pid == current.id) {
intLevel = 0;
var intlvl = this.getLevel(this._data, this._rootId, current);
for (a = 0; a <= intlvl; a++) blank += " ";
this._item.options.add(new Option(blank + next.text, next.id));
var a=document.createElement("tr");
a.style="border:1px solid red";
a.innerHTML="<td>"+blank + next.text+"</td>"+
"<td><a href='region!edit.action?regionName="+blank + next.text+"®ionId="+next.id+"'>编辑</a></td>"+
"<td><a href='region!deleteRegion.action?regionId="+next.id+"'>删除</a></td>";
document.getElementById("test").appendChild(a);
for (var j = 0; j < len; j++) {
this.createSubOption(len, next, this._data[j]);
}
}
}
TreeSelector.prototype.getLevel = function(datasources, topId, currentitem) {
var pid = currentitem.pid;
if (pid != topId) {
for (var i = 0; i < datasources.length; i++) {
if (datasources[i].id == pid) {
intLevel++;
this.getLevel(datasources, topId, datasources[i]);
}
}
}
return intLevel;
}
</script>
<body>
<select style="display:none;" id="myselect" name="myselect"> </select><br/>
<input type="button" value="添加区域" onclick="window.location.href='region-add.jsp'"/><br/><br/>
<s:if test="#session.allRegionsCount>0">
<table id="test" style="text-align: left;">
<tr style="background-color: gray;">
<td style="width: 200px;">区域名称</td>
<td style="width: 100px;">编辑</td>
<td style="width: 100px;">删除</td>
</tr>
</table>
</s:if>
<script language=javascript type="text/javascript">
var ts = new TreeSelector(document.getElementById("myselect"), data, 1);
ts.createTree();
</script>
</body>
</html>
事实上，这里还有一个小问题：
<select style="display:none;" id="myselect" name="myselect"> </select>
这个本来是不需要的，但是为什么又还有呢？
因为我其实是修改的别人的代码，之前的样式如下：
我只是在原来添加数据的地方，接着添加我需要的数据
但是，目前我还没有办法删掉这个东西，暂时先放着，有时间再来弄
效果出来了最重要，嘿嘿 O(∩_∩)O~
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
