<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jOrgChart - A jQuery OrgChart Plugin</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<!-- jQuery includes -->
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script src="jquery.jOrgChart.js"></script>
<script>
jQuery(document).ready(function () {
loadtree();
});
//menu_list為json資料
//parent為要組合成html的容器
function showall(menu_list, parent) {
for (var menu in menu_list) {
//如果有子節點，則遍歷該子節點
if (menu_list[menu].children.length > 0) {
//建立一個子節點li
var li = $("<li></li>");
//將li的文字設定好，並馬上新增一個空白的ul子節點，並且將這個li新增到父親節點中
$(li).append(" <a href='javascript:void(0)' onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").append("<ul></ul>").appendTo(parent);
//將空白的ul作為下一個遞迴遍歷的父親節點傳入
showall(menu_list[menu].children, $(li).children().eq(1));
}else {
//如果該節點沒有子節點，則直接將該節點li以及文字建立好直接新增到父親節點中
$("<li></li>").append(" <a href='javascript:void(0)' onclick='defineFunc(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").appendTo(parent);
}
}
}
function loadtree() {
$.ajax({
url: '<%=request.getContextPath()%>/batchIssueManage.do?method=jsonJorg',
type : "post",
error: function () { alert('Error loading PHP document'); },
dataType : 'json',
success: function (result) {
// var json = eval("["+result+"]");//這裡中間的括號為中括號 使資料類似[{"username":"張三","content":"沙發"}];的格式
var showlist = $("<ul id='org' style='display:none'></ul>");
showall(result, showlist);
//將生成好的固定格式的ul
$("#f").append(showlist);
$("#org").jOrgChart();
}
});
}
function loadtree111() {
var res = [{
"id": 1,
"name": "根節點",
"children": [
{
"id": 2,
"name": "第二層1",
"data": "",
"children": ""
},
{
"id": 3,
"name": "第二層2",
"data": "",
"children": ""
}
]
}];
//var json = eval("("+res+")");
var showlist = $("<ul id='org' style='display:none'></ul>");
showall(res, showlist);
//將生成好的固定格式的ul
$("#f").append(showlist);
$("#org").jOrgChart();
/* $("#org").jOrgChart({
chartElement : "#chart",
dragAndDrop : false
}); */
}
function defineFunc(id){
alert(id+",ddd");
}
</script>
</head>
<body id="f">
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">jQuery Organisation Chart</a>
</div>
</div>
</div>
<div id="chart" class="orgChart"></div>
</body>
</html>
後端程式碼：
public ActionForward jsonJorg1(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
//遞迴查詢資料庫效率低下，考慮其他的方式
List l2 = new ArrayList();
Map m21 = new HashMap();
m21.put("id", "5");
m21.put("name", "第三層1");
m21.put("data", "");
m21.put("children", "");
Map m22 = new HashMap();
m22.put("id", "6");
m22.put("name", "第三層2");
m22.put("data", "");
m22.put("children", "");
l2.add(m22);
l2.add(m21);
Map m1 = new HashMap();
m1.put("id", "2");
m1.put("name", "第一層1");
m1.put("data", "");
m1.put("children", l2);
Map m2 = new HashMap();
m2.put("id", "3");
m2.put("name", "第二層2");
m2.put("data", "");
m2.put("children", "");
Map m3 = new HashMap();
m3.put("id", "4");
m3.put("name", "第二層3");
m3.put("data", "");
m3.put("children","");
List l = new ArrayList();
l.add(m1);
l.add(m2);
l.add(m3);
Map m = new HashMap();
m.put("id", "1");
m.put("name", "232323");
m.put("data", "");
m.put("children", l);
JSONArray jsonAry = JSONArray.fromObject(m);
String jsonStr = jsonAry.toString();
response.setContentType("text/plain;charset=UTF-8");
//如果這裡不輸出json資訊，前端form提交回撥的success方法就不會執行
try {
response.getWriter().write(jsonStr);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}