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

Fixed #235 - Removable sort on DataTable

pull/310/head
cagataycivici 2020-04-18 17:41:50 +03:00
parent de5ba8a0c9
commit af0bf6f0d0
4 changed files with 62 additions and 25 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

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

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

@ -222,6 +222,10 @@ export default {
type: String,
default: 'single'
},
removableSort: {
type: Boolean,
default: false
},
filters: {
type: Object,
default: null
@ -475,24 +479,35 @@ export default {
|| DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
DomHandler.clearSelection();
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.addMultiSortField(columnField);
this.$emit('update:multiSortMeta', this.d_multiSortMeta);
}
this.$emit('update:sortField', this.d_sortField);
this.$emit('update:sortOrder', this.d_sortOrder);
this.$emit('update:multiSortMeta', this.d_multiSortMeta);
this.$emit('sort', this.createLazyLoadEvent(event));
this.resetPage();
}
}
@ -551,19 +566,18 @@ export default {
return (this.d_multiSortMeta[index].order * result);
},
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, metaKey) {
let index = this.d_multiSortMeta.findIndex(meta => meta.field === field);
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});
}
if(index >= 0)
this.d_multiSortMeta[index] = meta;
else
this.d_multiSortMeta.push(meta);
this.d_multiSortMeta = [...this.d_multiSortMeta];
},

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

@ -1819,6 +1819,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>

16
src/views/datatable/DataTableSortDemo.vue
View File

@ -33,6 +33,14 @@
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
<h3>Removable Sort</h3>
<DataTable :value="cars" removableSort>
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
</div>
<div class="content-section documentation">
@ -63,6 +71,14 @@
&lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;h3&gt;Removable Sort&lt;/h3&gt;
&lt;DataTable :value="cars" removableSort&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</CodeHighlight>