treetable是jquery的树表控件，如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>treeTable 静态测试</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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- css引入和js引入-->
<!--<link rel="stylesheet" href="screen.css" />-->
<link rel="stylesheet" href="jquery.treetable.css" />
<link rel="stylesheet" href="jquery.treetable.theme.default.css" />
<style>
tr{border:1px solid}
td{border:1px solid;}
table{ border-collapse:collapse; width:60%; margin-left:20%; margin-top:5%}
cursor:pointer
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.treetable.js"></script>
<script type="text/javascript">
$(function(){
/*var option = {
theme:'vsStyle',
expandLevel : 2,
beforeExpand : function($treeTable, id) {
//判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
//alert('coming~~~');
console.log("当前行的id：" + id);
//if ($('.' + id, $treeTable).length) { return; }
//这里的html可以是ajax请求
var html = '<tr id="8" pId="6"><td>5.1</td><td>可以是ajax请求来的内容</td></tr>'
+ '<tr id="9" pId="6"><td>5.2</td><td>动态的内容</td></tr>';
$treeTable.addChilds(html);
},
onSelect : function($treeTable, id) {
window.console && console.log('onSelect:' + id);
}
};
//$('#treeTable1').treetable(option);*/
var option = {
expandable: true,
clickableNodeNames:true,
expandable: true
}
$('#treeTable1').treetable(option);
});
</script>
</head>
<body>
<table id="treeTable1" style=" ">
<tr>
<td style="width: 200px;">标题</td>
<td>链接</td>
<td>排序</td>
<td>可见</td>
<td>权限标识</td>
<td>操作</td>
</tr>
<tr data-tt-id="0">
<td>
<span controller="true"><a href="#">系统设置</a></span></td>
<td>顶级内容</td>
<td><input type="text" value="2"/></td>
<td>显示</td>
<td>运营者(1)</td>
<td><a href="#">修改</a> <a href="#">删除</a> <a href="#">添加下级菜单</a> </td>
</tr>
<tr data-tt-id="10" data-tt-parent-id="0">
<td>
<span controller="true"><a href="#">机构用户</a></span></td>
<td>内容1</td>
<td><input type="text" value="2"/></td>
<td>显示</td>
<td>运营者(1)</td>
<td><a href="#">修改</a> <a href="#">删除</a> <a href="#">添加下级菜单</a> </td>
</tr>
<tr data-tt-id="10-1" data-tt-parent-id="10">
<td>
<span controller="true"><a href="#">用户管理</a></span></td>
<td>内容1-1</td>
<td><input type="text" value="2"/></td>
<td>显示</td>
<td>运营者(1)</td>
<td><a href="#">修改</a> <a href="#">删除</a> <a href="#">添加下级菜单</a> </td>
</tr>
<tr data-tt-id="10-1-1" data-tt-parent-id="10-1">
<td>
<span controller="true"><a href="#">用户管理下的</a></span></td>
<td>内容1-1-1</td>
<td><input type="text" value="2"/></td>
<td>显示</td>
<td>运营者(1)</td>
<td><a href="#">修改</a> <a href="#">删除</a> <a href="#">添加下级菜单</a> </td>
</tr>
<tr data-tt-id="10-6" data-tt-parent-id="10">
<td>
<span controller="true"><a href="#">机构管理</a></span></td>
<td>内容1-1</td>
<td><input type="text" value="2"/></td>
<td>显示</td>
<td>运营者(1)</td>
<td><a href="#">修改</a> <a href="#">删除</a> <a href="#">添加下级菜单</a> </td>
</tr>
<tr data-tt-id="10-5" data-tt-parent-id="10">
<td>
<span controller="true"><a href="#">区域管理</a></span></td>
<td>内容1-1</td>
<td><input type="text" value="2"/></td>
<td>显示</td>
<td>运营者(1)</td>
<td><a href="#">修改</a> <a href="#">删除</a> <a href="#">添加下级菜单</a> </td>
</tr>
</table>
</body>
</html>
效果如下：
难点在于拼装出理想的数据结构来适应前端的展示。下面模拟从数据库查询出结果并拼装出treetable数据结构的过程（需运用到递归）：
package com.test;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class Test {
/**
* map1
* |----map3
* |----map6
* |----map4
* map2
* |----map5
*/
public static void main(String[] args) {
//模拟查询库然后组装成树的结构
List<Map> list = new ArrayList();
Map<String, String> map1 = new HashMap<String, String>();
map1.put("id", "1");
map1.put("parent_id", "0");
list.add(map1);
Map<String, String> map2 = new HashMap<String, String>();
map2.put("id", "2");
map2.put("parent_id", "0");
list.add(map2);
Map<String, String> map3 = new HashMap<String, String>();
map3.put("id", "3");
map3.put("parent_id", "1");
list.add(map3);
Map<String, String> map4 = new HashMap<String, String>();
map4.put("id", "4");
map4.put("parent_id", "1");
list.add(map4);
Map<String, String> map5 = new HashMap<String, String>();
map5.put("id", "5");
map5.put("parent_id", "2");
list.add(map5);
Map<String, String> map6 = new HashMap<String, String>();
map6.put("id", "6");
map6.put("parent_id", "3");
list.add(map6);
List<Map> list1 = new ArrayList();
List<Map<String, String>> trees = new ArrayList<Map<String, String>>();
for (Map map : list) {
Map<String, String> tree = new HashMap<String, String>();
if (map.get("parent_id").equals("0")) {
map.put("text", map.get("id"));
map.put("parent_text", "0");
tree.put("id_text", (String)map.get("id"));
tree.put("parent_text", "0");
trees.add(tree);
list1.add(map);
List trees2 = getTreeData(trees, list, map);
map.put("list", trees2);
}
}
// for (Map map : list1) {
//
// }
System.out.println(list1);
System.out.println("trees:" + trees);
}
private static List getTreeData(List<Map<String, String>> trees, List<Map> list, Map maps) {
List<Map> list5 = new ArrayList();
for (Map map : list) {
if (maps.get("id").equals(map.get("parent_id"))) {
map.put("text", maps.get("text") + "_" + map.get("id"));
map.put("parent_text", maps.get("text"));
list5.add(map);
Map<String, String> tree = new HashMap<String, String>();
tree.put("id_text", maps.get("text") + "_" + map.get("id"));
tree.put("parent_text", (String)maps.get("text"));
trees.add(tree);
map.put("list", getTreeData(trees, list, map));
}
}
return list5;
}
public static String print(String name) {
return "Hi, " + name;
}
}
运行结果：
[{id=1, text=1, list=[{id=3, text=1_3, list=[{id=6, text=1_3_6, list=[], parent_text=1_3, parent_id=3}], parent_text=1, parent_id=1}, {id=4, text=1_4, list=[], parent_text=1, parent_id=1}], parent_text=0, parent_id=0}, {id=2, text=2, list=[{id=5, text=2_5, list=[], parent_text=2, parent_id=2}], parent_text=0, parent_id=0}]
trees:[{id_text=1, parent_text=0}, {id_text=1_3, parent_text=1}, {id_text=1_3_6, parent_text=1_3}, {id_text=1_4, parent_text=1}, {id_text=2, parent_text=0}, {id_text=2_5, parent_text=2}]
相关推荐
treetable的动态获取子节点，展开前触发ajax从数据库获取数据，拼接成json传给前台，实现动态加载无限极子节点
java 的treetable好东西。
Layui、treeTable、树形表格、无限层级
jquery.treeTable.js jquery.treeTable.js jquery.treeTable.js jquery.treeTable.js jquery.treeTable.js jquery.treeTable.js
近日，需要做一个关于Service的Mapping, 因为排版的需要，需要一个TreeTable，我们用的js框架是dojo，但是定制dojo(1.4)很困难，且我们这个tree table不需要太多的功能，所以最终决定自己实现一个，API类似于dojo的...
treetable这个jquery插件 的演示demo,带完整的jquery,treetable和css依赖
jquery.treetable,.js下载.基于jquery的表格插件,table,表格,treetable,资源下载
JQuery Treetable,可以动态加载数据，在客户端生成treetable
Layui的树形组件treetable的使用所需的插件工具包，Layui的树形组件treetable的使用所需的插件工具包，Layui的树形组件treetable的使用所需的插件工具包
jquery TreeTable代码示例
treeTable的小例子，很简单，写的很详细，一看就会
采用了layui treetable框架，实现树形目录。内容有页面、后台和js。
对网上的树形表格treeTable进行了二次开发扩展，带演示demo例子
jquery 控件编写的最新控件treeTable jquery-treetable-3.2.0.zip 组件，方便与页面的使用。
JQuery TreeTable 具体参考
TreeTable,用于展开/折叠table的行:比如,类别展示
jquery treetablejquery treetablejquery treetablejquery treetablejquery treetablejquery treetable
Jquery的treeTable实现树型结构显示数据，里面有官方Demo以及我剥离出来的一个Demo便于理解
C# 实例treeTable.zip
这是js实现的treeTable插件，是从jeesite中剥离出来的，通过里面的jsp页面以及Demo可以知道如何使用