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://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://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://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

Also Read :  Server-side Processing DataTables using PHP with MySQL

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.

Leave a Reply

avatar
  Subscribe  
Notify of