Lint fixes
parent
0ad60de334
commit
319a1bc67a
|
@ -115,7 +115,7 @@ export default {
|
||||||
this.completeEdit(event, 'outside');
|
this.completeEdit(event, 'outside');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener('click', this.documentEditListener);
|
document.addEventListener('click', this.documentEditListener);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -141,17 +141,17 @@ export default {
|
||||||
},
|
},
|
||||||
completeEdit(event, type) {
|
completeEdit(event, type) {
|
||||||
let completeEvent = {
|
let completeEvent = {
|
||||||
originalEvent: event,
|
originalEvent: event,
|
||||||
data: this.rowData,
|
data: this.rowData,
|
||||||
field: this.column.field,
|
field: this.column.field,
|
||||||
index: this.index,
|
index: this.index,
|
||||||
type: type,
|
type: type,
|
||||||
defaultPrevented: false,
|
defaultPrevented: false,
|
||||||
preventDefault: function() {
|
preventDefault: function() {
|
||||||
this.defaultPrevented = true;
|
this.defaultPrevented = true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.$emit('cell-edit-complete', completeEvent);
|
this.$emit('cell-edit-complete', completeEvent);
|
||||||
|
|
||||||
if (!completeEvent.defaultPrevented) {
|
if (!completeEvent.defaultPrevented) {
|
||||||
|
@ -164,7 +164,7 @@ export default {
|
||||||
case 13:
|
case 13:
|
||||||
this.completeEdit(event, 'enter');
|
this.completeEdit(event, 'enter');
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 27:
|
case 27:
|
||||||
this.switchCellToViewMode();
|
this.switchCellToViewMode();
|
||||||
this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
|
this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
|
||||||
|
|
|
@ -71,9 +71,9 @@
|
||||||
<DTBodyCell v-if="shouldRenderBodyCell(dataToRender, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
|
<DTBodyCell v-if="shouldRenderBodyCell(dataToRender, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
|
||||||
:rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow"
|
:rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow"
|
||||||
@radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox"
|
@radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox"
|
||||||
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(dataToRender, col, index) : null"
|
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(dataToRender, col, index) : null"
|
||||||
:editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
|
:editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
|
||||||
@cell-edit-init="onCellEditInit" @cell-edit-complete="onCellEditComplete" @cell-edit-cancel="onCellEditCancel"
|
@cell-edit-init="onCellEditInit" @cell-edit-complete="onCellEditComplete" @cell-edit-cancel="onCellEditCancel"
|
||||||
@row-edit-init="onRowEditInit" @row-edit-save="onRowEditSave" @row-edit-cancel="onRowEditCancel"/>
|
@row-edit-init="onRowEditInit" @row-edit-save="onRowEditSave" @row-edit-cancel="onRowEditCancel"/>
|
||||||
</template>
|
</template>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -1609,7 +1609,7 @@ export default {
|
||||||
let _editingRows = this.editingRows ? [...this.editingRows] : [];
|
let _editingRows = this.editingRows ? [...this.editingRows] : [];
|
||||||
_editingRows.push(event.data);
|
_editingRows.push(event.data);
|
||||||
this.$emit('update:editingRows', _editingRows);
|
this.$emit('update:editingRows', _editingRows);
|
||||||
this.$emit('row-edit-init', event);
|
this.$emit('row-edit-init', event);
|
||||||
},
|
},
|
||||||
onRowEditSave(event) {
|
onRowEditSave(event) {
|
||||||
let _editingRows = [...this.editingRows];
|
let _editingRows = [...this.editingRows];
|
||||||
|
|
|
@ -105,7 +105,7 @@ export default {
|
||||||
onKeyDown(event) {
|
onKeyDown(event) {
|
||||||
if (event.which === 9) {
|
if (event.which === 9) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
let focusableElements = DomHandler.getFocusableElements(this.$refs.container);
|
let focusableElements = DomHandler.getFocusableElements(this.$refs.container);
|
||||||
|
|
||||||
if (focusableElements && focusableElements.length > 0) {
|
if (focusableElements && focusableElements.length > 0) {
|
||||||
|
|
|
@ -690,11 +690,11 @@ export default {
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>InCell Editing</h3>
|
<h3>InCell Editing</h3>
|
||||||
<p>In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API
|
<p>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.
|
so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>Individuals cell editing is configured by setting the <i>editMode</i> to "cell" and defining editors with the "editor" template. The content of the
|
<p>Individuals cell editing is configured by setting the <i>editMode</i> to "cell" and defining editors with the "editor" template. The content of the
|
||||||
editor defines how the editing is implemented, below example demonstrates two cases. In the first example, simple v-model editors are utilized. This is pretty straightforward in most cases.
|
editor defines how the editing is implemented, below example demonstrates two cases. In the first example, simple v-model editors are utilized. This is pretty straightforward in most cases.
|
||||||
On the other hand, second example is more advanced to consider validations and ability to revert values with the escape key.</p>
|
On the other hand, second example is more advanced to consider validations and ability to revert values with the escape key.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
|
@ -784,7 +784,7 @@ export default {
|
||||||
if (!this.editingCellRows[event.index]) {
|
if (!this.editingCellRows[event.index]) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const editingCellValue = this.editingCellRows[event.index][event.field];
|
const editingCellValue = this.editingCellRows[event.index][event.field];
|
||||||
|
|
||||||
switch (event.field) {
|
switch (event.field) {
|
||||||
|
@ -886,7 +886,7 @@ export default {
|
||||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Column Resize</h3>
|
<h3>Column Resize</h3>
|
||||||
<p>Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
|
<p>Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>DataTable - InCell Edit</h1>
|
<h1>DataTable - InCell Edit</h1>
|
||||||
<p>In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API
|
<p>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.
|
so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -194,7 +194,7 @@ export default {
|
||||||
if (!this.editingCellRows[event.index]) {
|
if (!this.editingCellRows[event.index]) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const editingCellValue = this.editingCellRows[event.index][event.field];
|
const editingCellValue = this.editingCellRows[event.index][event.field];
|
||||||
|
|
||||||
switch (event.field) {
|
switch (event.field) {
|
||||||
|
@ -299,7 +299,7 @@ export default {
|
||||||
if (!this.editingCellRows[event.index]) {
|
if (!this.editingCellRows[event.index]) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const editingCellValue = this.editingCellRows[event.index][event.field];
|
const editingCellValue = this.editingCellRows[event.index][event.field];
|
||||||
|
|
||||||
switch (event.field) {
|
switch (event.field) {
|
||||||
|
|
Loading…
Reference in New Issue