<!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>
action方法:
public ActionForward jsonJorg(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
//组织树的顶层节点信息
Map m = new HashMap();
m.put("id", "9903");
m.put("name", "业务单元");
m.put("data", "");
Map tree = getCurr(m);
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;
}
//得到当前节点的子节点内容
public Map getCurr(Map m){
String currId = (String)m.get("id");
List childMap = new ArrayList();
List childList = BatchIssueManageDAO.getChildren(currId);
//有孩子节点,本身非叶子节点
if(childList!=null && childList.size()>0){
//java的内部集合数据的处理机制,比单纯的for循环速度快,内容消耗还不是随机的,不会造成内存碎片
Iterator it = childList.iterator();
while(it.hasNext()){
Map mi = (Map)it.next();
mi.put("id", mi.get("ID"));
mi.put("name", mi.get("NAME"));
childMap.add(mi);
m.put("children", childMap);
getCurr(mi);//递归查找子节点的下级信息
}
}else{
m.put("children", "");
}
return null;
}
后端的DAO简单,就是一个select,此处不再详述!
相关推荐
n后问题---递归回溯法 n后问题---递归回溯法 n后问题---递归回溯法 n后问题---递归回溯法 n后问题---递归回溯法 n后问题---递归回溯法 n后问题---递归回溯法 n后问题---递归回溯法 n后问题---递归回溯法 n后问题---...
n后问题--非递归迭代回溯.rar n后问题--非递归迭代回溯.rar n后问题--非递归迭代回溯.rar n后问题--非递归迭代回溯.rar n后问题--非递归迭代回溯.rar n后问题--非递归迭代回溯.rar
在Vue.js框架中,Ant Design Vue是一个非常流行的UI组件库,它提供了丰富的界面元素和设计模式,便于开发者构建美观且功能强大的Web应用。本项目主要关注的是Ant Design Vue中的菜单(Menu)组件,特别是如何处理...
遍历递归的先中後序, 非递归的先中後序, 计算出深度 结点数 /* 运行结果: ------------------------ 请先序输入二叉树(如:ab三个空格表示a为根节点,b为左子树的二叉树) ab c 先序递归遍历二叉树: a b c 先序...
哈夫曼编码实现_c语言 (最小堆) 求WPL -----递归求解
递归算法是软件开发中一个看似令人畏惧的主题,但其实不必害怕。递归是指事物以其自身定义,代码调用自身,以及对象指向自身的映像,这些定义似乎暗示着无限和悖论。然而,掌握递归的关键在于不要将其视为无限的悖论...
[6.6.1]--413递归小结.srt
[6.6.1]--413递归小结.mp4
[5.3.1]--403递归调用的实现.srt
[5.3.1]--403递归调用的实现.mp4
在这一过程中,递归函数通过不断地划分问题直到达到基本情况(base case)来简化问题,然后再逐步解决每个子问题以构建最终解。递归程序设计与栈(stack)有着紧密的联系,因为函数调用的上下文依赖于栈的机制来保存...
U-Net的落地应用基于U-Net的递归残差卷积神经网络(R2U-Net)在医学图像分割中的应用
### Java程序设计基础:方法的递归调用 #### 一、递归调用概念 递归调用是指在一个方法内部直接或者间接地调用自身的过程。递归调用是解决问题的一种有效方式,尤其适用于那些可以通过分解成更小规模相同问题来...
Go语言介绍(十七)--Go 语言递归函数
[5.5.1]--405递归可视化:谢尔宾斯基三角.srt
[5.6.1]--406递归的应用:汉诺塔.srt
[5.4.1]--404递归可视化:分形树.srt
[5.7.1]--407递归的应用:探索迷宫.srt
[5.7.1]--407递归的应用:探索迷宫.mp4
[5.5.1]--405递归可视化:谢尔宾斯基三角.mp4