convert tree structure from database to json object

Top 6 JavaScript Family Tree Diagram Libraries - DZone Java

https://dzone.com/articles/top-6-javascript-family-tree-diagram-libraries

https://stackoverflow.com/questions/62370136/convert-tree-structure-from-database-to-json-object-in-java

https://stackoverflow.com/questions/34841963/convert-json-object-to-tree-json-object

https://stackoverflow.com/questions/26059419/convert-this-json-data-into-tree-view

https://stackoverflow.com/questions/16294912/serializing-a-tree-into-json-object

https://github.com/Erffun/JsonTree

https://cknotes.com/c-load-a-treeview-from-json-save-a-treeview-to-json/

https://stackoverflow.com/questions/16294912/serializing-a-tree-into-json-object

 https://www.codeproject.com/questions/806044/how-to-conver-multi-level-json-data-to-csharp-obje

 https://github.com/nishiba/object_creator C++

json covert string

 var dd=JSON.stringify(treeDu);

string covert json

var jsontext = '{"firstname":"James","surname":"Bond","mobile":["007-700-007","001-007-007-0007"]}';

var contact = JSON.parse(jsontext);

console.log(contact.firstname + " " + contact.surname);

console.log(contact.mobile[1]);





?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
    var lines = 
   ('1, cars, geovindu0, 0\n' +
    '2, boats, geovindu0, 0\n' +
    '3, oldtimer, geovindu11, 1\n' +
    '4, trucks, geovindu11, 1\n' +
    '5, heavytrucks, geovindu444, 4').split('\n');   //.split('\n')
 
var tree = [];
var lookup = {}; // temporary variable
 
for (var i in lines) {
    var items = lines[i].split(', ');
 
    var obj = { id: items[0], parent_id: items[3], name: items[1], title:items[2], children: [] };
    lookup[obj.id] = obj;
 
    if (lookup[obj.parent_id]) {
        lookup[obj.parent_id].children.push(obj);
    } else {
        tree.push(obj);
    }
}
 
//console.log(tree); // will display your tree
     
     
    </script>




　　




?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Geovin Du 涂聚文</title>
 <link rel="stylesheet" href="css/jquery.orgchart.css">   
     <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    var lines = 
   ('1, cars, geovindu0, 0\n' +
    '2, boats, geovindu0, 1\n' +
    '3, oldtimer, geovindu11, 1\n' +
    '4, trucks, geovindu11, 3\n' +
    '5, heavytrucks, geovindu444, 4').split('\n');   //.split('\n')//根只有一个记录
 
var treeDu = [];
var lookup = {}; // temporary variable
 
for (var i in lines) {
    var items = lines[i].split(', ');
 
    var obj = { id: items[0], parent_id: items[3], name: items[1], title:items[2], children: [] };
    lookup[obj.id] = obj;
 
    if (lookup[obj.parent_id]) {
        lookup[obj.parent_id].children.push(obj);
    } else {
        treeDu.push(obj);
    }
}
 
console.log(treeDu); // will display your tree
    var dd=JSON.stringify(treeDu);
    console.log(dd);
 $('#du').text(dd); 
     
    var x = { name: "Sivaraman", age: 31, city: "Chennai" };
var y = JSON.stringify(x);
document.getElementById("demo").value=y;
    </script>
</head>
 
<body>
    <div id="demo"></div>
    <div id="du"></div>
<div id="chart-container"></div>
 
  <script type="text/javascript" src="js/jquery.orgchart.js"></script>  
    <script type="text/javascript">
    (function($) {
  $(function() {
      var lines = 
   ('1, cars, geovindu, 0\n' +
    '2, boats, geovindu, 1\n' +
    '3, oldtimer, geovindu, 1\n' +
    '4, trucks, geovindu, 3\n' +
    '5, heavytrucks, geovindu, 4').split('\n');   //.split('\n')
 
var tree = [];
var lookup = {}; // temporary variable
 
for (var i in lines) {
    var items = lines[i].split(', ');
 
    var obj = { id: items[0], parent_id: items[3], name: items[1], title:items[2], children: [] };
    lookup[obj.id] = obj;
 
    if (lookup[obj.parent_id]) {
        lookup[obj.parent_id].children.push(obj);
    } else {
        tree.push(obj);
    }
}
 
//console.log(tree); // will display your tree
var dds=JSON.stringify(tree);    
var str1 = dds.substr(1); //删除首字符
var str2 = str1.substring(0,str1.length-1); //删除最后末字符     
console.log(str2);  
var contact = JSON.parse(str2);   
      /*
      data【json or String】：数据
pan 【boolean 默:flase】：通过鼠标拖放来控制OrgChart
zoom【boolean 默:false】：通过鼠标滚轮放大或缩放OrgChart
zoominLimit【number 默:7】：设置放大限制
zoomoutLimit【number 默:0.5】：设置缩放限制
direction【String 默:t2b】：T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"
verticalLevel【integer(>=2)】：
toggleSiblingsResp【boolean 默:false】：通过单击左/右箭头分别显示/隐藏左/右兄弟节点
ajaxURL【json】：不同的优先级提供了发送不同节点的Ajax请求的URL
visibleLevel【number】：默认展开几级
nodeId【String 默:id】：将数据源的一个属性设置为每个OrgChart节点的唯一标识符。
nodeTitle【String 默:name】：将数据源的一个属性设置为OrgChart节点标题段的文本内容
nodeContent【String】：将数据源的一个属性设置为OrgChart节点的内容部分的文本内容。
nodeTemplate【function】：它是一个模板生成函数，用于定制任何复杂的节点内部结构
createNode【function】：它是用于自定义每个OrgCad节点的回调函数
parentNodeSymbol【String 默:fa-users】：使用图标暗示该节点有子节点
exportButton【boolean 默:false】：是否启用OrgChar的导出按钮
exportFilename【String 默:OrgChart】：当输出当前的OrgChart作为图片时，它是文件名。
exportFileextension【String 默:png】：可用的值是PNG和PDF。
chartClass【String】：当你想在一个页面上实例化多个orgcharts 时，你应该添加不同的类名来区分它们。
draggable【boolean 默:false】：用户可以拖动和删除OrgChart节点
dropCriteria【function】：用户可以构造自己的标准来限制拖动节点和删除区域之间的关系
initCompleted【function】：经常知道您的表何时已经完全初始化、数据加载和呈现，尤其是当使用Ajax数据源时
      */
    var oc = $('#chart-container').orgchart({
      'data' : contact,
      'depth': 12,
        'nodeId':'id',
        //'nodeTitle':'photo',
      'nodeContent': 'title',
        drag: true,//是否可以拖动
       //'direction': 'b2t',
        //'direction': 'r2l',
        //'toggleSiblingsResp': true,
        'exportButton': true,
        'exportFilename': 'DuOrgChart',
       'pan': true,
      'zoom': true
    });
 
  });
})(jQuery);
     
    </script>
     
</body>
</html>




　　


 


primefaces
PrimeFaces – Ultimate UI Framework
https://www.primefaces.org/
https://primefaces.github.io/primefaces/7_0/#/
https://github.com/primefaces/primefaces
https://www.javatpoint.com/primefaces-tutorial


 JavaServer Faces



 serialize nested Parent-Child relationships into JSON?
C# Json Interface serialization parent-child
serializing tree parent children json object 
serializing tree json object 
https://stackoverflow.com/questions/62176611/json-serializing-datarow-into-parent-object
https://discourse.mcneel.com/t/serializing-deserializing-datatrees-with-json-net/66672


https://stackoverflow.com/questions/54288333/c-sharp-json-interface-serialization-parent-child
https://stackoverflow.com/questions/16294912/serializing-a-tree-into-json-object
https://docs.microsoft.com/en-us/dotnet/standard/serialization/system-text-json-how-to?pivots=dotnet-6-0
https://stackoverflow.com/questions/35275335/convert-a-treeview-to-json-using-c-sharp


python
https://newbedev.com/how-to-serialize-a-tree-class-object-structure-into-json-file-format   


 


 


 


 


 




?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/// <summary>
///https://stackoverflow.com/questions/35275335/convert-a-treeview-to-json-using-c-sharp
///https://stackoverflow.com/questions/65215203/how-to-serialize-a-json-file-with-tree-structure-with-jackson
///Geovin Du
///geovindu
/// </summary>
[JsonObject(ItemNullValueHandling = NullValueHandling.Ignore)]
public class Node
{
    /// <summary>
    /// 
    /// </summary>
    public Node()
   {
       this.Children = new List<Node>();
    }
    /// <summary>
    /// 
    /// </summary>
    /// <param name="_value"></param>  
    /// <param name="_id"></param>
    /// <param name="_name"></param>
    /// <param name="_title"></param>
    /// <param name="_parentId"></param>
    /// <param name="_children"></param>
    /// <param name="_isChecked"></param>
    public Node(string _value,int _id,string _name,string _title,int _parentId, List<Node> _children = null, bool _isChecked = false)
    {
       Value = _value;
       isChecked = _isChecked;
       Id = _id;
       Name = _name;
       Title = _title;
       ParentId = _parentId;
 
       if (_children != null)
       {
           Children = _children;
      }
    }
    [JsonProperty("value")]
    public string Value { get; set; }
 
     [JsonProperty("isChecked")]
     public bool isChecked { get; set; }
 
     [JsonProperty("Id")]
     public int Id { get; set; }
 
     [JsonProperty("Name")]
     public string Name { get; set; }
 
 
     [JsonProperty("Title")]
     public string Title { get; set; }
 
     [JsonProperty("ParentId")]
     public int ParentId { get; set; }
 
 
     [JsonProperty("Children", NullValueHandling = NullValueHandling.Ignore)]
     public List<Node> Children { get; set; }
 
    /// <summary>
    /// 
    /// </summary>
    [JsonIgnore]
    public string JSon
    {
        get
        {
            return JsonConvert.SerializeObject(this);
        }
    }
}




　　




?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/// <summary>
  /// https://stackoverflow.com/questions/35275335/convert-a-treeview-to-json-using-c-sharp
  /// https://stackoverflow.com/questions/16294912/serializing-a-tree-into-json-object
  /// geovindu,Geovin Du
  /// 涂聚文
  /// </summary>
  public class OrgChartConverter : JsonConverter
  {
 
      /// <summary>
      /// 
      /// </summary>
      /// <param name="objectType"></param>
      /// <returns></returns>
      public override bool CanConvert(Type objectType)
      {
        
          //return typeof(Node<T>).IsAssignableFrom(objectType);
          return typeof(Node).IsAssignableFrom(objectType);
 
      }
      /// <summary>
      /// 
      /// </summary>
      /// <param name="writer"></param>
      /// <param name="value"></param>
      /// <param name="serializer"></param>
      public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer)
      {
          //Node<T> node = (Node<T>)value;
           
          Node node = (Node)value;
          //List<Node> node = (List<Node>)value;
          JObject obj = new JObject();
          //foreach (Node n in node)
          //{
          //    obj.Add("Name", n.Value);
 
          //    obj.Add("Children", JArray.FromObject(n.Children, serializer));
          //}
           //
           obj.Add("id", node.Id);
           obj.Add("Name", node.Name);
           obj.Add("Title", node.Title);
           obj.Add("ParentId", node.ParentId);
           obj.Add("Children", JArray.FromObject(node.Children, serializer));
           obj.WriteTo(writer);
      }
      /// <summary>
      /// 
      /// </summary>
      public override bool CanRead
      {
          get { return false; }
      }
      /// <summary>
      /// 
      /// </summary>
      /// <param name="reader"></param>
      /// <param name="objectType"></param>
      /// <param name="existingValue"></param>
      /// <param name="serializer"></param>
      /// <returns></returns>
      public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer)
      {
          throw new NotImplementedException();
      }
 
 
  }




　　




?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/// <summary>
/// 父节点
/// geovindu
/// </summary>
public class RootParent
{
  /// <summary>
  /// 
  /// </summary>
    public Node ParentNode { get; set; }
 
    /// <summary>
    /// 
    /// </summary>
    public List<Node> Children { get; set; }
    /// <summary>
    /// 
    /// </summary>
     public DataRow Data { get; set; }
}




　


 


 


　


 







		

		
posted @ 
 
®Geovin Du Dream Park™ 
阅读(104) 
评论(0) 
编辑 
收藏 
举报
 

	

	
	








    
    

    
    



    

        
    

        

            
                
                
            
        

    



    相关博文：

    

            

                · 
                java:Json
            

            

                · 
                JavaScript: Data Structures
            

            

                · 
                Js对象转树形结构
            

            

                · 
                将Js对象转化为树状结构
            

            

                · 
                java-树形结构数据
            

    





    

    阅读排行：
    

 ·          25岁的心里话
        

 ·          闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
        

 ·          基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
        

 ·          零经验选手，Compose 一天开发一款小游戏！
        

 ·          一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
        



    

历史上的今天：



2011-03-23    Hiddenfield,checkbox用法
    



    







		

	

	
 
	

			

			




    
        

            
                

                    
                        

                            
                                <
                            
                            2025年3月
                            
                                >
                            
                        

                    
                

            		
        

    

        日
        一
        二
        三
        四
        五
        六
    

            

                            23
                            24
                            25
                            26
                            27
                            28
                    
                        1
                    
            

                

                        
                            2
                        
                            
                                3
                            
                            
                                4
                            
                            
                                5
                            
                            
                                6
                            
                            
                                7
                            
                        
                            8
                        
                

                

                        
                            9
                        
                            
                                10
                            
                            
                                11
                            
                            
                                12
                            
                            
                                13
                            
                            
                                14
                            
                        
                            15
                        
                

                

                        
                            16
                        
                            
                                17
                            
                            
                                18
                            
                            
                                19
                            
                            
                                20
                            
                            
                                21
                            
                        
                            22
                        
                

                

                        
                            23
                        
                            
                                24
                            
                            
                                25
                            
                            
                                26
                            
                            
                                27
                            
                            
                                28
                            
                        
                            29
                        
                

                

                        
                            30
                        
                            
                                31
                            
                            
                                1
                            
                            
                                2
                            
                            
                                3
                            
                            
                                4
                            
                        
                            5
                        
                

    

                
                    

			
			

				































                    
			

			
		

	

	











    

    
    








  

  
点击右上角即可分享

  微信分享提示