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}]