版权声明：有问题可以大家一起交流学习！ https://blog.csdn.net/laonayonghaifeisi/article/details/51926349
treeTable是跨浏览器、性能很高的jquery的树表组件，它使用非常简单，只需要引用jquery库和一个js文件，接口也很简单。
优点
兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以
组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等
提供两种风格: 通过参数来设置风格
配置参数
theme: string {主题，有两个选项：default、vsStyle. 默认:default}
expandLevel: int {树表的展开层次. 默认:1}
column: int {可控制列的序号. 默认:0，即第一列}
onSelect: function {拥有controller自定义属性的元素的点击事件，return false则中止展开. 默认值:
function($treeTable, id) {
//$treeTable 当前树表的jquery对象.
//id 当前行的id
//返回false，则直接退出，不会激发后面的beforeExpand和子节点的展开
return true;
}
beforeExpand: {展开子节点前触发的事件, 默认值：
function($treeTable, id) {
//$treeTable 当前树表的jquery对象.
//id 当前行的id
}
属性说明
id: string 行的id
pId: string 父行的id
controller: bool 指定某一个元素是否可以控制行的展开
hasChild: bool 指定某一个tr元素是否有孩子（动态加载需用到）
isFirstOne: bool 指定某一个tr元素是否是第一个孩子（自动生成属性，只读）
isLastOne: bool 指定某一个tr元素是否是最后一个孩子（自动生成属性，只读）
prevId: string 前一个兄弟节点的id（自动生成属性，只读）
depth: string 当前行的深度（自动生成属性，只读）
使用递归循环把list对象转换为树形菜单结构
package com.yydhy.treetable;
import java.util.ArrayList;
import java.util.List;
/**
* 根据实体类生成属性表格菜单 实体类有两个必须属性（set get方法） 会自动按照（id/pid）顺序递归对list集合内容排序 String
* depart_id;//唯一id String parentid;//父id
*此处如果父ID和id不同 可以修改代码中相关代码就可以
* @author Administrator
*/
public class TreeList {
private List<Department> resultNodes = new ArrayList<Department>();//树形结构排序之后list内容
private List<Department> nodes; //传入list参数
public TreeList(List<Department> nodes) {//通过构造函数初始化
this.nodes = nodes;
}
/**
* 构建树形结构list
* @return 返回树形结构List列表
*/
public List<Department> buildTree() {
for (Department node : nodes) {
String id = node.getDepart_id();
if (node.getParentid() == null) {//通过循环一级节点 就可以通过递归获取二级以下节点
resultNodes.add(node);//添加一级节点
build(node);//递归获取二级、三级、。。。节点
}
}
return resultNodes;
}
/**
* 递归循环子节点
*
* @param node 当前节点
*/
private void build(Department node) {
List<Department> children = getChildren(node);
if (!children.isEmpty()) {//如果存在子节点
for (Department child : children) {//将子节点遍历加入返回值中
resultNodes.add(child);
build(child);
}
}
}
/**
* @param node
* @return 返回
*/
private List<Department> getChildren(Department node) {
List<Department> children = new ArrayList<Department>();
String id = node.getDepart_id();
for (Department child : nodes) {
if (id.equals(child.getParentid())) {//如果id等于父id
children.add(child);//将该节点加入循环列表中
}
}
return children;
}
}
Department.java 实体类对象 最重要两个属性depart_id 和parentid （父 depart_id属性）
public class Department implements java.io.Serializable {
private static final long serialVersionUID = 1L;
// Fields
private String depart_id;//唯一id
private String parentid;//父id
private String depart_name;
private Integer depart_type;
private Integer depart_order;
private Integer status;
private String address;
private String depart_phone;
private String organ_id;
private Date del_time;
private Date create_time;
public Department() {
}
//。。。省略set和get方法
}EL表达式调用页面
<%@page import="com.yydhy.treetable.TreeList"%>
<%@page import="com.yydhy.treetable.DepartmentDAO"%>
<%@page import="com.yydhy.treetable.Department"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树表控件</title>
<style type="text/css">
table,td,th { border: 1px solid #8DB9DB; padding:5px; border-collapse: collapse; font-size:16px; }
</style>
<!--此处引入自己的样式表和js文件 官方提供的 jquery.treeTable.js 文件引入jquery.treeTable.css 文件路径有问题
如果F12 调试找不到该文件 可以直接在页面中引入 写成固定路径
修改jquery.treeTable.js 这里即可
window.SITE_URL = window.SITE_URL || '';
if (document.location.href.indexOf('http://') != 0) {
var path = '../js/treeTable/';
} else {
var path = SITE_URL + 'js/treeTable/';
}
引用的文件 Begin-->
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/treeTable/jquery.treeTable.js" type="text/javascript"></script>
<!--引用的文件 End-->
<script type="text/javascript">
// 初始化表格样式和树形结构
$(function () {
var option1 = {
theme: 'vsStyle', //显示样式
expandLevel: 3, //展开三级分类
};
$('#treeTable1').treeTable(option1);//根据表格id来初始化
});
</script>
</head>
<body>
<div id="page">
<fieldset>
<legend>演示</legend>
<table id="treeTable1" style="width:100%">
<tr>
<td style="width:200px;">标题</td>
<td>内容一</td>
<td>内容二</td>
</tr>
<c:forEach var="item" items="${listTree}" varStatus="status">
<!--判断元素是否是一级节点-->
<c:if test="${item.parentid!=null}">
<tr id='${item.depart_id}' pid='${item.parentid}'>
<td>${item.depart_name}</td>
<td>${item.depart_name}</td>
<td>${item.depart_id}</td>
</tr>
</c:if>
<c:if test="${item.parentid==null}">
<tr id='${item.depart_id}'>
<td> <span controller='true'>789 ${item.depart_name}</span></td>
<td>${item.depart_name}</td>
<td>${item.depart_id}</td>
</tr>
</c:if>
</c:forEach>
<!--数据库加载内容开始-->
<!--可以通过el表达式直接调用 也可以通过Java代码调用 -->
<!--如果使用ajax也可以 只需要在后台请求地址中打包成json格式返回 在回调函数中 然后根据表格ID 往表格里面添加json内容即可-->
<!--数据库加载内容结束-->
</table>
</fieldset>
</div>
</body>
</html>
Ajax调用数据库内容json 实现
<%@page import="com.yydhy.treetable.TreeList"%>
<%@page import="com.yydhy.treetable.DepartmentDAO"%>
<%@page import="com.yydhy.treetable.Department"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树表控件</title>
<style type="text/css">
table,td,th { border: 1px solid #8DB9DB; padding:5px; border-collapse: collapse; font-size:16px; }
</style>
<!--此处引入自己的样式表和js文件 官方提供的 jquery.treeTable.js 文件引入jquery.treeTable.css 文件路径有问题
如果F12 调试找不到该文件 可以直接在页面中引入 写成固定路径
修改jquery.treeTable.js 这里即可
window.SITE_URL = window.SITE_URL || '';
if (document.location.href.indexOf('http://') != 0) {
var path = '../js/treeTable/';
} else {
var path = SITE_URL + 'js/treeTable/';
}
引用的文件 Begin-->
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/treeTable/jquery.treeTable.js" type="text/javascript"></script>
<!--引用的文件 End-->
<script type="text/javascript">
function ajaxSubmitTest() {
console.info("正在执行Ajax请求");
$.ajax({
type: "post",
url: "TreeServlet", //Servlet请求地址
dataType: "json",
success: function (data) {
var con = data.rows;//获取json中的list列表
var showContent = "";//添加内容变量
for (var i = 0, l = con.length; i < l; i++) {
var a = con[i];
if (a.parentid == null) { //判断是否是一级节点
showContent += "<tr id='" + a.depart_id + "'>";
showContent += "<td><span controller='true'>" + a.depart_name + "</span></td>";
showContent += "<td>" + a.depart_name + "</td>";
showContent += "<td>" + a.depart_id + "</td>";
showContent += "</tr>";
} else {
showContent += "<tr id='" + a.depart_id + "' pid='" + a.parentid + "'>";
showContent += "<td>" + a.depart_name + "</td>";
showContent += "<td>" + a.depart_name + "</td>";
showContent += "<td>" + a.depart_id + "</td>";
showContent += "</tr>";
}
}
$("#treeTable1").append(showContent);
//以下为初始化表格样式
var option = {
theme: 'vsStyle',
expandLevel: 2,
};
$('#treeTable1').treeTable(option);
console.info("内容已经加载并初始化");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
console.info("数据请求异常 请查看控制台错误 或者检查servlet配置")
}
});
}
$(function () {
ajaxSubmitTest(); //调用ajax初始化内容
});
</script>
</head>
<body>
<div id="page">
<fieldset>
<legend>演示</legend>
<table id="treeTable1" style="width:100%">
<tr>
<td style="width:200px;">标题</td>
<td>内容一</td>
<td>内容二</td>
</tr>
</table>
</fieldset>
</div>
</body>
</html>
Java后台打包json数据库
public class TreeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
Map<String, Object> map = new HashMap<String, Object>();
DepartmentDAO dao = new DepartmentDAO();
List<Department> list = dao.getDepartments();
TreeList tree = new TreeList(list);
List<Department> listTree = tree.buildTree();
map.put("rows", listTree);
map.put("total", listTree.size());
String str = JSONObject.toJSONString(map);
response.getWriter().write(str);
}
}mysql数据库创建语句 sql语句在项目web目录中
DROP TABLE IF EXISTS `department_info`;
CREATE TABLE `department_info` (
`depart_id` varchar(32) NOT NULL COMMENT '部门id',
`depart_name` varchar(50) DEFAULT NULL COMMENT '部门名称',
`parentid` varchar(32) DEFAULT NULL COMMENT '部门父id',
`depart_type` int(11) DEFAULT '1' COMMENT '类型(1 联社 2部门 3网点)',
`depart_order` int(11) DEFAULT NULL COMMENT '排序号',
`del_time` datetime DEFAULT NULL COMMENT '删除时间',
`address` varchar(500) DEFAULT NULL,
`depart_phone` varchar(11) DEFAULT NULL,
`organ_id` varchar(32) DEFAULT NULL COMMENT '机构ID',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`status` int(11) DEFAULT '1' COMMENT '状态（1：可见，2：隐藏）',
PRIMARY KEY (`depart_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of department_info
-- ----------------------------
INSERT INTO `department_info` VALUES ('0c0a656e48ac4070bc9d815c7d941fc5', '办公室', null, '1', null, null, null, null, null, '2016-07-05 14:59:50', '1');
INSERT INTO `department_info` VALUES ('0e655c7c298a4efdb3fafeeac2c8a049', '昆明北京路营业厅', 'ffadacc1bd964999a666b87642ea4813', '3', null, null, '昆明北京路', '123456', null, null, '1');
INSERT INTO `department_info` VALUES ('1bdf8270e8654e40866f2a95f3a3b37d', '信贷部', null, '1', null, null, null, null, null, '2016-07-10 15:42:05', '1');
INSERT INTO `department_info` VALUES ('689786b7253a405aa94008f81e222512', '昆明信贷', '1bdf8270e8654e40866f2a95f3a3b37d', '2', null, null, '昆明', '123456', null, null, '1');
INSERT INTO `department_info` VALUES ('7dba664830e8480cb5dbf142bf668262', '玉溪信贷部', '1bdf8270e8654e40866f2a95f3a3b37d', '2', null, null, '玉溪', '123456', null, null, '1');
INSERT INTO `department_info` VALUES ('9213d0c55fa44185bb7559eeed7ceea1', '营业部', null, '1', null, null, null, null, null, '2016-07-05 15:00:06', '1');
INSERT INTO `department_info` VALUES ('b28c8b7074db49b1b835beb894feace7', '党建部', null, '1', null, null, null, null, null, '2016-07-10 15:41:04', '1');
INSERT INTO `department_info` VALUES ('b436cb4faef7456aa1e169c7fa4cfffa', '昆明拓东营业厅', 'ffadacc1bd964999a666b87642ea4813', '3', null, null, '昆明拓东', '123456', null, null, '1');
INSERT INTO `department_info` VALUES ('c30287fd04f943bebe2e2d441dcaab9d', '玉溪信贷部', '1bdf8270e8654e40866f2a95f3a3b37d', '1', null, '2016-07-10 15:54:02', '玉溪', '11', 'f7b9d748061948e693b54d86c9344a81', null, '1');
INSERT INTO `department_info` VALUES ('c54f9a0d66434ffa87054004cb1dca01', '昆明办公室', '0c0a656e48ac4070bc9d815c7d941fc5', '2', null, null, '昆明', '123456', null, null, '1');
INSERT INTO `department_info` VALUES ('d0f5d72cb64c40f3be0a510141467253', '玉溪营业厅', '9213d0c55fa44185bb7559eeed7ceea1', '3', null, null, '玉溪', '123456', null, null, '1');
INSERT INTO `department_info` VALUES ('e11fdd8b107647bda4fbef1b8ebb015c', '玉溪办公室', '0c0a656e48ac4070bc9d815c7d941fc5', '2', null, null, '玉溪', '123456', null, null, '1');
INSERT INTO `department_info` VALUES ('ec3d13c0c6db4e2084470eda5f8b294e', '科技部', null, '1', null, null, null, null, null, '2016-07-10 15:41:34', '1');
INSERT INTO `department_info` VALUES ('ffadacc1bd964999a666b87642ea4813', '昆明营业厅tqm', 'c54f9a0d66434ffa87054004cb1dca01', '2', null, null, '昆明', '123456', null, null, '1');
下载地址：http://download.csdn.net/detail/laonayonghaifeisi/9577951
大家可以下载看看 里面的递归获取子节点算法 很有意思