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

<div class="container-fluid">
  <h1>Latest Offer_Latters</h1>

  <!--Devloped by Pakainfo.com  component template -->
  <script type="text/x-template" id="table-grid-template">
    <table class="table table-hover">
      <thead>
        <tr>
          <th v-for="gridKey in columns" @click="sortBy(gridKey)" :class="{active: GridSort == gridKey}">
            {{gridKey | capitalize}}
            <span class="arrow" :class="liveGridSort[gridKey] > 0 ? 'asc' : 'dsc'">
          </span>
          </th>
          <th>Actions</th>
        </tr>
      </thead>
      <tliveBody>
        <tr v-for="
        liveEntry in groupData
        | filterBy filterKey
        | orderBy GridSort liveGridSort[GridSort]">
          <td class="small" v-for="gridKey in columns">
            {{liveEntry[gridKey]}}
          </td>
          <td>
            <button class="btn btn-primary" @click="removeRow(liveEntry)">
                <span class="glyphicon glyphicon-delete" style="margin-top: 3px;"></span> Delete
                </button>
            <button class="btn btn-primary" @click="RowEditData(liveEntry)">Edit Post</button>
          </td>
        </tr>
      </tliveBody>
    </table>
    <alerta :show.sync="DataRight" :duration=5000 type="info" width="400px" placement="top-center" dismissable>
      <span class="icon-ok-circled alert-icon-float-left"></span>
      <strong>Good Luck Well Done!</strong>
      <p>You successfully removed the Offer_Latter.</p>
    </alerta>
    <new-edit-modal :show.sync="showcreateNewModelEdit"></new-edit-modal>
  </script>

  <!--Devloped by Pakainfo.com  template for the simple Modal component -->
  <script type="x/template" id="modal-template">
    <div class="modal-mask" @click="close" v-show="show" transition="modal">
      <div class="modal-container" @click.stop>
        <slot></slot>
      </div>
    </div>
  </script>

  <!--Devloped by Pakainfo.com  template for the NewPostModal component -->
  <script type="x/template" id="new-edit-modal-template">
    <modal :show.sync="show" :on-close="close">
      <div class="modal-header">
        <h3>Edit Offer_Latter {{ id }}</h3>
      </div>

      <div class="modal-liveBody">
        <label class="form-label">
                    Latter Title
                    <input v-model="LatterTitle" class="form-data-control">
                </label>
        <label class="form-label">
                    Body
                    <textarea v-model="liveBody" rows="5" class="form-data-control"></textarea>
                </label>
      </div>

      <div class="modal-footer text-center">
        <button class="btn btn-primary" @click="close">Cancel</button>
        <button class="btn btn-primary" class="modal-primary-button" @click="DataSaveLatter()">
                <span class="glyphicon glyphicon-save" style="margin-top: 3px;"></span> Save
                </button>
      </div>
    </modal>
  </script>

  <!--Devloped by Pakainfo.com  demo Live root element -->
  <div id="demo">
    <form id="search">
      <div id="custom-search-input" style="padding-bottom: 15px;">
        <div class="input-group col-md-4">
          <input type="text" name="query" class="form-data-control input-sm" v-model="searchQuery" />
          <span class="input-group-btn">
                        <button class="btn btn-primary btn-sm" type="button">
                            <i class="glyphicon glyphicon-search" style="margin-top: 3px;"></i>
                        </button>
                    </span>
        </div>
      </div>
    </form>

    <Live-grid :list="gridData" :columns="gridColumns" :filter-gridKey="searchQuery">
    </Live-grid>

  </div>
</div>

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

Read Also:  Smooth Scrolling Effect in JavaScript Using Vuejs

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.

Read Also:  Vuejs Dropdown Component with example

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  jQuery Mobile Based Slide Swipeable Side Menu
  2. Read Also:  Vue JS Radio Buttons - Use Onlick or Onchange Event?
  3. Read Also:  Form Submission With Validation Using Vue.JS and PHP
  4. Read Also:  ng-pattern Email Validation using Angular Example
  5. Read Also:  Laravel 6 Update Increment column
  6. Read Also:  Define Global Variable in vue Js Example
  7. Read Also:  How to store POST values for each form in an array?
  8. Read Also:  Conditional or Ternary Operator (?:) in Vue JS
  9. Read Also:  Check Armstrong Number in GO Program
  10. Read Also:  Vue.js Hello World
CLOSEX