#235 for TreeTable
parent
8eb7a75981
commit
45d62fdbae
|
@ -26,6 +26,7 @@ export declare class TreeTable extends Vue {
|
|||
defaultSortOrder?: number;
|
||||
multiSortMeta?: any[];
|
||||
sortMode?: string;
|
||||
removableSort?: string;
|
||||
filters?: {
|
||||
[s: string]: any;
|
||||
};
|
||||
|
|
|
@ -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];
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue