Vuejs Inline Editing Table – vuejs grid – vue datatable – vue smart table

Vuejs Inline Editing Table – vuejs grid – vue datatable – vue smart table

Vuejs Inline Editing Table – vuejs grid – vue datatable – vue smart table

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs Inline Editing Table – vuejs grid – vue datatable – vue smart table

In this post we will show you Best way to implement Inline Editing HTML table with Vuejs Ajax and PHP, hear for How to inline Edit Remove using Ajax/Vuejs in PHP MySql with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Include External Links : libs

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://rubaxa.github.io/Sortable/Sortable.js
https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js

index.html – Markup HTML Part

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

<div class="panel-body" id="liveapp">
	<table class="table table-hover">
		<thead>
		<tr>
			<th>Stud No.</th>
			<th>comments</th>
			<th>std</th>
			<th class="text-right">fees</th>
			<th>exloan</th>
			<th>fulltotal</th>
			<th></th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>
				{{ $index +1 }}
			</td>
			<td>
				
			</td>
			<td>
				
			</td>
			<td>
				
			</td>
			<td>
				
					0%
					11%
					22%
				
			</td>
			<td>
				
				
			</td>
			<td>
				<button class="btn btn-primary btn-xs">add row</button>
				<button class="btn btn-danger btn-xs">remove row</button>
			</td>
		</tr>
		</tbody>
		<tfoot>

		<tr>
			<td colspan="5" class="text-right">exloan</td>
			<td colspan="1" class="text-right">{{ exloanfulltotal | DisplayCurrentCurrency }}</td>
			<td></td>
		</tr>
		<tr>
			<td colspan="5" class="text-right">fulltotal</td>
			<td colspan="1" class="text-right">{{ fulltotal | DisplayCurrentCurrency }}</td>
			<td></td>
		</tr>
		<tr>
			<td colspan="5" class="text-right">datareturn</td>
			<td colspan="1" class="text-right"></td>
			<td></td>
		</tr>
		<tr>
			<td colspan="5" class="text-right"><strong>Finalfulltotal</strong></td>
			<td colspan="1" class="text-right"><strong>{{ Finalfulltotal = fulltotal + datareturn | DisplayCurrentCurrency }}</strong></td>
			<td></td>
		</tr>
		</tfoot>
	</table>
	<button>Free SUBMIT DATA</button>
	<pre>{{ $data | json }}</pre>
</div>

index.js – Script File

Vue.filter('DisplayCurrentCurrency', {
    // model -> view
    read: function (param) {
        if (param > 0) {
            return accounting.formatMoney(param, "$", 2, ".", ",");
        }
    },
    // view -> model
    write: function (param, oldparam) {
        return accounting.unformat(param, ",");
    }
});

Vue.directive('sortable', {
    twoWay: true,
    deep: true,
    bind: function () {
        var that = this;

        var options = {
            draggable: Object.keys(this.modifiers)[0]
        };

        this.sortable = Sortable.create(this.el, options);
        console.log('sortable bound!')

        this.sortable.option("onUpdate", function (e) {            
            that.paramue.splice(e.newIndex, 0, that.paramue.splice(e.oldIndex, 1)[0]);
        });

        this.onUpdate = function(paramue) {            
            that.paramue = paramue;
        }
    },
    update: function (paramue) {        
        this.onUpdate(paramue);
    }
});

var vm = new Vue({
    el: '#liveapp',
    data: {
        table_rows: [
            //initial simple data
            {std: 5, comments: "Something", fees: 55.20, exloan: 10},
            {std: 2, comments: "Something else", fees: 1255.20, exloan: 20},
        ],
        fulltotal: 0,
        Finalfulltotal: 0,
        exloanfulltotal: 0,
        datareturn: 40
    },
    computed: {
        fulltotal: function () {
            var t = 0;
            $.each(this.table_rows, function (i, e) {
                t += accounting.unformat(e.fulltotal, ",");
            });
            return t;
        },
        exloanfulltotal: function () {
            var tt = 0;
            $.each(this.table_rows, function (i, e) {
                tt += accounting.unformat(e.exloan_amount, ",");
            });
            return tt;
        }
    },
    methods: {
        createRow: function (index) {
            try {
                this.table_rows.splice(index + 1, 0, {});
            } catch(e)
            {
                console.log(e);
            }
        },
        deleteRow: function (index) {
            this.table_rows.splice(index, 1);
        },
        liveGetData: function () {
            $.ajax({
                context: this,
                type: "POST",
                data: {
                    table_rows: this.table_rows,
                    fulltotal: this.fulltotal,
                    datareturn: this.datareturn,
                    exloanfulltotal: this.exloanfulltotal,
                    Finalfulltotal: this.Finalfulltotal,
                },
                url: "/api/data"
            });
        }
    }
});

Example

READ :  vuejs Form Validation Vuelidate Example

I hope you have Got Inline Editing HTML table with Vuejs Ajax and PHP And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.