vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor incell edit implementation

pull/104/head
cagataycivici 2019-10-30 22:00:46 +03:00
parent 61f60456da
commit f6ca907f8d
1 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/views/datatable/DataTableEditDemo.vue
View File

@ -49,12 +49,12 @@
<DataTable :value="cars2" editMode="cell" @cell-edit-init="onCellEditInit" @cell-edit-complete="onCellEditComplete" @cell-edit-cancel="onCellEditCancel"> <DataTable :value="cars2" editMode="cell" @cell-edit-init="onCellEditInit" @cell-edit-complete="onCellEditComplete" @cell-edit-cancel="onCellEditCancel">
<Column field="vin" header="Vin"> <Column field="vin" header="Vin">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" /> <InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event)" />
</template> </template>
</Column> </Column>
<Column field="year" header="Year"> <Column field="year" header="Year">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" /> <InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event)" />
</template> </template>
</Column> </Column>
<Column field="brand" header="Brand"> <Column field="brand" header="Brand">
@ -71,7 +71,7 @@
</Column> </Column>
<Column field="color" header="Color"> <Column field="color" header="Color">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" /> <InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event)" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -134,9 +134,9 @@ export default {
cars1: null, cars1: null,
cars2: null, cars2: null,
cars3: null, cars3: null,
editingCar: null, editingCell: null,
editingCarIndex: null, editingCellIndex: null,
originalCar: null, originalCell: null,
editingRows: null, editingRows: null,
brands: [ brands: [
{brand: 'Audi', value: 'Audi'}, {brand: 'Audi', value: 'Audi'},
@ -157,15 +157,18 @@ export default {
}, },
methods: { methods: {
onCellEditInit(event) { onCellEditInit(event) {
this.editingCarIndex = event.index; this.editingRowIndex = event.index;
this.editingCar = {...event.data}; //update on input this.editingCellValue = event.data[event.field]; //update on input
this.originalCar = {...event.data}; //revert with escape key this.originalCellValue = event.data[event.field]; //revert with escape key
}, },
onCellEditComplete(event) { onCellEditComplete(event) {
switch (event.field) { switch (event.field) {
case 'year': case 'year':
if (this.isPositiveInteger(this.editingCar.year)) { if (this.isPositiveInteger(this.editingCellValue)) {
Vue.set(this.cars2, this.editingCarIndex, this.editingCar); let editingRow = {...this.cars2[this.editingRowIndex]};
editingRow.year = parseInt(this.editingCellValue);
Vue.set(this.cars2, this.editingRowIndex, editingRow);
this.clearEditState();
} }
else { else {
this.$toast.add({severity:'error', summary: 'Validation Failed', detail:'Year must be a number', life: 3000}); this.$toast.add({severity:'error', summary: 'Validation Failed', detail:'Year must be a number', life: 3000});
@ -174,8 +177,11 @@ export default {
break; break;
default: default:
if (this.editingCar[event.field].trim().length > 0) { if (this.editingCellValue.trim().length > 0) {
Vue.set(this.cars2, this.editingCarIndex, this.editingCar); let editingRow = {...this.cars2[this.editingRowIndex]};
editingRow[event.field] = this.editingCellValue;
Vue.set(this.cars2, this.editingRowIndex, editingRow);
this.clearEditState();
} }
else { else {
this.$toast.add({severity:'error', summary: 'Validation Failed', detail: event.field + ' is required', life: 3000}); this.$toast.add({severity:'error', summary: 'Validation Failed', detail: event.field + ' is required', life: 3000});
@ -185,11 +191,16 @@ export default {
} }
}, },
onCellEditCancel(event) { onCellEditCancel(event) {
Vue.set(this.cars2, event.index, this.originalCar);
this.editingCar = null; this.clearEditState();
}, },
onCellEdit(newValue, props) { onCellEdit(newValue) {
this.editingCar[props.column.field] = newValue; this.editingCellValue = newValue;
},
clearEditState() {
this.editingCellValue = null;
this.editingCellValue = null;
this.originalCellValue = null;
}, },
isPositiveInteger(val) { isPositiveInteger(val) {
let str = String(val); let str = String(val);