Docs for ContextMenu and DataTable
cagataycivici
parent
1d279b920d
commit
1ff31531e9
|
|
@ -28,6 +28,7 @@ export declare class DataTable extends Vue {
|
|||
selectionMode?: string;
|
||||
compareSelectionBy?: string;
|
||||
metaKeySelection?: boolean;
|
||||
contextMenuSelection?: any;
|
||||
rowHover?: boolean;
|
||||
csvSeparator?: string;
|
||||
exportFilename?: string;
|
||||
|
|
@ -58,6 +59,7 @@ export declare class DataTable extends Vue {
|
|||
$emit(eventName: 'sort', event: Event): this;
|
||||
$emit(eventName: 'filter', event: Event): this;
|
||||
$emit(eventName: 'row-click', event: Event): this;
|
||||
$emit(eventName: 'row-contextmenu', event: Event): this;
|
||||
$emit(eventName: 'row-select', event: Event): this;
|
||||
$emit(eventName: 'row-unselect', event: Event): this;
|
||||
$emit(eventName: 'column-resize-end', event: Event): this;
|
||||
|
|
|
|||
|
|
@ -27,11 +27,11 @@
|
|||
@column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)"
|
||||
@column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
|
||||
@column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
|
||||
<DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
|
||||
<DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
|
||||
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
|
||||
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
|
||||
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($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)"
|
||||
|
|
@ -50,22 +50,22 @@
|
|||
@column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
|
||||
</template>
|
||||
<template #body>
|
||||
<DTTableBody :value="dataToRender" :columns="frozenColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
|
||||
<DTTableBody :value="dataToRender" :columns="frozenColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
|
||||
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
|
||||
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
|
||||
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($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)"
|
||||
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
|
||||
</template>
|
||||
<template #frozenbody>
|
||||
<DTTableBody v-if="frozenValue" :value="frozenValue" :columns="frozenColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
|
||||
<DTTableBody v-if="frozenValue" :value="frozenValue" :columns="frozenColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
|
||||
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
|
||||
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
|
||||
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($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)"
|
||||
|
|
@ -86,22 +86,22 @@
|
|||
@column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
|
||||
</template>
|
||||
<template #body>
|
||||
<DTTableBody :value="dataToRender" :columns="scrollableColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
|
||||
<DTTableBody :value="dataToRender" :columns="scrollableColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
|
||||
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
|
||||
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
|
||||
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($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)"
|
||||
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
|
||||
</template>
|
||||
<template #frozenbody>
|
||||
<DTTableBody v-if="frozenValue" :value="frozenValue" :columns="scrollableColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
|
||||
<DTTableBody v-if="frozenValue" :value="frozenValue" :columns="scrollableColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
|
||||
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
|
||||
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
|
||||
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($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)"
|
||||
|
|
@ -242,6 +242,10 @@ export default {
|
|||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
contextMenuSelection: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
rowHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
@ -617,6 +621,7 @@ export default {
|
|||
onRowClick(e) {
|
||||
const event = e.originalEvent;
|
||||
const target = event.target;
|
||||
const rowIndex = event.index;
|
||||
const targetNode = target.nodeName;
|
||||
const parentNode = target.parentElement && target.parentElement.nodeName;
|
||||
|
||||
|
|
@ -656,7 +661,7 @@ export default {
|
|||
this.$emit('update:selection', _selection);
|
||||
}
|
||||
|
||||
this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'row'});
|
||||
this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
|
||||
}
|
||||
else {
|
||||
if(this.isSingleSelectionMode()) {
|
||||
|
|
@ -668,18 +673,18 @@ export default {
|
|||
this.$emit('update:selection', _selection);
|
||||
}
|
||||
|
||||
this.$emit('row-select', {originalEvent: event, data: rowData, type: 'row'});
|
||||
this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.selectionMode === 'single') {
|
||||
if (selected) {
|
||||
this.$emit('update:selection', null);
|
||||
this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'row'});
|
||||
this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
|
||||
}
|
||||
else {
|
||||
this.$emit('update:selection', rowData);
|
||||
this.$emit('row-select', {originalEvent: event, data: rowData, type: 'row'});
|
||||
this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
|
||||
}
|
||||
}
|
||||
else if (this.selectionMode === 'multiple') {
|
||||
|
|
@ -687,12 +692,12 @@ export default {
|
|||
const selectionIndex = this.findIndexInSelection(rowData);
|
||||
const _selection = this.selection.filter((val, i) => i != selectionIndex);
|
||||
this.$emit('update:selection', _selection);
|
||||
this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'row'});
|
||||
this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
|
||||
}
|
||||
else {
|
||||
const _selection = this.selection ? [...this.selection, rowData] : [rowData];
|
||||
this.$emit('update:selection', _selection);
|
||||
this.$emit('row-select', {originalEvent: event, data: rowData, type: 'row'});
|
||||
this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -701,6 +706,12 @@ export default {
|
|||
|
||||
this.rowTouched = false;
|
||||
},
|
||||
onRowRightClick(event) {
|
||||
DomHandler.clearSelection();
|
||||
|
||||
this.$emit('update:contextMenuSelection', event.data);
|
||||
this.$emit('row-contextmenu', event);
|
||||
},
|
||||
onRowTouchEnd() {
|
||||
this.rowTouched = true;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</tr>
|
||||
<tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
|
||||
v-if="expandableRowGroups ? isRowGroupExpanded(rowData): true"
|
||||
@click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null"
|
||||
@click="onRowClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null"
|
||||
@mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
|
||||
<template v-for="(col,i) of columns">
|
||||
<DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
|
||||
|
|
@ -137,6 +137,10 @@ export default {
|
|||
type: String,
|
||||
default: null
|
||||
},
|
||||
contextMenuSelection: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
rowClass: {
|
||||
type: null,
|
||||
default: null
|
||||
|
|
@ -185,6 +189,12 @@ export default {
|
|||
});
|
||||
}
|
||||
|
||||
if (this.contextMenuSelection) {
|
||||
rowStyleClass.push({
|
||||
'p-highlight-contextmenu': this.isSelectedWithContextMenu(rowData)
|
||||
});
|
||||
}
|
||||
|
||||
if (this.rowClass) {
|
||||
let rowClassValue = this.rowClass(rowData);
|
||||
|
||||
|
|
@ -321,6 +331,13 @@ export default {
|
|||
|
||||
return false;
|
||||
},
|
||||
isSelectedWithContextMenu(rowData) {
|
||||
if (rowData && this.contextMenuSelection) {
|
||||
return this.equals(rowData, this.contextMenuSelection, this.dataKey);
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
findIndexInSelection(rowData) {
|
||||
return this.findIndex(rowData, this.selection);
|
||||
},
|
||||
|
|
@ -346,6 +363,9 @@ export default {
|
|||
onRowClick(event, rowData, rowIndex) {
|
||||
this.$emit('row-click', {originalEvent: event, data: rowData, index: rowIndex});
|
||||
},
|
||||
onRowRightClick(event, rowData, rowIndex) {
|
||||
this.$emit('row-rightclick', {originalEvent: event, data: rowData, index: rowIndex});
|
||||
},
|
||||
onRowTouchEnd(event) {
|
||||
this.$emit('row-touchend', event);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -220,6 +220,11 @@ export default new Router({
|
|||
path: '/datatable/style',
|
||||
name: 'datatablestyle',
|
||||
component: () => import('./views/datatable/DataTableStyleDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/datatable/contextmenu',
|
||||
name: 'datatablecontextmenu',
|
||||
component: () => import('./views/datatable/DataTableContextMenuDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/dataview',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<div>
|
||||
<DataTableSubMenu />
|
||||
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>DataTable - ContextMenu</h1>
|
||||
<p>CDataTable has exclusive integration with ContextMenu.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<DataTable :value="cars" :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
</DataTable>
|
||||
|
||||
<ContextMenu :model="menuModel" ref="cm" />
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
</DataTable>
|
||||
|
||||
<ContextMenu :model="menuModel" ref="cm" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import CarService from '../../service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
selectedCar: null,
|
||||
menuModel: [
|
||||
{label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewCar(this.selectedCar)},
|
||||
{label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteCar(this.selectedCar)}
|
||||
]
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
},
|
||||
methods: {
|
||||
onRowContextMenu(event) {
|
||||
this.$refs.cm.show(event.originalEvent);
|
||||
},
|
||||
viewCar(car) {
|
||||
this.$toast.add({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
|
||||
},
|
||||
deleteCar(car) {
|
||||
this.cars = this.cars.filter((c) => c.vin !== car.vin);
|
||||
this.$toast.add({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand});
|
||||
this.selectedCar = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CarService from '../../service/CarService';
|
||||
import DataTableSubMenu from './DataTableSubMenu';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
selectedCar: null,
|
||||
menuModel: [
|
||||
{label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewCar(this.selectedCar)},
|
||||
{label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteCar(this.selectedCar)}
|
||||
]
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
},
|
||||
methods: {
|
||||
onRowContextMenu(event) {
|
||||
this.$refs.cm.show(event.originalEvent);
|
||||
},
|
||||
viewCar(car) {
|
||||
this.$toast.add({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
|
||||
},
|
||||
deleteCar(car) {
|
||||
this.cars = this.cars.filter((c) => c.vin !== car.vin);
|
||||
this.$toast.add({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand});
|
||||
this.selectedCar = null;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'DataTableSubMenu': DataTableSubMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1357,6 +1357,58 @@ export default {
|
|||
this.carService.getCarsMedium().then(data => this.cars = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>ContextMenu</h3>
|
||||
<p>DataTable provides exclusive integration with the ContextMenu component using <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
</DataTable>
|
||||
|
||||
<ContextMenu :model="menuModel" ref="cm" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import CarService from '../../service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
selectedCar: null,
|
||||
menuModel: [
|
||||
{label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewCar(this.selectedCar)},
|
||||
{label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteCar(this.selectedCar)}
|
||||
]
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
},
|
||||
methods: {
|
||||
onRowContextMenu(event) {
|
||||
this.$refs.cm.show(event.originalEvent);
|
||||
},
|
||||
viewCar(car) {
|
||||
this.$toast.add({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
|
||||
},
|
||||
deleteCar(car) {
|
||||
this.cars = this.cars.filter((c) => c.vin !== car.vin);
|
||||
this.$toast.add({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand});
|
||||
this.selectedCar = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Empty Message</h3>
|
||||
|
|
@ -1738,6 +1790,12 @@ export default {
|
|||
when set to false selection of each item
|
||||
can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>contextMenuSelection</td>
|
||||
<td>object</td>
|
||||
<td>null</td>
|
||||
<td>Selected row instance with the ContextMenu.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowHover</td>
|
||||
<td>boolean</td>
|
||||
|
|
@ -1935,13 +1993,22 @@ export default {
|
|||
<tr>
|
||||
<td>row-click</td>
|
||||
<td>event.originalEvent: Browser event. <br />
|
||||
event.data: Selected row data.</td>
|
||||
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-contextmenu</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 selected with a ContextMenu.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row-select</td>
|
||||
<td>event.originalEvent: Browser event. <br />
|
||||
event.data: Selected row data. <br />
|
||||
event.index: Row index. <br />
|
||||
event.type: Type of the selection, valid values are "row", "radio" or "checkbox".</td>
|
||||
<td>Callback to invoke when a row is selected.</td>
|
||||
</tr>
|
||||
|
|
@ -1949,6 +2016,7 @@ export default {
|
|||
<td>row-unselect</td>
|
||||
<td>event.originalEvent: Browser event. <br />
|
||||
event.data: Unselected row data. <br />
|
||||
event.index: Row index. <br />
|
||||
event.type: Type of the selection, valid values are "row", "radio" or "checkbox".</td>
|
||||
<td>Callback to invoke when a row is unselected.</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<li><router-link to="/datatable/colresize">● ColResize</router-link></li>
|
||||
<li><router-link to="/datatable/reorder">● Reorder</router-link></li>
|
||||
<li><router-link to="/datatable/rowgroup">● RowGroup</router-link></li>
|
||||
<li><router-link to="/datatable/contextmenu">● ContextMenu</router-link></li>
|
||||
<li><router-link to="/datatable/responsive">● Responsive</router-link></li>
|
||||
<li><router-link to="/datatable/export">● Export</router-link></li>
|
||||
<li><router-link to="/datatable/state">● State</router-link></li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue