Merge pull request #141 from baryla/update-method

Added ability to update data through an update method
amsik · Dec 18, 2019 · eaa86cd · eaa86cd
2 parents cbb41f3 + c67f7e7
commit eaa86cd
Show file tree

Hide file tree

Showing 7 changed files with 15,866 additions and 0 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -24,6 +24,7 @@
       <li class="demo-item"><a href="pages/vuex.html">Vuex Integration</a></li>
       <li class="demo-item"><a href="pages/exporting.html">Exporting</a></li>
       <li class="demo-item"><a href="pages/dnd.html">Drag & Drop</a></li>
+      <li class="demo-item"><a href="pages/updating.html">Updating</a></li>
     </div>
   </body>
 </html>
diff --git a/demo/pages/updating.html b/demo/pages/updating.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="utf-8">
+  <title>Liquor Tree: Updating</title>
+  <link rel="stylesheet" href="../assets/style.css">
+  <script src="../assets/menu.js"></script>
+
+  <!-- first import Vue -->
+  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
+  <script src="../assets/vue.js"></script>
+  <script src="/liquor-tree.umd.js"></script>
+</head>
+
+<body>
+  <div class="hello">
+    Updating.
+  </div>
+
+  <div id="app">
+    <div class="examples">
+      <div class="example">
+        <div class="example-description">
+          Basic example
+        </div>
+        <div class="example-tree">
+          <tree ref="tree" :data="treeData" />
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <script>
+    new Vue({
+      el: '#app',
+      data: () => ({
+        treeData: [
+          { text: 'Item 1' },
+          { text: 'Item 2' },
+          { text: 'Item 3', state: { selected: true } },
+          { text: 'Item 4' }
+        ]
+      }),
+      mounted() {
+        this.$nextTick(() => {
+          this.$refs.tree.update('Item 1', node => {
+            return { text: 'New Item!' };
+          });
+        })
+      }
+    })
+  </script>
+
+</body>
+
+</html>
diff --git a/docs/hexo/source/index.md b/docs/hexo/source/index.md
@@ -675,6 +675,41 @@ This method is "syntactic sugar" of `Tree.find(criteria, true)`
   Remove Node by criteria.
 
 
+#### [Tree.updateData(criteria, callback)](#Tree-remove-criteria-multiple)
+
+- **Arguments:**
+  - `{ Object | String } criteria` (see [find method](#Tree-find-criteria-multiple-false))
+  - `{ Function } callback`
+
+- **Returns:**
+  - [Selection](#Selection-API)
+
+- **Usage:**
+
+  This method updates the `data` object in a given node. It is an extension of `find` method but with a slight twist. 
+  The first argument is a criteria while the second is a callback which should return a Node.
+```javascript
+  this.$refs.tree.updateData('Node Text', node => ({
+    description: `ID of this node: ${node.id}`
+  }));
+```
+  Under the hood, there is also a `forEach` which gives you the ability to do something like this:
+```javascript
+  this.$refs.tree.updateData('Node Text', node => {
+    if (node.data.someData) {
+      return {
+        ...node.data,
+        isBoolean: true
+      }
+    }
+
+    return {
+      ...node.data,
+      greeting: 'Hello World'
+    }
+  });
+```
+
 ### Selection API
 
 This array-like object has all array methods (forEach, map and so on) because it inherits `Array` object. This collection has very similar behaviour with jQuery. __All actions apply to all items in the collection.__ I'm going to show one example in more details and other methods have similar logic.