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 e83daa0 commit 9b01315
Show file tree
Hide file tree
Showing 11 changed files with 17,396 additions and 111 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 1 : 1.1.1
### VUE 1 : 1.1.2

### Vue 2 : [jbaysolutions/vue2-bootstrap-table](https://github.com/jbaysolutions/vue2-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 @@ -123,6 +124,7 @@ Or add the js script to your html (download from [releases](https://github.com/j
:show-filter="true"
:show-column-picker="true"
:sortable="true"
:multi-column-sortable=true
:paginated="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 @@ -360,6 +385,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 @@ -372,6 +398,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
17,293 changes: 17,233 additions & 60 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.

8 changes: 5 additions & 3 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"
>
</vue-bootstrap-table>
</div>
Expand Down
16 changes: 13 additions & 3 deletions examples/01-basic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,34 @@ new Vue({
showFilter: true,
showPicker: true,
paginated: true,
multiColumnSortable: true,
ajax: {
enabled: false,
url: "http://localhost:9430/data/test",
method: "POST",
delegate: true,
},
columns: [
{
title:"id",
visible: true,
editable: false,
},
{
title:"name",
title:"Name",
name: "name",
visible: true,
editable: true,
},
{
title:"age",
title:"Age",
name:"age",
visible: true,
editable: true,
},
{
title:"country",
title:"Country",
name:"country",
visible: true,
editable: true,
}
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
Expand Up @@ -27,7 +27,8 @@
"dependencies": {
"babel-runtime": "^6.0.0",
"axios": "^0.16.1",
"qs": "^6.0.0"
"qs": "^6.0.0",
"lodash": "^4.17.4"
},
"devDependencies": {
"babel-cli": "^6.5.1",
Expand Down
116 changes: 86 additions & 30 deletions src/VueBootstrapTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,18 @@
<table class="table table-bordered table-hover table-condensed table-striped vue-table">
<thead>
<tr>
<th v-for="column in displayCols | filterBy true in 'visible'" @click="sortBy(column.name)"
<th v-for="column in displayColsVisible" @click="sortBy($event, column.name)"
track-by="$index"
:class="getClasses(column.name)">
{{ column.title }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="entry in filteredValues | orderBy sortKey sortOrders[sortKey]" track-by="$index">
<td v-for="column in displayCols | filterBy true in 'visible'" track-by="$index"
<tr v-for="entry in filteredValuesSorted " track-by="$index">
<td v-for="column in displayColsVisible" track-by="$index"
v-show="column.visible">

<span v-if="!column.editable"> {{ entry[column.name] }} </span>
<value-field-section v-else
:entry="entry"
Expand All @@ -65,7 +66,7 @@
<div class="btn-group" role="group" aria-label="pages">
<button v-for="index in validPageNumbers"
type="button" class="btn btn-default"
v-bind:class="{ active: this.page===index }"
:class="{ active: this.page===index }"
@click="this.page=index">
{{index}}
</button>
Expand Down Expand Up @@ -182,6 +183,8 @@
import axios from 'axios';
import qs from 'qs';
import lodash from 'lodash';
/* Field Section used for displaying and editing value of cell */
var valueFieldSection = {
Expand Down Expand Up @@ -246,6 +249,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 @@ -298,9 +310,9 @@
return {
filteredSize: 0,
filterKey: "",
sortKey: "",
sortDir: "",
sortKey: [],
sortOrders: {},
sortChanged: 1,
columnMenuOpen: false,
displayCols: [],
filteredValues: [],
Expand Down Expand Up @@ -360,7 +372,7 @@
sortKey: function () {
this.processFilter();
},
sortDir: function () {
sortChanged: function () {
this.processFilter();
},
page: function () {
Expand All @@ -375,6 +387,21 @@
}
},
computed: {
displayColsVisible: function () {
var displayColsVisible = [];
for (var a in this.displayCols) {
if (this.displayCols[a].visible)
displayColsVisible.push(this.displayCols[a]);
}
return displayColsVisible;
},
filteredValuesSorted: function () {
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
var result = [];
Expand Down Expand Up @@ -408,8 +435,23 @@
self.loading = false;
});
} else {
var result = this.$options.filters.filterBy(this.values, this.filterKey);
result = this.$options.filters.orderBy(result, this.sortKey, this.sortOrders[this.sortKey]);
var result = this.values.filter(item => {
var good = false;
for (var col in self.displayColsVisible) {
if ( _.includes(item[self.displayColsVisible[col].name]+"" , self.filterKey+"")){
good = true;
}
}
return good;
});
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) {
var startIndex = (this.page - 1) * this.pageSize;
Expand All @@ -429,13 +471,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 @@ -448,7 +494,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 @@ -504,45 +550,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
Loading

0 comments on commit 9b01315

Please sign in to comment.