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

Fixed #1075 - Row double click for Table

pull/1196/head^2
Cagatay Civici 2021-05-12 16:47:31 +03:00
parent 8d87d78db2
commit ac948d5b57
4 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/datatable/DataTable.d.ts vendored
View File

@ -67,6 +67,7 @@ declare class DataTable {
$emit(eventName: 'sort', event: Event): this;
$emit(eventName: 'filter', event: Event): this;
$emit(eventName: 'row-click', event: Event): this;
$emit(eventName: 'row-dblclick', event: Event): this;
$emit(eventName: 'row-contextmenu', event: Event): this;
$emit(eventName: 'row-select', event: Event): this;
$emit(eventName: 'row-unselect', event: Event): this;

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

@ -28,7 +28,7 @@
: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"
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading" :responsiveLayout="responsiveLayout"
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-dblclick="onRowDblClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
@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)"
@ -37,7 +37,7 @@
: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"
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading" :responsiveLayout="responsiveLayout"
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-dblclick="onRowDblClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
@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)"
@ -73,7 +73,7 @@ import TableFooter from './TableFooter.vue';
export default {
name: 'DataTable',
emits: ['update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'row-click',
emits: ['update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'row-click', 'row-dblclick',
'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',
@ -711,6 +711,14 @@ export default {
this.rowTouched = false;
},
onRowDblClick(e) {
const event = e.originalEvent;
if (DomHandler.isClickable(event.target)) {
return;
}
this.$emit('row-dblclick', e);
},
onRowRightClick(event) {
DomHandler.clearSelection();
event.originalEvent.target.focus();

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

@ -12,7 +12,7 @@
</tr>
<tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
v-if="expandableRowGroups ? isRowGroupExpanded(rowData): true"
@click="onRowClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null"
@click="onRowClick($event, rowData, index)" @dblclick="onRowDblClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null"
@mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)" role="row">
<template v-for="(col,i) of columns" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i">
<DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
@ -49,7 +49,7 @@ import BodyCell from './BodyCell.vue';
export default {
name: 'TableBody',
emits: ['rowgroup-toggle', 'row-click', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown',
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'],
@ -390,6 +390,9 @@ export default {
onRowClick(event, rowData, rowIndex) {
this.$emit('row-click', {originalEvent: event, data: rowData, index: rowIndex});
},
onRowDblClick(event, rowData, rowIndex) {
this.$emit('row-dblclick', {originalEvent: event, data: rowData, index: rowIndex});
},
onRowRightClick(event, rowData, rowIndex) {
this.$emit('row-rightclick', {originalEvent: event, data: rowData, index: rowIndex});
},

7
src/views/datatable/DataTableDoc.vue
View File

@ -2290,6 +2290,13 @@ export default {
event.data: Selected row data. <br />
event.index: Row index.</td>
<td>Callback to invoke when a row is clicked.</td>
</tr>
<tr>
<td>row-dblclick</td>
<td>event.originalEvent: Browser event. <br />
event.data: Selected row data. <br />
event.index: Row index.</td>
<td>Callback to invoke when a row is double clicked.</td>
</tr>
<tr>
<td>row-contextmenu</td>