Posted inProgramming / VueJs

Vuejs tree view Components And Modules – Vue Tree View Component

Vuejs tree view Components And Modules – Vue Tree View Component

In this Post We Will Explain About is Vuejs tree view Components And Modules – Vue Tree View Component With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs Treeview Example using Data from ControllerExample

In this post we will show you Best way to implement Expand/Collapse Items in TreeView for Vuejs, hear for How to expand tree view on click in MVC and Vuejswith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Support Vue.js 2.0+ here one example to learn vuejs simple root to open childern node using vuejs example step by step.

Put the following some required resources.






index.html




    
    Pakainfo.com Vuejs Tree Step by step example
    
	
    



{{title}}

demo.js

(function () {
    'use strict';
    var createNode = function (part) {
        part.isOpen = true;
        part.subPart.push({
            name: 'child part ' + part.subPart.length,
            parent: part,
            isParent: true,
            subPart: [],
            buttons: [
                {
                    title: 'create',
                    icon: 'fa fa-plus',
                    click: createNode
                }, {
                    title: 'Delete',
                    icon: 'fa fa-trash',
                    click: function (part) {
                        part.parent.subPart.splice(part.parent.subPart.indexOf(part), 1);
                    }
                }
            ]
        });
    };
    new Vue({
        el: '#demo',
        data: {
            title: 'Live Vue Tree Demo',
            option: {
                root: {
                    name: 'Root Node',
                    isParent: true,
                    isOpen: true,
                    openedIcon: 'fa fa-folder-open-o',
                    closedIcon: 'fa fa-folder-o',
                    subPart: [
                        {
                            name: 'live24u1'
                        },
                        {
                            name: 'live24u1 with icon',
                            icon: 'fa fa-cube',
                            title: 'www.Pakainfo.com'
                        },
                        {
                            name: 'Name your Node',
                            buttons: [
                                {
                                    title: 'Edit',
                                    icon: 'fa fa-edit',
                                    click: function (part) {
                                        part.name = prompt('Editing part name, require string', part.name) || part.name;
                                    }
                                }
                            ]
                        },
                        {
                            name: 'live24u1 has subPart',
                            icon: 'fa fa-folder',
                            openedIcon: 'fa fa-folder-open',
                            isOpen: false,
                            isParent: true,
                            subPart: [
                                {
                                    name: 'live24u2 - 1',
                                    icon: 'fa fa-file'
                                },
                                {
                                    name: 'live24u2 - 2',
                                    icon: 'fa fa-file'
                                },
                                {
                                    name: 'live24u2 - 3',
                                    icon: 'fa fa-file'
                                }
                            ]
                        },
                        {
                            name: 'live24u1 add part',
                            isParent: true,
                            subPart: [],
                            buttons: [
                                {
                                    title: 'create',
                                    icon: 'fa fa-plus',
                                    click: function (part) {
                                        part.isOpen = true;
                                        part.subPart.push({
                                            name: 'Level2 part ' + part.subPart.length,
                                            parent: part,
                                            buttons: [
                                                {
                                                    title: 'Delete',
                                                    icon: 'fa fa-trash',
                                                    click: function (part) {
                                                        part.parent.subPart.splice(part.parent.subPart.indexOf(part), 1);
                                                    }
                                                }
                                            ]
                                        });
                                    }
                                }
                            ]
                        },
                        {
                            name: 'live24u1-createNode',
                            isParent: true,
                            subPart: [],
                            buttons: [
                                {
                                    title: 'create',
                                    icon: 'fa fa-plus',
                                    click: createNode
                                }
                            ]
                        },
                        {
                            name: 'live24u1 Ajax',
                            isParent: true,
                            subPart: [],
                            showLoading: true, // here if (part.showLoading && part._loading) and then show loading icon
                            onOpened: function (part) {
                                if (!part._loading) {
                                    Vue.set(part, 'subPart', []); // simple Pakainfo.com Clean old data
                                    part._loading = true; //here call or Start Ajax
                                    setTimeout(function () { //
                                        part._loading = false; //lets Finish Ajax call
                                        for (var i = 1; i < 10; i++) {
                                            part.subPart.push({name: 'vuejs example ' + i});
                                        }
                                    }, 2000);
                                }
                            },
                            onClosed: function () {
                                // here NOOP
                            }
                        }
                    ]
                }
            }
        }
    });
})();

Vuejs tree Node Options List

  • Requested for parent node
  • Control node to fold or unfold
  • Icon class name
  • For parent. Show when isOpen == true
  • show icon if it's null or empty
  • Requested for parent node
  • For parent, when `node.showLoading && node._loading`
  • Ajax node is opened then show loading icon
  • Example

    I hope you have Got What is Adding treeview control to listview And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype