upload reload-data example

dabeng · Jul 9, 2017 · fd13a60 · fd13a60
1 parent dc5787a
commit fd13a60
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 6 deletions.
diff --git a/dist/js/jquery.orgchart.js b/dist/js/jquery.orgchart.js
@@ -24,7 +24,6 @@
   var OrgChart = function (elem, opts) {
     this.$chartContainer = $(elem);
     this.opts = opts;
-    this.dataOpts = this.$chartContainer.data('options');
     this.defaultOptions = {
       'nodeTitle': 'name',
       'nodeId': 'id',
@@ -48,11 +47,11 @@
     //
     init: function (opts) {
       var that = this;
-      this.options = $.extend({}, this.defaultOptions, this.opts, this.dataOpts, opts);
+      this.options = $.extend({}, this.defaultOptions, this.opts, opts);
       // build the org-chart
       var $chartContainer = this.$chartContainer;
-      if ($chartContainer.children().length) {
-        $chartContainer.empty();
+      if (this.$chart) {
+        this.$chart.remove();
       }
       var data = this.options.data;
       var $chart = this.$chart = $('<div>', {

diff --git a/examples/local-datasource/scripts.js b/examples/local-datasource/scripts.js
@@ -4,7 +4,7 @@
 
   $(function() {
 
-    var datascource = {
+    var datasource = {
       'name': 'Lao Lao',
       'title': 'general manager',
       'children': [
@@ -30,7 +30,7 @@
     };
 
     var oc = $('#chart-container').orgchart({
-      'data' : datascource,
+      'data' : datasource,
       'depth': 2,
       'nodeContent': 'title'
     });

diff --git a/examples/reload-data/index.html b/examples/reload-data/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Organization Chart Plugin</title>
+
+    <link rel="icon" href="../img/logo.png" type="image/png">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="../../dist/css/jquery.orgchart.css">
+    <link rel="stylesheet" href="../css/style.css">
+
+</head>
+<body>
+  <button style="margin: 10px;" id="btn-chart1">chart 1</button>
+  <button style="margin: 10px;" id="btn-chart2">chart 2</button>
+  <button style="margin: 10px;" id="btn-chart3">chart 3</button>
+  <div id="chart-container"></div>
+  <div class="home-link">
+    <a href="https://github.com/dabeng/OrgChart" >More orgcharts</a>
+    <img src="../img/logo.png"></img>
+  </div>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+  <script type="text/javascript" src="../../dist/js/jquery.orgchart.js"></script>
+  <script type="text/javascript" src="scripts.js"></script>
+  </body>
+</html>
diff --git a/examples/reload-data/scripts.js b/examples/reload-data/scripts.js
@@ -0,0 +1,54 @@
+'use strict';
+
+(function($){
+
+  $(function() {
+
+    var datasource = {
+      'name': 'Lao Lao',
+      'title': 'general manager',
+      'children': [
+        { 'name': 'Bo Miao', 'title': 'department manager' },
+        { 'name': 'Su Miao', 'title': 'department manager' },
+        { 'name': 'Yu Jie', 'title': 'department manager' },
+        { 'name': 'Yu Li', 'title': 'department manager' },
+        { 'name': 'Hong Miao', 'title': 'department manager' },
+        { 'name': 'Yu Wei', 'title': 'department manager' },
+        { 'name': 'Chun Miao', 'title': 'department manager' },
+        { 'name': 'Yu Tie', 'title': 'department manager' }
+      ]
+    };
+
+    var oc = $('#chart-container').orgchart({
+      'data' : datasource,
+      'nodeContent': 'title'
+    });
+
+    $('#btn-chart1').on('click', function (argument) {
+      oc.init({ 'data': datasource });
+    });
+
+    $('#btn-chart2').on('click', function (argument) {
+      var data = { 'name': 'Su Miao', 'title': 'department manager',
+        'children': [
+          { 'name': 'Tie Hua', 'title': 'senior engineer' },
+          { 'name': 'Hei Hei', 'title': 'senior engineer' }
+        ]
+      };
+      oc.init({ 'data': data });
+    });
+
+    $('#btn-chart3').on('click', function (argument) {
+      var data = { 'name': 'Hei Hei', 'title': 'senior engineer',
+        'children': [
+          { 'name': 'Pang Pang', 'title': 'engineer' },
+          { 'name': 'Dan Zai', 'title': 'UE engineer' },
+          { 'name': '2Dan Zai', 'title': 'UE engineer' }
+        ]
+      };
+      oc.init({ 'data': data });
+    });
+
+  });
+
+})(jQuery);