diff --git a/README.md b/README.md index 0589be3..5480f06 100644 --- a/README.md +++ b/README.md @@ -38,26 +38,31 @@ Add the component in your vue view. ## Node Options + `[opt]` means optional property. + ```javascript { name: 'Node Name', title: 'Node Tag title attr', - isParent: true, // - isOpen: true, // Control node to fold or unfold - icon: 'fa fa-folder', // Or other custom icons call by class name - openedIcon: 'fa fa-folder-open', // [option] For parent. Show when isOpen == true, show icon if it's null or empty - closedIcon: 'fa fa-folder', // [option] For parent. Show when isOpen != true, show icon if it's null or empty - children: [], // for parent node only - buttons: [ // [] + isParent: true, // Requested for parent node + isOpen: false, // [opt] Control node to fold or unfold + icon: 'fa fa-folder', //[opt] Icon class name + openedIcon: 'fa fa-folder-open', // [opt] For parent. Show when isOpen == true, show icon if it's null or empty + closedIcon: 'fa fa-folder', // [opt] For parent. Show when isOpen != true, show icon if it's null or empty + children: [], // Requested for parent node + buttons: [ // [opt] { - title: 'icon button tag title attr', //[option] + title: 'icon button tag title attr', //[opt] icon: 'fa fa-edit', - click: function (node) { //[option] + click: function (node) { //[opt] // } } //... - ] + ], + showLoading: false, // [opt] For parent, when `node.showLoading && node._loading` and node is opened then show loading icon + onOpened: function (node) {}, // [opt] + onClosed: function (node) {} // [opt] } ``` diff --git a/demo/demo.js b/demo/demo.js index 3fb5eb7..7e6f31e 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -5,7 +5,6 @@ node.children.push({ name: 'child node', parent: node, - isOpen: true, isParent: true, children: [], buttons: [ @@ -78,7 +77,6 @@ }, { name: 'Level1 add node', - isOpen: true, isParent: true, children: [], buttons: [ @@ -88,7 +86,7 @@ click: function (node) { node.isOpen = true; node.children.push({ - name: 'level2 node', + name: 'Level2 node', parent: node, buttons: [ { @@ -105,8 +103,7 @@ ] }, { - name: 'level1-addNode', - isOpen: true, + name: 'Level1-addNode', isParent: true, children: [], buttons: [ @@ -116,6 +113,27 @@ click: addNode } ] + }, + { + name: 'Level1 Ajax', + isParent: true, + children: [], + showLoading: true, // if (node.showLoading && node._loading) then show loading icon + onOpened: function (node) { + if (!node._loading) { + Vue.set(node, 'children', []); // Clean old data + node._loading = true; // Start Ajax + setTimeout(function () { // + node._loading = false; //Finish Ajax + for (var i = 1; i < 6; i++) { + node.children.push({name: 'Ajax Node ' + i}); + } + }, 2000); + } + }, + onClosed: function () { + // NOOP + } } ] } diff --git a/src/tree.vue.js b/src/tree.vue.js index abb7b14..c3d6dca 100644 --- a/src/tree.vue.js +++ b/src/tree.vue.js @@ -2,11 +2,12 @@ 'use strict'; var VueTreeItem = Vue.extend({ template: '
  • ' + - '' + + '' + '' + ' {{node.name}}' + '' + - '