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}]
相关推荐
在IT领域，尤其是在Web开发中，"treetable + ajax 后台取数据的完整实现"是一个常见的需求，尤其在处理大数据量或者无限层级的数据结构时。Treetable是一种将表格数据以树形结构展示的技术，它使得用户可以更直观地...
TreeTable的数据通常来自于后台数据库。在Jeesite中，这可能涉及Spring Data JPA或者MyBatis等持久层技术，用于查询和封装数据。前端通过Ajax请求获取数据，然后将数据绑定到表格的各个节点上。 7. **扩展性与...
jquery.treeTable.js jquery.treeTable.js jquery.treeTable.js jquery.treeTable.js jquery.treeTable.js jquery.treeTable.js
在Java编程领域，TreeTable是一种将树形结构与表格数据结合的数据展示组件，它能够以层级方式呈现数据，同时保留了表格的排列和排序功能。这个组件常用于那些需要展示层次关系并且要求用户能进行交互操作的应用场景...
这需要后台接口支持分页和层级查询。 - **懒加载**：只在用户需要时加载子节点，减少初始加载的数据量，提高页面响应速度。 4. **配置和API** - **layTreeTable()**：初始化树形表格的方法，需要传入表格ID、数据...
TreeTable是一种特殊的表格展示方式，它结合了树形结构和表格数据的优点，使得在Web应用中可以更有效地组织和展示层次关系复杂的数据。在本示例中，我们将会深入探讨TreeTable的基础概念、应用场景以及如何实现一个...
LayUI树形表格treetable使用详解
**jQuery TreeTable 知识详解** `jQuery TreeTable` 是一个强大的JavaScript库，它将HTML表格转换为可展开和折叠的树形结构。这个库基于jQuery框架，使得在Web应用中展示层次化数据变得简单易行。在"jquery ...
《jQuery TreeTable：构建动态树形表格的利器》 在Web开发中，数据展示的方式多种多样，其中树形表格作为一种高效的数据组织形式，被广泛应用于各类管理界面和数据展示场景。今天我们将深入探讨jQuery TreeTable...
在这些组件中，树形表格（TreeTable）是一个功能强大的工具，尤其适用于展示具有层级关系的数据。在本篇文章中，我们将深入探讨如何在LayUI中实现和使用TreeTable。 首先，LayUI的TreeTable是在基础的数据表格...
TreeTable是一种特殊的表格控件，它扩展了传统的二维表格功能，允许数据以树形结构进行组织和展示。在计算机用户界面设计中，TreeTable结合了表格（Table）和树视图（TreeView）的优点，为用户提供了一种高效且直观...
**jQuery TreeTable插件详解** 在网页开发中，数据的展示方式多种多样，其中树形表格（TreeTable）是一种常用且高效的数据呈现形式，尤其适用于层次结构清晰、关系复杂的数据。jQuery TreeTable插件就是用来将普通...
**jQuery TreeTable** jQuery TreeTable是一款强大的前端组件，它将普通的HTML表格转化为具有树状结构的数据展示形式。这个组件能够帮助开发者在网页上构建出层次化的数据，使得用户可以更直观地理解和操作复杂的...
下面将详细探讨如何使用jQuery的treetable来实现树形table。 首先，我们需要理解treetable的基本概念。TreeTable是一种结合了表格和树状视图的数据展示方式，它在每个表格行中添加了一个展开/折叠按钮，使得用户...
《jQuery异步treeTable树形插件详解及应用实践》 在Web开发中，数据的展示方式多种多样，其中树形结构是一种常见的数据组织形式，它能够清晰地呈现出层次关系，便于用户理解和操作。jQuery异步treeTable插件是用于...
在Layui中，`treetable`是一个非常有用的树形表格组件，它将表格与树结构相结合，适用于展示层次关系的数据。本文将详细介绍Layui的`treetable`组件以及其使用方法。 首先，`treetable-lay.zip`是一个包含Layui的`...
**jQuery TreeTable控件详解** 在网页开发中，数据的展示方式多种多样，其中树形表格（TreeTable）是一种能够同时展示层次结构和表格数据的高效工具。jQuery TreeTable控件便是实现这一功能的JavaScript库，它使得...
layui是一款优秀的国产前端框架，其内置的treeTable插件则为开发者提供了生成树形表格的功能。本实例将深入探讨如何利用layui treeTable来创建具有展开、关闭效果的树形表格，并结合JSON数据进行绑定。 首先，我们...
layui treetable是一款基于layui框架的扩展组件，用于在网页中展示树形表格数据。layui是一款流行的前端轻量级模块化框架，它以其简洁、优雅的API和丰富的组件库受到开发者的欢迎。在这个项目中，layui treetable被...
**标题：“treetable简单实例”** 在网页开发中，数据展示的方式多种多样，其中一种高效且具有层次感的展示方式就是TreeTable（表格树）。TreeTable结合了表格的行列结构与树形结构的优点，使得复杂的层级数据可以...