treetable的后台算法
程序员文章站
2022-05-12 18:33:34
...
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}]
上一篇： 甘肃天水秦州区旅游哪里最好玩，秦州区有什么好玩的地方
下一篇： 你了解GC吗？一文读懂分代回收机制