From 3fcc3cf58de94f7d3812e7de8a4e78815acd7ee4 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Fri, 1 Nov 2019 10:30:24 +0300 Subject: [PATCH] Demo up --- src/components/datatable/BodyCell.vue | 34 ++-- src/views/datatable/DataTableEditDemo.vue | 210 ++++++++++++++++++++-- 2 files changed, 218 insertions(+), 26 deletions(-) diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue index bf9e7fd3c..b2e2d9d46 100644 --- a/src/components/datatable/BodyCell.vue +++ b/src/components/datatable/BodyCell.vue @@ -148,24 +148,26 @@ export default { } }, onKeyDown(event) { - switch (event.which) { - case 13: - this.completeEdit(event, 'enter'); - break; - - case 27: - this.switchCellToViewMode(); - this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index}); - break; + if (this.editMode === 'cell') { + switch (event.which) { + case 13: + this.completeEdit(event, 'enter'); + break; + + case 27: + this.switchCellToViewMode(); + this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index}); + break; - case 9: - this.completeEdit(event, 'tab'); + case 9: + this.completeEdit(event, 'tab'); - if (event.shiftKey) - this.moveToPreviousCell(event); - else - this.moveToNextCell(event); - break; + if (event.shiftKey) + this.moveToPreviousCell(event); + else + this.moveToNextCell(event); + break; + } } }, moveToPreviousCell(event) { diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue index 9b889c0dd..b54a853c8 100644 --- a/src/views/datatable/DataTableEditDemo.vue +++ b/src/views/datatable/DataTableEditDemo.vue @@ -4,7 +4,7 @@
-

DataTable

+

DataTable - InCell Edit

In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.

@@ -45,7 +45,7 @@

Advanced Cell Editing

-

Custom implementation with validations, dynamic columns and ability to revert values with the escape key.

+

Custom implementation with validations, dynamic columns and reverting values with the escape key.

+ +

Row Editing

+ + + + + + + + + + + + +
@@ -60,12 +82,170 @@ +import CarService from '../../service/CarService'; +import DataTableSubMenu from './DataTableSubMenu'; +import Vue from 'vue'; +export default { + data() { + return { + cars1: null, + cars2: null, + cars3: null, + editingCellRows: {}, + editingRows: [], + columns: null, + brands: [ + {brand: 'Audi', value: 'Audi'}, + {brand: 'BMW', value: 'BMW'}, + {brand: 'Fiat', value: 'Fiat'}, + {brand: 'Honda', value: 'Honda'}, + {brand: 'Jaguar', value: 'Jaguar'}, + {brand: 'Mercedes', value: 'Mercedes'}, + {brand: 'Renault', value: 'Renault'}, + {brand: 'Volkswagen', value: 'Volkswagen'}, + {brand: 'Volvo', value: 'Volvo'} + ] + } + }, + carService: null, + originalRows: null, + created() { + this.carService = new CarService(); + + this.columns = [ + {field: 'vin', header: 'Vin'}, + {field: 'year', header: 'Year'}, + {field: 'brand', header: 'Brand'}, + {field: 'color', header: 'Color'} + ]; + + this.originalRows = {}; + }, + methods: { + onCellEditComplete(event) { + if (!this.editingCellRows[event.index]) { + return; + } + + const editingCellValue = this.editingCellRows[event.index][event.field]; + + switch (event.field) { + case 'year': + if (this.isPositiveInteger(editingCellValue)) + Vue.set(this.cars2, event.index, this.editingCellRows[event.index]); + else + event.preventDefault(); + break; + + default: + if (editingCellValue.trim().length > 0) + Vue.set(this.cars2, event.index, this.editingCellRows[event.index]); + else + event.preventDefault(); + break; + } + }, + onCellEdit(newValue, props) { + if (!this.editingCellRows[props.index]) { + this.editingCellRows[props.index] = {...props.data}; + } + + this.editingCellRows[props.index][props.column.field] = newValue; + }, + isPositiveInteger(val) { + let str = String(val); + str = str.trim(); + if (!str) { + return false; + } + str = str.replace(/^0+/, "") || "0"; + var n = Math.floor(Number(str)); + return n !== Infinity && String(n) === str && n >= 0; + }, + onRowEditInit(event) { + this.originalRows[event.index] = {...this.cars3[event.index]}; + }, + onRowEditCancel(event) { + Vue.set(this.cars3, event.index, this.originalRows[event.index]); + } + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars1 = data); + this.carService.getCarsSmall().then(data => this.cars2 = data); + this.carService.getCarsSmall().then(data => this.cars3 = data); + }, + components: { + 'DataTableSubMenu': DataTableSubMenu + } +} @@ -84,7 +264,8 @@ export default { cars1: null, cars2: null, cars3: null, - editingRows: {}, + editingCellRows: {}, + editingRows: [], columns: null, brands: [ {brand: 'Audi', value: 'Audi'}, @@ -100,6 +281,7 @@ export default { } }, carService: null, + originalRows: null, created() { this.carService = new CarService(); @@ -109,37 +291,39 @@ export default { {field: 'brand', header: 'Brand'}, {field: 'color', header: 'Color'} ]; + + this.originalRows = {}; }, methods: { onCellEditComplete(event) { - if (!this.editingRows[event.index]) { + if (!this.editingCellRows[event.index]) { return; } - const editingCellValue = this.editingRows[event.index][event.field]; + const editingCellValue = this.editingCellRows[event.index][event.field]; switch (event.field) { case 'year': if (this.isPositiveInteger(editingCellValue)) - Vue.set(this.cars2, event.index, this.editingRows[event.index]); + Vue.set(this.cars2, event.index, this.editingCellRows[event.index]); else event.preventDefault(); break; default: if (editingCellValue.trim().length > 0) - Vue.set(this.cars2, event.index, this.editingRows[event.index]); + Vue.set(this.cars2, event.index, this.editingCellRows[event.index]); else event.preventDefault(); break; } }, onCellEdit(newValue, props) { - if (!this.editingRows[props.index]) { - this.editingRows[props.index] = {...props.data}; + if (!this.editingCellRows[props.index]) { + this.editingCellRows[props.index] = {...props.data}; } - this.editingRows[props.index][props.column.field] = newValue; + this.editingCellRows[props.index][props.column.field] = newValue; }, isPositiveInteger(val) { let str = String(val); @@ -150,6 +334,12 @@ export default { str = str.replace(/^0+/, "") || "0"; var n = Math.floor(Number(str)); return n !== Infinity && String(n) === str && n >= 0; + }, + onRowEditInit(event) { + this.originalRows[event.index] = {...this.cars3[event.index]}; + }, + onRowEditCancel(event) { + Vue.set(this.cars3, event.index, this.originalRows[event.index]); } }, mounted() {