#235 for TreeTable

pull/310/head
cagataycivici 2020-04-18 19:14:26 +03:00
parent 8eb7a75981
commit 45d62fdbae
3 changed files with 47 additions and 25 deletions

View File

@ -26,6 +26,7 @@ export declare class TreeTable extends Vue {
defaultSortOrder?: number;
multiSortMeta?: any[];
sortMode?: string;
removableSort?: string;
filters?: {
[s: string]: any;
};

View File

@ -188,6 +188,10 @@ export default {
type: String,
default: 'single'
},
removableSort: {
type: Boolean,
default: false
},
filters: {
type: Object,
default: null
@ -417,29 +421,40 @@ export default {
},
onColumnHeaderClick(event, column) {
if (column.sortable) {
this.resetPage();
const targetNode = event.target;
const columnField = column.sortField || column.field;
if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
|| DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
DomHandler.clearSelection();
const columnField = column.field || column.sortField;
this.d_sortOrder = (this.d_sortField === columnField) ? this.d_sortOrder * -1 : this.defaultSortOrder;
this.d_sortField = columnField;
if(this.sortMode === 'multiple') {
let metaKey = event.metaKey || event.ctrlKey;
if (!metaKey) {
this.d_multiSortMeta = [];
if (this.sortMode === 'single') {
if (this.d_sortField === columnField) {
if (this.removableSort && (this.d_sortOrder * -1 === this.defaultSortOrder)) {
this.d_sortOrder = null;
this.d_sortField = null;
}
else {
this.d_sortOrder = this.d_sortOrder * -1
}
}
else {
this.d_sortOrder = this.defaultSortOrder;
this.d_sortField = columnField;
}
this.addSortMeta({field: this.d_sortField, order: this.d_sortOrder});
this.$emit('update:sortField', this.d_sortField);
this.$emit('update:sortOrder', this.d_sortOrder);
}
else if (this.sortMode === 'multiple') {
let metaKey = event.metaKey || event.ctrlKey;
if (!metaKey) {
this.d_multiSortMeta = this.d_multiSortMeta.filter(meta => meta.field === columnField);
}
this.$emit('update:sortField', this.d_sortFied);
this.$emit('update:sortOrder', this.d_sortOrder);
this.$emit('update:multiSortMeta', this.d_multiSortMeta);
this.addMultiSortField(columnField);
this.$emit('update:multiSortMeta', this.d_multiSortMeta);
}
this.$emit('sort', {
originalEvent: event,
@ -447,22 +462,22 @@ export default {
sortOrder: this.d_sortOrder,
multiSortMeta: this.d_multiSortMeta
});
this.resetPage();
}
}
},
addSortMeta(meta) {
let index = -1;
for (let i = 0; i < this.d_multiSortMeta.length; i++) {
if (this.d_multiSortMeta[i].field === meta.field) {
index = i;
break;
}
}
addMultiSortField(field) {
let index = this.d_multiSortMeta.findIndex(meta => meta.field === field);
if(index >= 0)
this.d_multiSortMeta[index] = meta;
else
this.d_multiSortMeta.push(meta);
if (index >= 0) {
if (this.removableSort && (this.d_multiSortMeta[index].order * -1 === this.defaultSortOrder))
this.d_multiSortMeta.splice(index, 1);
else
this.d_multiSortMeta[index] = {field: field, order: this.d_multiSortMeta[index].order * -1};
}
else {
this.d_multiSortMeta.push({field: field, order: this.defaultSortOrder});
}
this.d_multiSortMeta = [...this.d_multiSortMeta];
},

View File

@ -1393,6 +1393,12 @@ export default {
<td>single</td>
<td>Defines whether sorting works on single column or on multiple columns.</td>
</tr>
<tr>
<td>removableSort</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, columns can have an un-sorted state.</td>
</tr>
<tr>
<td>filters</td>
<td>object</td>