Initiated TableBody component
cagataycivici
parent
d7ceaea97b
commit
2fcbc3fa0d
|
|
@ -24,51 +24,17 @@
|
|||
<DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
|
||||
:groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
|
||||
:sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta"
|
||||
@column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)"
|
||||
@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)" />
|
||||
<tbody class="p-datatable-tbody">
|
||||
<template v-if="!empty">
|
||||
<template v-for="(rowData, index) of dataToRender">
|
||||
<tr class="p-rowgroup-header" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(dataToRender, rowData, index)" :key="getRowKey(rowData, index) + '_subheader'">
|
||||
<td :colspan="columns.length - 1">
|
||||
<button class="p-row-toggler p-link" @click="toggleRowGroup($event, rowData)" v-if="expandableRowGroups">
|
||||
<span :class="rowGroupTogglerIcon(rowData)"></span>
|
||||
</button>
|
||||
<slot name="groupheader" :data="rowData"></slot>
|
||||
</td>
|
||||
</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"
|
||||
@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(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"
|
||||
@radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox"
|
||||
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(dataToRender, col, index) : null"
|
||||
:editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
|
||||
@cell-edit-init="onCellEditInit" @cell-edit-complete="onCellEditComplete" @cell-edit-cancel="onCellEditCancel"
|
||||
@row-edit-init="onRowEditInit" @row-edit-save="onRowEditSave" @row-edit-cancel="onRowEditCancel"/>
|
||||
</template>
|
||||
</tr>
|
||||
<tr class="p-datatable-row-expansion" v-if="expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'">
|
||||
<td :colspan="columns.length">
|
||||
<slot name="expansion" :data="rowData" :index="index">
|
||||
</slot>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="p-rowgroup-footer" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(dataToRender, rowData, index)" :key="getRowKey(rowData, index) + '_subfooter'">
|
||||
<slot name="groupfooter" :data="rowData"></slot>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
<tr v-else class="p-datatable-emptymessage">
|
||||
<td :colspan="columns.length">
|
||||
<slot name="empty"></slot>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionMode="selectionMode"
|
||||
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode"
|
||||
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowGroups="expandedRowGroups"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($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)"/>
|
||||
<DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -95,9 +61,9 @@ import ObjectUtils from '../utils/ObjectUtils';
|
|||
import FilterUtils from '../utils/FilterUtils';
|
||||
import DomHandler from '../utils/DomHandler';
|
||||
import Paginator from '../paginator/Paginator';
|
||||
import BodyCell from './BodyCell.vue';
|
||||
//import ScrollableView from './ScrollableView.vue';
|
||||
import TableHeader from './TableHeader.vue';
|
||||
import TableBody from './TableBody.vue';
|
||||
import TableFooter from './TableFooter.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -545,7 +511,11 @@ export default {
|
|||
|
||||
return filteredValue;
|
||||
},
|
||||
onRowClick(event, rowData, rowIndex) {
|
||||
onRowClick(e) {
|
||||
const event = e.originalEvent;
|
||||
const rowData = e.data;
|
||||
const rowIndex = e.index;
|
||||
|
||||
if (this.selectionMode) {
|
||||
let target = event.target;
|
||||
let targetNode = target.nodeName;
|
||||
|
|
@ -629,7 +599,11 @@ export default {
|
|||
onRowTouchEnd() {
|
||||
this.rowTouched = true;
|
||||
},
|
||||
onRowKeyDown(event, rowData, rowIndex) {
|
||||
onRowKeyDown(e) {
|
||||
const event = e.originalEvent;
|
||||
const rowData = e.data;
|
||||
const rowIndex = e.index;
|
||||
|
||||
if (this.selectionMode) {
|
||||
const row = event.target;
|
||||
|
||||
|
|
@ -801,44 +775,6 @@ export default {
|
|||
equals(data1, data2) {
|
||||
return this.compareSelectionBy === 'equals' ? (data1 === data2) : ObjectUtils.equals(data1, data2, this.dataKey);
|
||||
},
|
||||
isRowExpanded(rowData) {
|
||||
if (rowData && this.expandedRows) {
|
||||
if (this.dataKey)
|
||||
return this.d_expandedRowKeys ? this.d_expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
|
||||
else
|
||||
return this.findIndex(rowData, this.expandedRows) > -1;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
isRowGroupExpanded(rowData) {
|
||||
if (this.expandableRowGroups && this.expandedRowGroups) {
|
||||
let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
|
||||
return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getRowKey(rowData, index) {
|
||||
return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey): index;
|
||||
},
|
||||
getRowClass(rowData) {
|
||||
let rowStyleClass = ['p-datatable-row'];
|
||||
if (this.selection) {
|
||||
rowStyleClass.push({
|
||||
'p-highlight': this.isSelected(rowData)
|
||||
});
|
||||
}
|
||||
|
||||
if (this.rowClass) {
|
||||
let rowClassValue = this.rowClass(rowData);
|
||||
|
||||
if (rowClassValue) {
|
||||
rowStyleClass.push(rowClassValue);
|
||||
}
|
||||
}
|
||||
|
||||
return rowStyleClass;
|
||||
},
|
||||
selectRange(event) {
|
||||
let rangeStart, rangeEnd;
|
||||
|
||||
|
|
@ -1152,12 +1088,17 @@ export default {
|
|||
else
|
||||
event.currentTarget.draggable = false;
|
||||
},
|
||||
onRowDragStart(event, index) {
|
||||
onRowDragStart(e) {
|
||||
const event = e.originalEvent;
|
||||
const index = e.rowIndex;
|
||||
this.rowDragging = true;
|
||||
this.draggedRowIndex = index;
|
||||
event.dataTransfer.setData('text', 'b'); // For firefox
|
||||
},
|
||||
onRowDragOver(event, index) {
|
||||
onRowDragOver(e) {
|
||||
const event = e.originalEvent;
|
||||
const index = e.rowIndex;
|
||||
|
||||
if (this.rowDragging && this.draggedRowIndex !== index) {
|
||||
let rowElement = event.currentTarget;
|
||||
let rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
|
||||
|
|
@ -1250,8 +1191,10 @@ export default {
|
|||
this.$emit('row-expand', event);
|
||||
}
|
||||
},
|
||||
toggleRowGroup(event, data) {
|
||||
let groupFieldValue = ObjectUtils.resolveFieldData(data, this.groupRowsBy);
|
||||
toggleRowGroup(e) {
|
||||
const event = e.originalEvent;
|
||||
const data = e.data;
|
||||
const groupFieldValue = ObjectUtils.resolveFieldData(data, this.groupRowsBy);
|
||||
let _expandedRowGroups = this.expandedRowGroups ? [...this.expandedRowGroups] : [];
|
||||
|
||||
if (this.isRowGroupExpanded(data)) {
|
||||
|
|
@ -1265,101 +1208,6 @@ export default {
|
|||
this.$emit('rowgroup-expand', {originalEvent: event, data: groupFieldValue});
|
||||
}
|
||||
},
|
||||
rowTogglerIcon(rowData) {
|
||||
const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
|
||||
return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
|
||||
},
|
||||
rowGroupTogglerIcon(rowData) {
|
||||
const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
|
||||
return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
|
||||
},
|
||||
shouldRenderRowGroupHeader(value, rowData, i) {
|
||||
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
|
||||
let prevRowData = value[i - 1];
|
||||
if (prevRowData) {
|
||||
let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
|
||||
return currentRowFieldData !== previousRowFieldData;
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
shouldRenderRowGroupFooter(value, rowData, i) {
|
||||
if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
|
||||
let nextRowData = value[i + 1];
|
||||
if (nextRowData) {
|
||||
let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
|
||||
return currentRowFieldData !== nextRowFieldData;
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
shouldRenderBodyCell(value, column, i) {
|
||||
if (this.rowGroupMode) {
|
||||
if (this.rowGroupMode === 'subheader') {
|
||||
return this.groupRowsBy !== column.field;
|
||||
}
|
||||
else if (this.rowGroupMode === 'rowspan') {
|
||||
if (this.isGrouped(column)) {
|
||||
let prevRowData = value[i - 1];
|
||||
if (prevRowData) {
|
||||
let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], column.field);
|
||||
let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, column.field);
|
||||
return currentRowFieldData !== previousRowFieldData;
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
isGrouped(column) {
|
||||
if (this.groupRowsBy) {
|
||||
if (Array.isArray(this.groupRowsBy))
|
||||
return this.groupRowsBy.indexOf(column.field) > -1;
|
||||
else
|
||||
return this.groupRowsBy === column.field;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
calculateRowGroupSize(value, column, index) {
|
||||
if (this.isGrouped(column)) {
|
||||
let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], column.field);
|
||||
let nextRowFieldData = currentRowFieldData;
|
||||
let groupRowSpan = 0;
|
||||
|
||||
while (currentRowFieldData === nextRowFieldData) {
|
||||
groupRowSpan++;
|
||||
let nextRowData = value[++index];
|
||||
if (nextRowData) {
|
||||
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, column.field);
|
||||
}
|
||||
else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return groupRowSpan === 1 ? null : groupRowSpan;
|
||||
}
|
||||
else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
isStateful() {
|
||||
return this.stateKey != null;
|
||||
},
|
||||
|
|
@ -1527,16 +1375,6 @@ export default {
|
|||
onCellEditCancel(event) {
|
||||
this.$emit('cell-edit-cancel', event);
|
||||
},
|
||||
isRowEditing(rowData) {
|
||||
if (rowData && this.editingRows) {
|
||||
if (this.dataKey)
|
||||
return this.d_editingRowKeys ? this.d_editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
|
||||
else
|
||||
return this.findIndex(rowData, this.editingRows) > -1;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
onRowEditInit(event) {
|
||||
let _editingRows = this.editingRows ? [...this.editingRows] : [];
|
||||
_editingRows.push(event.data);
|
||||
|
|
@ -1640,7 +1478,7 @@ export default {
|
|||
dataToRender() {
|
||||
const data = this.processedData;
|
||||
|
||||
if (this.paginator) {
|
||||
if (data && this.paginator) {
|
||||
const first = this.lazy ? 0 : this.d_first;
|
||||
return data.slice(first, first + this.d_rows);
|
||||
}
|
||||
|
|
@ -1686,10 +1524,10 @@ export default {
|
|||
},
|
||||
components: {
|
||||
'DTPaginator': Paginator,
|
||||
'DTBodyCell': BodyCell,
|
||||
//'DTScrollableView': ScrollableView,
|
||||
'DTTableHeader': TableHeader,
|
||||
'DTTableFooter': TableFooter
|
||||
'DTTableBody': TableBody,
|
||||
'DTTableFooter': TableFooter,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,353 @@
|
|||
<template>
|
||||
<tbody class="p-datatable-tbody">
|
||||
<template v-if="!empty">
|
||||
<template v-for="(rowData, index) of value">
|
||||
<tr class="p-rowgroup-header" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, index)" :key="getRowKey(rowData, index) + '_subheader'">
|
||||
<td :colspan="columns.length - 1">
|
||||
<button class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" v-if="expandableRowGroups">
|
||||
<span :class="rowGroupTogglerIcon(rowData)"></span>
|
||||
</button>
|
||||
<slot name="groupheader" :data="rowData"></slot>
|
||||
</td>
|
||||
</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"
|
||||
@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)"
|
||||
:rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="onRowToggle($event)"
|
||||
@radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)"
|
||||
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
|
||||
:editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
|
||||
@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>
|
||||
</tr>
|
||||
<tr class="p-datatable-row-expansion" v-if="expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'">
|
||||
<td :colspan="columns.length">
|
||||
<slot name="expansion" :data="rowData" :index="index">
|
||||
</slot>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="p-rowgroup-footer" v-if="rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, index)" :key="getRowKey(rowData, index) + '_subfooter'">
|
||||
<slot name="groupfooter" :data="rowData"></slot>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
<tr v-else class="p-datatable-emptymessage">
|
||||
<td :colspan="columns.length">
|
||||
<slot name="empty"></slot>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ObjectUtils from '../utils/ObjectUtils';
|
||||
import BodyCell from './BodyCell.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
columns: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
empty: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rowGroupMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
groupRowsBy: {
|
||||
type: [Array,String],
|
||||
default: null
|
||||
},
|
||||
expandableRowGroups: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
expandedRowGroups: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
expandedRowIcon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
collapsedRowIcon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
expandedRows: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
selection: {
|
||||
type: [Array,Object],
|
||||
default: null
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
rowClass: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
editMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
shouldRenderRowGroupHeader(value, rowData, i) {
|
||||
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
|
||||
let prevRowData = value[i - 1];
|
||||
if (prevRowData) {
|
||||
let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
|
||||
return currentRowFieldData !== previousRowFieldData;
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
getRowKey(rowData, index) {
|
||||
return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey): index;
|
||||
},
|
||||
getRowClass(rowData) {
|
||||
let rowStyleClass = ['p-datatable-row'];
|
||||
if (this.selection) {
|
||||
rowStyleClass.push({
|
||||
'p-highlight': this.isSelected(rowData)
|
||||
});
|
||||
}
|
||||
|
||||
if (this.rowClass) {
|
||||
let rowClassValue = this.rowClass(rowData);
|
||||
|
||||
if (rowClassValue) {
|
||||
rowStyleClass.push(rowClassValue);
|
||||
}
|
||||
}
|
||||
|
||||
return rowStyleClass;
|
||||
},
|
||||
shouldRenderRowGroupFooter(value, rowData, i) {
|
||||
if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
|
||||
let nextRowData = value[i + 1];
|
||||
if (nextRowData) {
|
||||
let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
|
||||
return currentRowFieldData !== nextRowFieldData;
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
shouldRenderBodyCell(value, column, i) {
|
||||
if (this.rowGroupMode) {
|
||||
if (this.rowGroupMode === 'subheader') {
|
||||
return this.groupRowsBy !== column.field;
|
||||
}
|
||||
else if (this.rowGroupMode === 'rowspan') {
|
||||
if (this.isGrouped(column)) {
|
||||
let prevRowData = value[i - 1];
|
||||
if (prevRowData) {
|
||||
let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], column.field);
|
||||
let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, column.field);
|
||||
return currentRowFieldData !== previousRowFieldData;
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
calculateRowGroupSize(value, column, index) {
|
||||
if (this.isGrouped(column)) {
|
||||
let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], column.field);
|
||||
let nextRowFieldData = currentRowFieldData;
|
||||
let groupRowSpan = 0;
|
||||
|
||||
while (currentRowFieldData === nextRowFieldData) {
|
||||
groupRowSpan++;
|
||||
let nextRowData = value[++index];
|
||||
if (nextRowData) {
|
||||
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, column.field);
|
||||
}
|
||||
else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return groupRowSpan === 1 ? null : groupRowSpan;
|
||||
}
|
||||
else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
rowTogglerIcon(rowData) {
|
||||
const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
|
||||
return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
|
||||
},
|
||||
rowGroupTogglerIcon(rowData) {
|
||||
const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
|
||||
return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
|
||||
},
|
||||
isGrouped(column) {
|
||||
if (this.groupRowsBy) {
|
||||
if (Array.isArray(this.groupRowsBy))
|
||||
return this.groupRowsBy.indexOf(column.field) > -1;
|
||||
else
|
||||
return this.groupRowsBy === column.field;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
isRowEditing(rowData) {
|
||||
if (rowData && this.editingRows) {
|
||||
if (this.dataKey)
|
||||
return this.d_editingRowKeys ? this.d_editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
|
||||
else
|
||||
return this.findIndex(rowData, this.editingRows) > -1;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
isRowExpanded(rowData) {
|
||||
if (rowData && this.expandedRows) {
|
||||
if (this.dataKey)
|
||||
return this.d_expandedRowKeys ? this.d_expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
|
||||
else
|
||||
return this.findIndex(rowData, this.expandedRows) > -1;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
isRowGroupExpanded(rowData) {
|
||||
if (this.expandableRowGroups && this.expandedRowGroups) {
|
||||
let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
|
||||
return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
isSelected(rowData) {
|
||||
if (rowData && this.selection) {
|
||||
if (this.dataKey) {
|
||||
return this.d_selectionKeys ? this.d_selectionKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
|
||||
}
|
||||
else {
|
||||
if (this.selection instanceof Array)
|
||||
return this.findIndexInSelection(rowData) > -1;
|
||||
else
|
||||
return this.equals(rowData, this.selection);
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
findIndexInSelection(rowData) {
|
||||
return this.findIndex(rowData, this.selection);
|
||||
},
|
||||
findIndex(rowData, collection) {
|
||||
let index = -1;
|
||||
if (collection && collection.length) {
|
||||
for (let i = 0; i < collection.length; i++) {
|
||||
if (this.equals(rowData, collection[i])) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return index;
|
||||
},
|
||||
onRowGroupToggle(event, data) {
|
||||
this.$emit('rowgroup-toggle', {originalEvent: event, data: data});
|
||||
},
|
||||
onRowClick(event, rowData, rowIndex) {
|
||||
this.$emit('row-click', {originalEvent: event, data: rowData, index: rowIndex});
|
||||
},
|
||||
onRowTouchEnd(event) {
|
||||
this.$emit('row-touchend', event);
|
||||
},
|
||||
onRowKeyDown(event, rowData, rowIndex) {
|
||||
this.$emit('row-keydown', {originalEvent: event, data: rowData, index: rowIndex});
|
||||
},
|
||||
onRowMouseDown(event) {
|
||||
this.$emit('row-mousedown', event);
|
||||
},
|
||||
onRowDragStart(event, rowIndex) {
|
||||
this.$emit('row-dragstart', {originalEvent: event, index: rowIndex});
|
||||
},
|
||||
onRowDragOver(event, rowIndex) {
|
||||
this.$emit('row-dragover', {originalEvent: event, index: rowIndex});
|
||||
},
|
||||
onRowDragLeave(event) {
|
||||
this.$emit('row-dragleave', event);
|
||||
},
|
||||
onRowDragEnd(event) {
|
||||
this.$emit('row-dragend', event);
|
||||
},
|
||||
onRowDrop(event) {
|
||||
this.$emit('row-drop', event);
|
||||
},
|
||||
onRowToggle(event) {
|
||||
this.$emit('row-toggle', event);
|
||||
},
|
||||
onRadioChange(event) {
|
||||
this.$emit('radio-change', event);
|
||||
},
|
||||
onCheckboxChange(event) {
|
||||
this.$emit('checkbox-change', event);
|
||||
},
|
||||
onCellEditInit(event) {
|
||||
this.$emit('cell-edit-init', event);
|
||||
},
|
||||
onCellEditComplete(event) {
|
||||
this.$emit('cell-edit-complete', event);
|
||||
},
|
||||
onCellEditCancel(event) {
|
||||
this.$emit('cell-edit-cancel', event);
|
||||
},
|
||||
onRowEditInit(event) {
|
||||
this.$emit('row-edit-init', event);
|
||||
},
|
||||
onRowEditSave(event) {
|
||||
this.$emit('row-edit-save', event);
|
||||
},
|
||||
onRowEditCancel(event) {
|
||||
this.$emit('row-edit-cancel', event);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
components: {
|
||||
'DTBodyCell': BodyCell
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -50,7 +50,7 @@ export default {
|
|||
}
|
||||
|
||||
return hasFooter;
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'DTColumnSlot': ColumnSlot
|
||||
|
|
|
|||
Loading…
Reference in New Issue