Skip to content

Commit

Permalink
* Fix to Sorting
Browse files Browse the repository at this point in the history 
* Added Multicolumn Sorting
* Fix dynamic adding rows with update to interface
* Ajax with multicolumn sorting
  • Loading branch information
syshex committed Jun 2, 2017
1 parent 0181381 commit 26c2ba9
Show file tree
Hide file tree
Showing 11 changed files with 202 additions and 83 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# Changelog

## 1.1.2 (June 2, 2017)

* Fix to Sorting
* Added Multicolumn Sorting
* Fix dynamic adding rows with update to interface
* Ajax with multicolumn sorting

## 1.1.1 (June 1, 2017)

* Added more Events
Expand Down
39 changes: 36 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

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

### VUE 2 : 1.1.1
### VUE 2 : 1.1.2

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

Expand Down Expand Up @@ -34,6 +34,7 @@ TODO UPDATE CHANGELOG
## Features

* Sortable
* Multicolumn Sorting
* Searchable
* Select display columns
* Pagination
Expand Down Expand Up @@ -124,6 +125,7 @@ Or add the js script to your html (download from [releases](https://github.com/j
:show-column-picker="true"
:sortable="true"
:paginated="true"
:multi-column-sortable=true
>
</vue-bootstrap-table>
````
Expand Down Expand Up @@ -155,6 +157,15 @@ Or add the js script to your html (download from [releases](https://github.com/j
required: false,
default: true,
},
/**
* Enable/disable table multicolumn sorting, optional, default false.
* Also sortable must be enabled for this function to work.
*/
multiColumnSortable: {
type: Boolean,
required: false,
default: false,
},
/**
* Enable/disable input filter, optional, default false
*/
Expand Down Expand Up @@ -279,13 +290,27 @@ ajax: {

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

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

##### When using GET

- `sortcol` : is sent in the following format `sortcol[]=COLNAME&sortcol[]=COLNAME`
- `sortdir` : is sent in the following format `sortdir[]=ASC&sortdir[]=DESC`

This is performed automatically by AXIOS

##### When using POST

- `sortcol` : is sent in the following format `sortcol[0]=COLNAME ; sortcol[1]=COLNAME; `
- `sortdir` : is sent in the following format `sortdir[0]=ASC ; sortdir[1]=DESC`

This is performed automatically by AXIOS

#### Ajax Expected Response

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

- [x] Basic table
- [x] Sorting
- [x] Multicolumn Sorting
- [x] Filter
- [x] Column picker
- [x] Pagination
Expand All @@ -375,6 +401,13 @@ If you have a feature request, please add it as an issue or make a pull request.

## Changelog

### 1.1.2

* Fix to Sorting
* Added Multicolumn Sorting
* Fix dynamic adding rows with update to interface
* Ajax with multicolumn sorting

### 1.1.1

* Added more Events
Expand Down
110 changes: 76 additions & 34 deletions dist/vue-bootstrap-table.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/vue-bootstrap-table.js.map
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions dist/vue-bootstrap-table.min.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions examples/01-basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ <h1>Vue Bootstrap Table Demo</h1>
:show-filter="showFilter"
:show-column-picker="showPicker"
:paginated="paginated"
:multi-column-sortable="multiColumnSortable"
:ajax="ajax"
>
</vue-bootstrap-table>
Expand Down
1 change: 1 addition & 0 deletions examples/01-basic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ new Vue({
showFilter: true,
showPicker: true,
paginated: true,
multiColumnSortable: true,
ajax: {
enabled: false,
url: "http://localhost:9430/data/test",
Expand Down
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ <h1>Vue Bootstrap Table</h1>
:show-filter="showFilter"
:show-column-picker="showPicker"
:paginated="paginated"
:multi-column-sortable="multiColumnSortable"
:ajax="ajax"
>
</vue-bootstrap-table>
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
{
"name": "vue2-bootstrap-table2",
"version": "1.1.1",
"version": "1.1.2",
"description": "A sortable and searchable vue table, as a Vue component, using bootstrap styling.",
"keywords": [
"table",
"vuejs",
"sort",
"sortable",
"multicolumn",
"search",
"searchable",
"filter",
Expand Down
88 changes: 60 additions & 28 deletions src/VueBootstrapTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<table class="table table-bordered table-hover table-condensed table-striped vue-table">
<thead>
<tr>
<th v-for="column in displayColsVisible" @click="sortBy(column.name)"
<th v-for="column in displayColsVisible" @click="sortBy($event, column.name)"
track-by="column"
:class="getClasses(column.name)">
{{ column.title }}
Expand Down Expand Up @@ -248,6 +248,15 @@
required: false,
default: true,
},
/**
* Enable/disable table multicolumn sorting, optional, default false.
* Also sortable must be enabled for this function to work.
*/
multiColumnSortable: {
type: Boolean,
required: false,
default: false,
},
/**
* Enable/disable input filter, optional, default false
*/
Expand Down Expand Up @@ -300,9 +309,9 @@
return {
filteredSize: 0,
filterKey: "",
sortKey: "",
sortDir: "",
sortKey: [],
sortOrders: {},
sortChanged: 1,
columnMenuOpen: false,
displayCols: [],
filteredValues: [],
Expand Down Expand Up @@ -343,6 +352,7 @@
},
watch: {
values: function () {
this.processFilter();
},
columns: function () {
this.displayCols = [];
Expand Down Expand Up @@ -371,7 +381,7 @@
sortKey: function () {
this.processFilter();
},
sortDir: function () {
sortChanged: function () {
this.processFilter();
},
page: function () {
Expand All @@ -395,8 +405,11 @@
return displayColsVisible;
},
filteredValuesSorted: function () {
// orderBy sortKey sortOrders[sortKey]
return _.orderBy(this.filteredValues, this.sortKey , this.sortDir.toLowerCase());
var tColsDir = [];
for(var i=0, len=this.sortKey.length; i < len; i++){
tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());
}
return _.orderBy(this.filteredValues, this.sortKey , tColsDir);
},
validPageNumbers: function () {
// 5 page max
Expand Down Expand Up @@ -444,7 +457,12 @@
return good;
});
result = _.orderBy(result, this.sortKey, this.sortDir.toLowerCase());
var tColsDir = [];
for(var i=0, len=this.sortKey.length; i < len; i++){
tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());
}
result = _.orderBy(result, this.sortKey, tColsDir);
this.filteredSize = result.length;
if (this.paginated) {
Expand All @@ -465,13 +483,17 @@
fetchData: function ( dataCallBackFunction ) {
var self = this;
var ajaxParameters = {
params: {}
};
this.echo++;
if (this.ajax.enabled && this.ajax.delegate) {
var tColsDir = [];
for(var i=0, len=this.sortKey.length; i < len; i++){
tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());
}
if ( this.ajax.method=== "GET" ) {
ajaxParameters.params.sortcol = this.sortKey;
ajaxParameters.params.sortdir = this.sortDir;
ajaxParameters.params.sortdir = tColsDir;
ajaxParameters.params.filter = this.filterKey;
if (self.paginated ) {
ajaxParameters.params.page = this.page;
Expand All @@ -484,7 +506,7 @@
}
if ( this.ajax.method=== "POST" ) {
ajaxParameters.sortcol = this.sortKey;
ajaxParameters.sortdir = this.sortDir;
ajaxParameters.sortdir = tColsDir;
ajaxParameters.filter = this.filterKey;
if (self.paginated ) {
ajaxParameters.page = this.page;
Expand Down Expand Up @@ -540,45 +562,55 @@
return obj;
},
setSortOrders: function () {
this.sortKey = "";
this.sortKey = [];
var sortOrders = {};
this.columns.forEach(function (column) {
sortOrders[column.name] = 0;
sortOrders[column.name] = "";
});
this.sortOrders = sortOrders;
},
sortBy: function (key) {
sortBy: function (event, key) {
if (this.sortable) {
var self = this;
this.sortKey = key;
this.columns.forEach(function (column) {
if (column.name !== key) {
self.sortOrders[column.name] = 0;
if (!this.multiColumnSortable || ( this.multiColumnSortable && !event.shiftKey)) {
this.sortKey = [key];
this.columns.forEach(function (column) {
if (column.name !== key) {
self.sortOrders[column.name] = "";
}
});
} else {
if (_.findIndex(this.sortKey, function(o) { return o === key; }) === -1) {
this.sortKey.push(key);
}
});
if (this.sortOrders[key] === 0) {
this.sortOrders[key] = 1;
}
if (this.sortOrders[key] === "") {
this.sortOrders[key] = "ASC";
} else if (this.sortOrders[key] === "ASC") {
this.sortOrders[key] = "DESC";
} else {
this.sortOrders[key] = this.sortOrders[key] * -1;
this.sortOrders[key] = "ASC";
}
if (this.sortOrders[key] === 1)
this.sortDir = "ASC";
if (this.sortOrders[key] === -1)
this.sortDir = "DESC";
this.sortChanged = this.sortChanged * -1;
}
},
getClasses: function (key) {
var classes = [];
if (this.sortable) {
classes.push("arrow");
if (this.sortKey === key) {
/*if (this.sortKey === key) {
classes.push("active");
}*/
if (_.findIndex(this.sortKey, function(o) { return o === key; }) !== -1) {
classes.push("active");
}
if (this.sortOrders[key] === 1) {
if (this.sortOrders[key] === "ASC") {
classes.push("asc");
} else if (this.sortOrders[key] === -1) {
} else if (this.sortOrders[key] === "DESC") {
classes.push("dsc");
}
}
Expand Down
23 changes: 12 additions & 11 deletions src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ new Vue({
showFilter: true,
showPicker: true,
paginated: true,
multiColumnSortable: true,
ajax: {
enabled: false,
enabled: true,
url: "http://localhost:9430/data/test",
method: "POST",
delegate: true,
Expand All @@ -34,43 +35,43 @@ new Vue({
"title": "john",
},
{
"id": 2,
"id": 1,
"title": "mary",
},
{
"id": 3,
"id": 1,
"title": "jack",
},
{
"id": 4,
"id": 1,
"title": "joe",
},
{
"id": 5,
"id": 2,
"title": "ana",
},
{
"id": 6,
"id": 2,
"title": "rita",
},
{
"id": 7,
"id": 2,
"title": "mario",
},
{
"id": 8,
"id": 2,
"title": "luigi",
},
{
"id": 9,
"id": 2,
"title": "mickey",
},
{
"id": 10,
"id": 3,
"title": "donald",
},
{
"id": 11,
"id": 3,
"title": "juliet",
}

Expand Down

0 comments on commit 26c2ba9

Please sign in to comment.