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

Fixed #1273 - Support for Filtering, Sorting and Cell Editing on DataTable

pull/1643/head
mertsincan 2021-10-02 23:49:23 +03:00
parent 1a72acabb5
commit 044290601e
3 changed files with 14 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/datatable/BodyCell.vue
View File

@ -2,7 +2,7 @@
<td :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell">
<span v-if="responsiveLayout === 'stack'" class="p-column-title">{{columnProp('header')}}</span>
<component :is="column.children.body" :data="rowData" :column="column" :index="rowIndex" :frozenRow="frozenRow" v-if="column.children && column.children.body && !d_editing" />
<component :is="column.children.editor" :data="rowData" :column="column" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.editor && d_editing" />
<component :is="column.children.editor" :data="editingRowData" :column="column" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.editor && d_editing" />
<template v-else-if="columnProp('selectionMode')">
<DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="columnProp('selectionMode') === 'single'" />
<DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="columnProp('selectionMode') ==='multiple'" />
@ -39,7 +39,7 @@ import Ripple from 'primevue/ripple';
export default {
name: 'BodyCell',
emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-cell-change',
emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel',
'row-toggle', 'radio-change', 'checkbox-change'],
props: {
rowData: {
@ -157,7 +157,6 @@ export default {
switchCellToViewMode() {
this.d_editing = false;
this.unbindDocumentEditListener();
this.$emit('editing-cell-change', {rowIndex: this.rowIndex, cellIndex: this.index, editing: false});
OverlayEventBus.off('overlay-click', this.overlayEventListener);
this.overlayEventListener = null;
},
@ -169,7 +168,6 @@ export default {
this.d_editing = true;
this.bindDocumentEditListener();
this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
this.$emit('editing-cell-change', {rowIndex: this.rowIndex, cellIndex: this.index, editing: true});
this.overlayEventListener = (e) => {
if (this.$el && this.$el.contains(e.target)) {
@ -181,9 +179,10 @@ export default {
}
},
completeEdit(event, type) {
let completeEvent = {
const completeEvent = {
originalEvent: event,
data: this.rowData,
newData: this.editingRowData,
field: this.columnProp('field'),
index: this.rowIndex,
type: type,
@ -328,6 +327,9 @@ export default {
}
},
computed: {
editingRowData() {
return this.d_editing ? {...this.rowData} : this.rowData;
},
containerClass() {
return [this.columnProp('bodyClass'), this.columnProp('class'), {
'p-selection-column': this.columnProp('selectionMode') != null,

26
src/components/datatable/DataTable.vue
View File

@ -32,7 +32,7 @@
@row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
@row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)" @editing-cell-change="onEditingCellChange($event)"/>
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)" />
<DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
@ -41,7 +41,7 @@
@row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
@row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)" @editing-cell-change="onEditingCellChange($event)"/>
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)" />
<DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
</table>
</div>
@ -77,7 +77,7 @@ export default {
'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all',
'column-resize-end', 'column-reorder', 'row-reorder', 'update:expandedRows', 'row-collapse', 'row-expand',
'update:expandedRowGroups', 'rowgroup-collapse', 'rowgroup-expand', 'update:filters', 'state-restore', 'state-save',
'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-cell-change'],
'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel'],
props: {
value: {
type: Array,
@ -328,8 +328,7 @@ export default {
d_expandedRowKeys: null,
d_columnOrder: null,
d_editingRowKeys: null,
d_filters: this.cloneFilters(this.filters),
d_editingCells: []
d_filters: this.cloneFilters(this.filters)
};
},
rowTouched: false,
@ -1585,18 +1584,6 @@ export default {
onCellEditCancel(event) {
this.$emit('cell-edit-cancel', event);
},
onEditingCellChange(event) {
let { rowIndex, cellIndex, editing } = event;
let _editingCells = [...this.d_editingCells];
if (editing)
_editingCells.push({ rowIndex, cellIndex });
else
_editingCells = _editingCells.filter(cell => !(cell.rowIndex === rowIndex && cell.cellIndex === cellIndex));
this.d_editingCells = _editingCells;
this.$emit('value-change', this.processedData);
},
onRowEditInit(event) {
let _editingRows = this.editingRows ? [...this.editingRows] : [];
_editingRows.push(event.data);
@ -1794,13 +1781,10 @@ export default {
hasFilters() {
return this.filters && Object.keys(this.filters).length > 0 && this.filters.constructor === Object;
},
hasEditingCell() {
return this.d_editingCells && this.d_editingCells.length !== 0;
},
processedData() {
let data = this.value || [];
if (!this.lazy && !this.hasEditingCell) {
if (!this.lazy) {
if (data && data.length) {
if (this.sorted) {
if(this.sortMode === 'single')

7
src/components/datatable/TableBody.vue
View File

@ -21,7 +21,7 @@
:editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :responsiveLayout="responsiveLayout"
@radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"
@cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)" @editing-cell-change="onEditingCellChange($event)"/>
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)" />
</template>
</tr>
<tr class="p-datatable-row-expansion" v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'" role="row">
@ -52,7 +52,7 @@ export default {
emits: ['rowgroup-toggle', 'row-click', 'row-dblclick', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown',
'row-dragstart', 'row-dragover', 'row-dragleave', 'row-dragend', 'row-drop', 'row-toggle',
'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel',
'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-cell-change'],
'row-edit-init', 'row-edit-save', 'row-edit-cancel'],
props: {
value: {
type: Array,
@ -447,9 +447,6 @@ export default {
onRowEditCancel(event) {
this.$emit('row-edit-cancel', event);
},
onEditingCellChange(event) {
this.$emit('editing-cell-change', event);
},
updateFrozenRowStickyPosition() {
this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
},