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

Refactored Incell Editing Demo

pull/104/head
cagataycivici 2019-11-01 10:16:10 +03:00
parent f6ca907f8d
commit 2562e7bb72
1 changed files with 31 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,63 +45,13 @@
</DataTable>
<h3>Advanced Cell Editing</h3>
<p>Advanced editors with validations and ability to revert values with escape key.</p>
<DataTable :value="cars2" editMode="cell" @cell-edit-init="onCellEditInit" @cell-edit-complete="onCellEditComplete" @cell-edit-cancel="onCellEditCancel">
<Column field="vin" header="Vin">
<p>Custom implementation with validations, dynamic columns and ability to revert values with the escape key.</p>
<DataTable :value="cars2" editMode="cell" @cell-edit-complete="onCellEditComplete">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
<template #editor="slotProps">
<InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event)" />
<InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" />
</template>
</Column>
<Column field="year" header="Year">
<template #editor="slotProps">
<InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event)" />
</template>
</Column>
<Column field="brand" header="Brand">
<template #editor="slotProps">
<Dropdown v-model="slotProps.data['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand">
<template #option="optionProps">
<div class="p-dropdown-car-option">
<img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" />
<span>{{optionProps.option.brand}}</span>
</div>
</template>
</Dropdown>
</template>
</Column>
<Column field="color" header="Color">
<template #editor="slotProps">
<InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event)" />
</template>
</Column>
</DataTable>
<h3>Row Editing</h3>
<DataTable :value="cars3" editMode="row" dataKey="vin" :editingRows.sync="editingRows">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column field="brand" header="Brand">
<template #editor="slotProps">
<Dropdown v-model="slotProps.data['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand">
<template #option="optionProps">
<div class="p-dropdown-car-option">
<img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" />
<span>{{optionProps.option.brand}}</span>
</div>
</template>
</Dropdown>
</template>
</Column>
<Column field="color" header="Color">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" />
</template>
</Column>
<Column :rowEditor="true" headerStyle="width:6em" bodyStyle="text-align:center"></Column>
</DataTable>
</div>
@ -134,10 +84,8 @@ export default {
cars1: null,
cars2: null,
cars3: null,
editingCell: null,
editingCellIndex: null,
originalCell: null,
editingRows: null,
editingRows: {},
columns: null,
brands: [
{brand: 'Audi', value: 'Audi'},
{brand: 'BMW', value: 'BMW'},
@ -154,53 +102,44 @@ export default {
carService: null,
created() {
this.carService = new CarService();
this.columns = [
{field: 'vin', header: 'Vin'},
{field: 'year', header: 'Year'},
{field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'}
];
},
methods: {
onCellEditInit(event) {
this.editingRowIndex = event.index;
this.editingCellValue = event.data[event.field]; //update on input
this.originalCellValue = event.data[event.field]; //revert with escape key
},
onCellEditComplete(event) {
if (!this.editingRows[event.index]) {
return;
}
const editingCellValue = this.editingRows[event.index][event.field];
switch (event.field) {
case 'year':
if (this.isPositiveInteger(this.editingCellValue)) {
let editingRow = {...this.cars2[this.editingRowIndex]};
editingRow.year = parseInt(this.editingCellValue);
Vue.set(this.cars2, this.editingRowIndex, editingRow);
this.clearEditState();
}
else {
this.$toast.add({severity:'error', summary: 'Validation Failed', detail:'Year must be a number', life: 3000});
if (this.isPositiveInteger(editingCellValue))
Vue.set(this.cars2, event.index, this.editingRows[event.index]);
else
event.preventDefault();
}
break;
default:
if (this.editingCellValue.trim().length > 0) {
let editingRow = {...this.cars2[this.editingRowIndex]};
editingRow[event.field] = this.editingCellValue;
Vue.set(this.cars2, this.editingRowIndex, editingRow);
this.clearEditState();
}
else {
this.$toast.add({severity:'error', summary: 'Validation Failed', detail: event.field + ' is required', life: 3000});
if (editingCellValue.trim().length > 0)
Vue.set(this.cars2, event.index, this.editingRows[event.index]);
else
event.preventDefault();
}
break;
}
},
onCellEditCancel(event) {
onCellEdit(newValue, props) {
if (!this.editingRows[props.index]) {
this.editingRows[props.index] = {...props.data};
}
this.clearEditState();
},
onCellEdit(newValue) {
this.editingCellValue = newValue;
},
clearEditState() {
this.editingCellValue = null;
this.editingCellValue = null;
this.originalCellValue = null;
this.editingRows[props.index][props.column.field] = newValue;
},
isPositiveInteger(val) {
let str = String(val);