113 lines
4.3 KiB
Vue
113 lines
4.3 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<JqxGrid :width="getWidth" height="150" :source="dataAdapter" :columns="columns" :columnsresize="true">
|
|||
|
|
</JqxGrid>
|
|||
|
|
|
|||
|
|
<br />
|
|||
|
|
<br />
|
|||
|
|
|
|||
|
|
<JqxButton style="float: left; margin-right: 5px" @click="addItemBtnOnClick()">Add Item</JqxButton>
|
|||
|
|
<JqxButton style="float: left; margin-right: 5px" @click="deleteItemBtnOnClick()">Delete Item</JqxButton>
|
|||
|
|
<JqxButton style="float: left; margin-right: 5px" @click="updateItemBtnOnClick()">Update Item</JqxButton>
|
|||
|
|
<JqxButton style="float: left" @click="updatePathBtnOnClick()">Update Path</JqxButton>
|
|||
|
|
|
|||
|
|
<br />
|
|||
|
|
|
|||
|
|
<div ref="log" style="clear: both"></div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
|
|||
|
|
import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
JqxGrid,
|
|||
|
|
JqxButton
|
|||
|
|
},
|
|||
|
|
data: function () {
|
|||
|
|
return {
|
|||
|
|
getWidth: '90%',
|
|||
|
|
columns: [
|
|||
|
|
{ text: 'Name', datafield: 'firstname', width: 120 },
|
|||
|
|
{ text: 'Last Name', datafield: 'lastname', width: 120 },
|
|||
|
|
{ text: 'Product', datafield: 'productname', width: 180 },
|
|||
|
|
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
|
|||
|
|
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
|
|||
|
|
{ text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
beforeCreate: function () {
|
|||
|
|
|
|||
|
|
this.observableArray = new jqx.observableArray(generatedata(2, false), (changed) => {
|
|||
|
|
this.updateLog(this.observableArray);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const source = {
|
|||
|
|
localdata: this.observableArray,
|
|||
|
|
datatype: 'obserableArray',
|
|||
|
|
datafields:
|
|||
|
|
[
|
|||
|
|
{ name: 'firstname', type: 'string' },
|
|||
|
|
{ name: 'lastname', type: 'string' },
|
|||
|
|
{ name: 'productname', type: 'string' },
|
|||
|
|
{ name: 'quantity', type: 'number' },
|
|||
|
|
{ name: 'price', type: 'number' },
|
|||
|
|
{ name: 'total', type: 'number' }
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.dataAdapter = new jqx.dataAdapter(source);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
mounted: function () {
|
|||
|
|
this.updateLog(this.observableArray);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
updateLog: function (observableArray) {
|
|||
|
|
let rows = '';
|
|||
|
|
for (let i = 0; i < observableArray.length; i++) {
|
|||
|
|
rows += observableArray.toJSON(['firstname', 'lastname', 'productname', 'quantity', 'price', 'total'], observableArray[i]);
|
|||
|
|
rows += '<br/>';
|
|||
|
|
}
|
|||
|
|
let container = document.getElementById('log');
|
|||
|
|
this.$refs.log.innerHTML = rows;
|
|||
|
|
},
|
|||
|
|
addItemBtnOnClick: function () {
|
|||
|
|
let row = generatedata(1, false)[0];
|
|||
|
|
let temp = this.observableArray;
|
|||
|
|
temp.push(row);
|
|||
|
|
this.observableArray = temp
|
|||
|
|
},
|
|||
|
|
deleteItemBtnOnClick: function () {
|
|||
|
|
if (this.observableArray.length > 0) {
|
|||
|
|
let temp = this.observableArray;
|
|||
|
|
temp.splice(0, 1);
|
|||
|
|
this.observableArray = temp
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
updateItemBtnOnClick: function () {
|
|||
|
|
if (this.observableArray.length > 0) {
|
|||
|
|
let row = generatedata(1, false)[0];
|
|||
|
|
let temp = this.observableArray;
|
|||
|
|
temp.set(0, row);
|
|||
|
|
this.observableArray = temp;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
updatePathBtnOnClick: function () {
|
|||
|
|
if (this.observableArray.length > 0) {
|
|||
|
|
let row = generatedata(1, false)[0];
|
|||
|
|
let temp = this.observableArray;
|
|||
|
|
temp.set('0.firstname', row.firstname);
|
|||
|
|
temp.set('0.lastname', row.lastname);
|
|||
|
|
this.observableArray = temp
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
</style>
|