org_chart.js 使用方法

最新推荐文章于 2025-11-15 18:06:38 发布

转载最新推荐文章于 2025-11-15 18:06:38 发布 · 688 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Evaniko/p/6427711.html

文章标签：

#json

本文介绍了一种利用Ajax获取JSON数据并将其应用于构建动态组织结构图的方法。通过引用必要的CSS和JS文件，使用jQuery操作DOM，从服务器端通过WebMethod获取组织成员数据，再利用Newtonsoft库将数据序列化为JSON格式，最后使用orgchart插件展示组织结构。文章还展示了如何递归处理子节点数据。

1.引用css
2.引用js
3.ajax获得json数据

1 4.
2  $('#chart-container').orgchart({
3         'data': json,
4         'nodeContent': 'm_name',
5         'nodeTitle': 'm_no'
6   });

 1     json数据
 2        [WebMethod]
 4         public static string GetChart()
 5         {
 6             BLL.T_Member bll = new BLL.T_Member();
 7             Model.T_Member model = bll.GetModel(1);
 8             List<Model.T_Member> all = bll.GetModelList("");
 9              
10             Children(all, model);
11             string json = Newtonsoft.Json.JsonConvert.SerializeObject(model);
12             return json;
13         }
14 
15 
16         public static void Children(List<Model.T_Member> all, Model.T_Member curItem)
17         {
18             var subItems = all.Where(p=> p.m_forid == curItem.m_id).OrderBy(p=> p.m_forpositon).ToList();
19             curItem.children = new List<Model.T_Member>();
20             curItem.children.AddRange(subItems);
21             foreach (var subItem in subItems)
22             {
23                 Children(all, subItem);//新闻1.1
24             }
25         }