jOrgChart横向的组织机构树--手工构造json数据

zengshaotao

浏览: 786663 次
性别:
来自: 上海

最近访客更多访客>>

njdccy

AK1343794853

chehaoj

jstl1point0

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

<!DOCTYPE html>

<title>jOrgChart - A jQuery OrgChart Plugin</title>

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() {

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>

<a class="brand" href="#">jQuery Organisation Chart</a>

</div>

</body>

</html>

分享到：

jOrgChart 后端取数--手工构建map | jOrgChart的调试模式

2016-03-02 17:41
浏览 1262
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论