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.

<link rel="stylesheet" href="[You Path]font-awesome/4.+/css/font-awesome.min.css">
<link rel="stylesheet" href="src/tree.vue.css">

<script src="[You Path]vue.js"></script>
<script src="src/tree.vue.js"></script>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pakainfo.com Vuejs Tree Step by step example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
	<!-- Include CSS -->
    <link rel="stylesheet" href="tree.vue.css">
</head>
<body>
<!-- vuejs rendering data using HTML-->
<div id="demo">
    <h1>{{title}}</h1>
	<!-- here all the componets print using vuejs -->
    <vue-tree :option="option"></vue-tree>
</div>
<!-- Include Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.min.js"></script>
<!-- Include Scripts -->
<script src="tree.vue.js"></script>
<!-- Include Scripts -->
<script src="demo.js"></script>
</body>
</html>

Also Read :  Vuejs Double Click to inline editing vue Grid Component

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.

Leave a Reply

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