Posted inTechnology / Programming / VueJs

Vuejs Editable Grid component – GridView in Vue.JS

Vuejs Editable Grid component – GridView in Vue.JS

In this Post We Will Explain About is Vuejs Editable Grid component – GridView in Vue.JS 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 Vue.JS – Advanced Data Grid Component Example

In this post we will show you Best way to implement Vue Grid with CRUD operations, hear for Building a List or Grid View Switcher animation with Vuejs with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

How to Create Grid View VueJS Applications

In this Example,First of all Add or Include External Libs Like as a(jQuery, css etc..), and then create a simple index.php or index.html page.After that crate a simple java script file like as a index.js or main.js, It is also add your web-application First Header Part to some priority set.After that Include your relevant CSS Class.

Include External Libs

https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.js
https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.0.8/vue-strap.min.js
https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

index.html

Latest Offer_Latters

index.js

Vue.component('Modal', {
    template: '#modal-template',
    props: ['show', 'onClose'],
    methods: {
        close: function () {
            this.onClose();
        }
    },

    ready: function () {
        document.addEventListener("gridKeydown", function(e) {
            if (this.show && e.gridKeyCode == 27) {
                this.onClose();
            }
        })
    }
});

var editModal = Vue.component('createNewModelEdit', {
    template: '#new-edit-modal-template',
    props: ['show'],
    data: function () {
        return {
            id: '',
            LatterTitle: '',
            liveBody: ''
        };
    },

    methods: {
        close: function () {
            this.show = false;
            this.LatterTitle = '';
            this.liveBody = '';
            this.id = '';
        },

        refresh: function() {
            this.$dispatch('refreshOffer_Latters');
        },

        DataSaveLatter: function () {
            var me = this;

            var allparamsval = {
                'id': this.id,
                'name': this.LatterTitle,
                'Comments': this.liveBody
            };
            console.log("Updating Post");
            this.$http.post("https://www.pakainfo.com/http://codepen.io/billmurrin/pen/EKXbyZ.js", allparamsval, {
                xhr: {
                    onreadystatechange: function (response) {
                        if (this.readyState === 4) {
                            setTimeout(function() {
                                me.$dispatch('refreshOffer_Latters')
                            }, 1500);
                            return;
                        }
                    }
                }
            });
            this.close();
        }
    },

    events: {
        edit_Offer_Latter: function (Offer_Latter) {
            this.id = Offer_Latter.id;
            this.LatterTitle = Offer_Latter.name;
            this.liveBody = Offer_Latter.Comments;
            this.show = true;
        }
    }
});

var Live_data = [{
  "id": "JAYDEEPDD",
  "cr_date": "2018-03-26",
  "total_in": "1",
  "name": "Live24u",
  "Comments": "Comments Live - Data Update"
}, {
  "id": "JAYDEEPAA",
  "cr_date": "2018-03-24",
  "total_in": "1",
  "name": "Live24u",
  "Comments": "Comments Live 2 - Data Update"
}, {
  "id": "JAYDEEPBB",
  "cr_date": "2018-03-25",
  "total_in": "1",
  "name": "Live24u",
  "Comments": "Comments Live 3 - Data Update"
}]

Vue.component('Live-grid', {
    template: '#table-grid-template',
    props: {
        list: [],
        columns: [],
        filterKey: String,
    },

    components: {
        'alerta': VueStrap.alert,
        'new-edit-modal': editModal
    },

    data: function () {
        var liveGridSort = {};
        this.columns.forEach(function (gridKey) {
            liveGridSort[gridKey] = 1
        });

        return {
            groupData: [],
            DataRight: false,
            GridSort: '',
            liveGridSort: liveGridSort,
            showcreateNewModelEdit: false
        }
    },

    methods: {
        sortBy: function (gridKey) {
            this.GridSort = gridKey
            this.liveGridSort[gridKey] = this.liveGridSort[gridKey] * -1
        },

        removeRow: function (Offer_Latter) {
            var allparamsval = {
                'id': Offer_Latter.id,
                '_token': "Pakainfo.comjaydeepgondaliya"
            };

            this.$http.post("https://www.pakainfo.com/http://codepen.io/billmurrin/pen/EKXbyZ.js", allparamsval,  {
                xhr: {
                    onreadystatechange: function (response) {
                        if (this.readyState === 4) {
                            console.log(this.status);
                            console.log(this.response);
                            return;
                        }
                    }
                }
            });

            alert("This latter ID would get simple deleted: " + Offer_Latter.id);
            console.log(Offer_Latter);
            this.groupData.$remove(Offer_Latter);
            this.DataRight = !this.DataRight;
        },

        RowEditData: function(Offer_Latter){
            this.$broadcast('edit_Offer_Latter', Offer_Latter);
            showcreateNewModelEdit = true
        }
    },

    events: {
        refreshOffer_Latters: function () {
            var livenewData = this;
            console.log("Refreshing Offer_Latters.");
            this.$http.get("https://www.pakainfo.com/http://codepen.io/billmurrin/pen/EKXbyZ.js", {}, {
                xhr: {
                    onreadystatechange: function (response) {
                        if (this.readyState === 4) {
                            console.log(this.response);
                            console.log(Free refreshed");
                            console.log(livenewData);
                            livenewData.$set('groupData', JSON.parse(this.response));
                            return;
                        }
                    }
                }
            });
        }
    },

    created: function() {
        //Devloped by Pakainfo.com  Pushing the data to the data property so it's reactive
        this.groupData = this.list;
    },
});

//Devloped by Pakainfo.com  bootstrap the live demo
var demo = new Vue({
    el: '#demo',

    data: {
        searchQuery: '',
        gridColumns: ['id', 'cr_date', 'total_in', 'name', 'Comments'],
        gridData: Live_data
    },
});

Vue Grid with CRUD operations

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is Multiple Modal Components in grid view Vue2 And how it works.I would Like to have Feed Back From My Blog(Pakainfo.com) readers.Your Valuable Feed Back,Any Question,or any Comments about 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