一：数据库数据
二：java代码
public void treeJson() {
String sql = "SELECT id,name text from gym_centers where pid=?";
List<Record> pros = Db.find(sql, 0);
for (int i = 0; i < pros.size(); i++) {
int id = pros.get(i).getInt("id");
String name = pros.get(i).getStr("text");
pros.get(i).set("state", "open");
List<Record> citys = Db.find(sql, id);
List<Record> r2 = new ArrayList<Record>();
for (int j = 0; j < citys.size(); j++) {
Record r = new Record();
int cityId = citys.get(j).getInt("id");
String cityName = citys.get(j).getStr("text");
// r.set("id", cityId);
r.set("text", cityName);
List<Record> gyms = Db.find(sql, cityId);
List<Record> r4 = new ArrayList<Record>();
for (int k = 0; k < gyms.size(); k++) {
Record r3 = new Record();
int gymId = gyms.get(k).getInt("id");
String gymName = gyms.get(k).getStr("text");
// r3.set("id", gymId);
r3.set("text", gymName);
r4.add(k, r3);
}
r2.add(j, r);
r2.get(j).set("child", r4);
}
pros.get(i).set("child", r2);
System.err.println(pros.get(i));
}
renderJson(JsonKit.toJson(pros));
}
三：返回的json数据
四：页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>树状图示例</title>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#tt2').tree({
data : [ {
text : '北京市',
state : 'open',
children : [ {
text : '朝阳区'
}, {
text : '房山区'
} ]
}, {
text : '河北省'
} ]
});
});
</script>
<script type="text/javascript">
function _get() {
$.ajax({
url : "/statistic/treeJson",
type : "post",
dataType : "json",
success : function(result) {
if (result) {
console.log(result);
$('#tt2').tree({
data : result
});
}
}
});
}
</script>
</head>
<body>
<div>
<ul id="tt1" class="easyui-tree" animate="true" dnd="true">
<li><span>F</span>
<ul>
<li state="closed"><span>F1</span>
<ul>
<li><span><a href="#">F 11</a></span></li>
<li><span>F 12</span></li>
<li><span>F 13</span></li>
</ul></li>
<li><span>F 2</span></li>
<li><span>F 3</span></li>
<li>F 4</li>
<li>F 5</li>
</ul></li>
<li><span>F2</span></li>
</ul>
</div>
<p>动态加载数状</p>
<button onclick="_get();">加载</button>
<div>
<ul id="tt2"></ul>
</div>
</body>
</html>
五：静态页面显示
六：加载数据库数据（点击加载按钮）
七：如有疑问，请在下面留言或者加我QQ