1.安装treeview控件,页面导入几个js
<link rel="stylesheet" href="<%=path %>/treeview/jquery.treeview.css" />
<link rel="stylesheet" href="<%=path %>/treeview/screens.css" />
<script src="<%=path %>/treeview/lib/jquery.js" type="text/javascript"></script>
<script src="<%=path %>/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
<script src="<%=path %>/treeview/jquery.treeview.js" type="text/javascript"></script>
<script src="<%=path %>/treeview/jquery.treeview.edit.js" type="text/javascript"></script>
2.定义Node类型
public class Node {
private String id;
private String parentId;
private String name;
private String link;
set....
get......
3.将数据从数据库查出存入List<Node>中
while (rs.next()) {
Node cate = new Node();
cate.setId(rs.getString("code"));
cate.setName(rs.getString("name"));
cate.setParentId(rs.getString("parcode"));
nodeList.add(cate);
}
4.将集合遍历生成树
public class Tree {
private StringBuffer html = new StringBuffer();
private List<Node> nodes;
List <Node> deleList = new ArrayList<Node>();//存放需要从Nodes中删除的节点
public Tree(List<Node> nodes) {
this.nodes = nodes;
}
public String buildTree() {
html.append("<ul id=\"browser\" class=\"filetree\">");
Node head =nodes.get(0);
html.append("\r\n<li id=\"" + head.getId() + "\" ><span class=\"folder\" οnclick=\"turn("+head.getId()+")\">" + head.getName()
+ "</span></li>");
for (Node node : nodes) {
build(node);
}
html.append("\r\n</ul>");
return html.toString();
}
private void build(Node node) {
List<Node> children = getChildren(node);
if (!children.isEmpty()) {
html.append("\r\n<ul>");
for (Node child : children) {
String id = child.getId();
if(isHasChildren(child.getId())){
html.append("\r\n<li id=\"" + id + "\" ><span class=\"folder\" οnclick=\"parId('"+id+"')\">" + child.getName()
+ "</span></li>");
}else {
html.append("\r\n<li id=\"" + id + "\" ><span class=\"file\" οnclick=\"turn('"+id+"')\" οnmοuseοver=\"this.style.cursor='hand'\">" + child.getName()
+ "</span></li>");
}
deleList.add(child);
build(child);
}
html.append("\r\n</ul>");
}
}
private List<Node> getChildren(Node node) {
List<Node> children = new ArrayList<Node>();
String id = node.getId();
for (Node child : nodes) {
if(!ishas(child.getId())){
if (id.equals(child.getParentId())) {
children.add(child);
}
}
}
return children;
}
/**
* 判断是否为deleList集合内的节点
* @param nodesb
* @return
*/
private boolean ishas(String id) {
for(int i=0;i<deleList.size();i++){
if(deleList.get(i).getId().equals(id)){
return true;
}
}
return false;
}
/**
* 判断有没有孩子
* @param nodesb
* @return
*/
private boolean isHasChildren(String id) {
for (Node child : nodes) {
if (id.equals(child.getParentId())) {
return true;
}
}
return false;
}
}
5.jsp页面调用Java页面方法
<%
Bean bean =Bean.getBean();
List<Node> node = bean.getSysfuncTree();
funcTree trees = new funcTree(node);
%>
<%= trees.buildTree(roleid) %>