Skip to content

Commit 26c2ba9

Browse files
author
syshex
committed
* Fix to Sorting
* Added Multicolumn Sorting * Fix dynamic adding rows with update to interface * Ajax with multicolumn sorting
1 parent 0181381 commit 26c2ba9

11 files changed

+202
-83
lines changed

‎CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# Changelog
22

3+
## 1.1.2 (June 2, 2017)
4+
5+
* Fix to Sorting
6+
* Added Multicolumn Sorting
7+
* Fix dynamic adding rows with update to interface
8+
* Ajax with multicolumn sorting
9+
310
## 1.1.1 (June 1, 2017)
411

512
* Added more Events

‎README.md

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
vue-bootstrap-table is a sortable and searchable table, with Bootstrap styling, for Vue.js.
44

5-
### VUE 2 : 1.1.1
5+
### VUE 2 : 1.1.2
66

77
### Vue 1 : [jbaysolutions/vue-bootstrap-table](https://github.com/jbaysolutions/vue-bootstrap-table)
88

@@ -34,6 +34,7 @@ TODO UPDATE CHANGELOG
3434
## Features
3535

3636
* Sortable
37+
* Multicolumn Sorting
3738
* Searchable
3839
* Select display columns
3940
* Pagination
@@ -124,6 +125,7 @@ Or add the js script to your html (download from [releases](https://github.com/j
124125
:show-column-picker="true"
125126
:sortable="true"
126127
:paginated="true"
128+
:multi-column-sortable=true
127129
>
128130
</vue-bootstrap-table>
129131
````
@@ -155,6 +157,15 @@ Or add the js script to your html (download from [releases](https://github.com/j
155157
required: false,
156158
default: true,
157159
},
160+
/**
161+
* Enable/disable table multicolumn sorting, optional, default false.
162+
* Also sortable must be enabled for this function to work.
163+
*/
164+
multiColumnSortable: {
165+
type: Boolean,
166+
required: false,
167+
default: false,
168+
},
158169
/**
159170
* Enable/disable input filter, optional, default false
160171
*/
@@ -279,13 +290,27 @@ ajax: {
279290

280291
When Ajax is enabled, the following parameters are sent with each request for the URL specified:
281292

282-
- `sortcol` : The name of the column to sort by (only sent when `delegate` is true, otherwise will be null)
283-
- `sortdir` : The sorting direction "ASC" or "DESC" (only sent when `delegate` is true, otherwise will be null)
293+
- `sortcol` : Array of String columns to sort (only sent when `delegate` is true, otherwise will be null)
294+
- `sortdir` : Array of sorting directions for each column on sortcol, "ASC" or "DESC" (only sent when `delegate` is true, otherwise will be null)
284295
- `filter` : The filter to be used (only sent when `delegate` is true, otherwise will be null)
285296
- `page` : The number of the page being requested ( when delegate is false, it will always be 1 )
286297
- `pagesize` : The number of records being requested.
287298
- `echo` : A unique number for the request.
288299

300+
##### When using GET
301+
302+
- `sortcol` : is sent in the following format `sortcol[]=COLNAME&sortcol[]=COLNAME`
303+
- `sortdir` : is sent in the following format `sortdir[]=ASC&sortdir[]=DESC`
304+
305+
This is performed automatically by AXIOS
306+
307+
##### When using POST
308+
309+
- `sortcol` : is sent in the following format `sortcol[0]=COLNAME ; sortcol[1]=COLNAME; `
310+
- `sortdir` : is sent in the following format `sortdir[0]=ASC ; sortdir[1]=DESC`
311+
312+
This is performed automatically by AXIOS
313+
289314
#### Ajax Expected Response
290315

291316
For all requests, vue-bootstrap-table expects an object of the following type:
@@ -363,6 +388,7 @@ If you have a feature request, please add it as an issue or make a pull request.
363388

364389
- [x] Basic table
365390
- [x] Sorting
391+
- [x] Multicolumn Sorting
366392
- [x] Filter
367393
- [x] Column picker
368394
- [x] Pagination
@@ -375,6 +401,13 @@ If you have a feature request, please add it as an issue or make a pull request.
375401

376402
## Changelog
377403

404+
### 1.1.2
405+
406+
* Fix to Sorting
407+
* Added Multicolumn Sorting
408+
* Fix dynamic adding rows with update to interface
409+
* Ajax with multicolumn sorting
410+
378411
### 1.1.1
379412

380413
* Added more Events

‎dist/vue-bootstrap-table.js

Lines changed: 76 additions & 34 deletions
Large diffs are not rendered by default.

‎dist/vue-bootstrap-table.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-bootstrap-table.min.js

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/01-basic.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ <h1>Vue Bootstrap Table Demo</h1>
2525
:show-filter="showFilter"
2626
:show-column-picker="showPicker"
2727
:paginated="paginated"
28+
:multi-column-sortable="multiColumnSortable"
2829
:ajax="ajax"
2930
>
3031
</vue-bootstrap-table>

‎examples/01-basic.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ new Vue({
1111
showFilter: true,
1212
showPicker: true,
1313
paginated: true,
14+
multiColumnSortable: true,
1415
ajax: {
1516
enabled: false,
1617
url: "http://localhost:9430/data/test",

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ <h1>Vue Bootstrap Table</h1>
2525
:show-filter="showFilter"
2626
:show-column-picker="showPicker"
2727
:paginated="paginated"
28+
:multi-column-sortable="multiColumnSortable"
2829
:ajax="ajax"
2930
>
3031
</vue-bootstrap-table>

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{
22
"name": "vue2-bootstrap-table2",
3-
"version": "1.1.1",
3+
"version": "1.1.2",
44
"description": "A sortable and searchable vue table, as a Vue component, using bootstrap styling.",
55
"keywords": [
66
"table",
77
"vuejs",
88
"sort",
99
"sortable",
10+
"multicolumn",
1011
"search",
1112
"searchable",
1213
"filter",

‎src/VueBootstrapTable.vue

Lines changed: 60 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<table class="table table-bordered table-hover table-condensed table-striped vue-table">
3838
<thead>
3939
<tr>
40-
<th v-for="column in displayColsVisible" @click="sortBy(column.name)"
40+
<th v-for="column in displayColsVisible" @click="sortBy($event, column.name)"
4141
track-by="column"
4242
:class="getClasses(column.name)">
4343
{{ column.title }}
@@ -248,6 +248,15 @@
248248
required: false,
249249
default: true,
250250
},
251+
/**
252+
* Enable/disable table multicolumn sorting, optional, default false.
253+
* Also sortable must be enabled for this function to work.
254+
*/
255+
multiColumnSortable: {
256+
type: Boolean,
257+
required: false,
258+
default: false,
259+
},
251260
/**
252261
* Enable/disable input filter, optional, default false
253262
*/
@@ -300,9 +309,9 @@
300309
return {
301310
filteredSize: 0,
302311
filterKey: "",
303-
sortKey: "",
304-
sortDir: "",
312+
sortKey: [],
305313
sortOrders: {},
314+
sortChanged: 1,
306315
columnMenuOpen: false,
307316
displayCols: [],
308317
filteredValues: [],
@@ -343,6 +352,7 @@
343352
},
344353
watch: {
345354
values: function () {
355+
this.processFilter();
346356
},
347357
columns: function () {
348358
this.displayCols = [];
@@ -371,7 +381,7 @@
371381
sortKey: function () {
372382
this.processFilter();
373383
},
374-
sortDir: function () {
384+
sortChanged: function () {
375385
this.processFilter();
376386
},
377387
page: function () {
@@ -395,8 +405,11 @@
395405
return displayColsVisible;
396406
},
397407
filteredValuesSorted: function () {
398-
// orderBy sortKey sortOrders[sortKey]
399-
return _.orderBy(this.filteredValues, this.sortKey , this.sortDir.toLowerCase());
408+
var tColsDir = [];
409+
for(var i=0, len=this.sortKey.length; i < len; i++){
410+
tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());
411+
}
412+
return _.orderBy(this.filteredValues, this.sortKey , tColsDir);
400413
},
401414
validPageNumbers: function () {
402415
// 5 page max
@@ -444,7 +457,12 @@
444457
return good;
445458
});
446459
447-
result = _.orderBy(result, this.sortKey, this.sortDir.toLowerCase());
460+
var tColsDir = [];
461+
for(var i=0, len=this.sortKey.length; i < len; i++){
462+
tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());
463+
}
464+
465+
result = _.orderBy(result, this.sortKey, tColsDir);
448466
449467
this.filteredSize = result.length;
450468
if (this.paginated) {
@@ -465,13 +483,17 @@
465483
fetchData: function ( dataCallBackFunction ) {
466484
var self = this;
467485
var ajaxParameters = {
468-
486+
params: {}
469487
};
470488
this.echo++;
471489
if (this.ajax.enabled && this.ajax.delegate) {
490+
var tColsDir = [];
491+
for(var i=0, len=this.sortKey.length; i < len; i++){
492+
tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());
493+
}
472494
if ( this.ajax.method=== "GET" ) {
473495
ajaxParameters.params.sortcol = this.sortKey;
474-
ajaxParameters.params.sortdir = this.sortDir;
496+
ajaxParameters.params.sortdir = tColsDir;
475497
ajaxParameters.params.filter = this.filterKey;
476498
if (self.paginated ) {
477499
ajaxParameters.params.page = this.page;
@@ -484,7 +506,7 @@
484506
}
485507
if ( this.ajax.method=== "POST" ) {
486508
ajaxParameters.sortcol = this.sortKey;
487-
ajaxParameters.sortdir = this.sortDir;
509+
ajaxParameters.sortdir = tColsDir;
488510
ajaxParameters.filter = this.filterKey;
489511
if (self.paginated ) {
490512
ajaxParameters.page = this.page;
@@ -540,45 +562,55 @@
540562
return obj;
541563
},
542564
setSortOrders: function () {
543-
this.sortKey = "";
565+
this.sortKey = [];
544566
var sortOrders = {};
545567
this.columns.forEach(function (column) {
546-
sortOrders[column.name] = 0;
568+
sortOrders[column.name] = "";
547569
});
548570
this.sortOrders = sortOrders;
549571
550572
},
551-
sortBy: function (key) {
573+
sortBy: function (event, key) {
552574
if (this.sortable) {
553575
var self = this;
554-
this.sortKey = key;
555-
this.columns.forEach(function (column) {
556-
if (column.name !== key) {
557-
self.sortOrders[column.name] = 0;
576+
577+
if (!this.multiColumnSortable || ( this.multiColumnSortable && !event.shiftKey)) {
578+
this.sortKey = [key];
579+
this.columns.forEach(function (column) {
580+
if (column.name !== key) {
581+
self.sortOrders[column.name] = "";
582+
}
583+
});
584+
} else {
585+
if (_.findIndex(this.sortKey, function(o) { return o === key; }) === -1) {
586+
this.sortKey.push(key);
558587
}
559-
});
560-
if (this.sortOrders[key] === 0) {
561-
this.sortOrders[key] = 1;
588+
}
589+
if (this.sortOrders[key] === "") {
590+
this.sortOrders[key] = "ASC";
591+
} else if (this.sortOrders[key] === "ASC") {
592+
this.sortOrders[key] = "DESC";
562593
} else {
563-
this.sortOrders[key] = this.sortOrders[key] * -1;
594+
this.sortOrders[key] = "ASC";
564595
}
565596
566-
if (this.sortOrders[key] === 1)
567-
this.sortDir = "ASC";
568-
if (this.sortOrders[key] === -1)
569-
this.sortDir = "DESC";
597+
this.sortChanged = this.sortChanged * -1;
570598
}
571599
},
572600
getClasses: function (key) {
573601
var classes = [];
574602
if (this.sortable) {
575603
classes.push("arrow");
576-
if (this.sortKey === key) {
604+
/*if (this.sortKey === key) {
605+
classes.push("active");
606+
}*/
607+
if (_.findIndex(this.sortKey, function(o) { return o === key; }) !== -1) {
577608
classes.push("active");
578609
}
579-
if (this.sortOrders[key] === 1) {
610+
611+
if (this.sortOrders[key] === "ASC") {
580612
classes.push("asc");
581-
} else if (this.sortOrders[key] === -1) {
613+
} else if (this.sortOrders[key] === "DESC") {
582614
classes.push("dsc");
583615
}
584616
}

0 commit comments

Comments
 (0)