WIP: implement family tree

Author: dabeng

demo/family-tree.html

@@ -33,14 +33,14 @@
                 { 'id': '5', 'name': 'Su Miao', 'title': 'department manager', 'gender': 'female',
                   'children': [
                     [
-                      { 'id': '6', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
                       { 'id': '7', 'name': 'Pang Pang', 'title': 'engineer', 'gender': 'female',
                         'children': [
                           [{ 'id': '8', 'name': 'Dan Dan', 'title': 'UE engineer', 'gender': 'female' }],
                           [{ 'id': '9', 'name': 'Er Dan', 'title': 'engineer', 'gender': 'female' }],
                           [{ 'id': '10', 'name': 'San Dan', 'title': 'engineer', 'gender': 'female' }]
                         ]
                       },
+                      { 'id': '6', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
                       { 'id': '11', 'name': 'Er Pang', 'title': 'engineer', 'gender': 'female',
                         'children': [
                           [{ 'id': '12', 'name': 'Si Dan', 'title': 'UE engineer', 'gender': 'female' }],

dist/js/jquery.orgchart.js

@@ -1490,17 +1490,23 @@
       // Construct the single node in OrgChart or the multiple nodes in family tree
       if (Array.isArray(data)) {
         $.each(data, function () {
-          $.each(this, function () {
+          var _this = this;
+          $.each(this, function (i) {
             $nodeDiv = that.createNode(this);
-            // if ($hierarchy.children('.node').length) {
-            //   $hierarchy.children('.node:last').after($nodeDiv);
-            // } else {
-            var $wrapper = $('<li class="hierarchy"></li>');
-            $wrapper.append($nodeDiv);
+            if (_this.length === 2 && i === 1) {
+            //   // $hierarchy.children('.node:last').after($nodeDiv);
+              $hierarchy.children('.hierarchy:first').append($nodeDiv);
+              if (this.children && this.children.length) {
+                that.buildInferiorNodes($hierarchy.children('.hierarchy:first'), $nodeDiv, this, level);
+              }
+            } else {
+              var $wrapper = $('<li class="hierarchy"></li>');
+              $wrapper.append($nodeDiv);
               $hierarchy.append($wrapper);
             // }
-            if (this.children && this.children.length) {
-              that.buildInferiorNodes($wrapper, $nodeDiv, this, level);
+              if (this.children && this.children.length) {
+                that.buildInferiorNodes($wrapper, $nodeDiv, this, level);
+              }
             }
           });
         });

dist/js/jquery.orgchart.min.js

@@ -1490,17 +1490,23 @@
       // Construct the single node in OrgChart or the multiple nodes in family tree
       if (Array.isArray(data)) {
         $.each(data, function () {
-          $.each(this, function () {
+          var _this = this;
+          $.each(this, function (i) {
             $nodeDiv = that.createNode(this);
-            // if ($hierarchy.children('.node').length) {
-            //   $hierarchy.children('.node:last').after($nodeDiv);
-            // } else {
-            var $wrapper = $('<li class="hierarchy"></li>');
-            $wrapper.append($nodeDiv);
+            if (_this.length === 2 && i === 1) {
+            //   // $hierarchy.children('.node:last').after($nodeDiv);
+              $hierarchy.children('.hierarchy:first').append($nodeDiv);
+              if (this.children && this.children.length) {
+                that.buildInferiorNodes($hierarchy.children('.hierarchy:first'), $nodeDiv, this, level);
+              }
+            } else {
+              var $wrapper = $('<li class="hierarchy"></li>');
+              $wrapper.append($nodeDiv);
               $hierarchy.append($wrapper);
             // }
-            if (this.children && this.children.length) {
-              that.buildInferiorNodes($wrapper, $nodeDiv, this, level);
+              if (this.children && this.children.length) {
+                that.buildInferiorNodes($wrapper, $nodeDiv, this, level);
+              }
             }
           });
         });