From 9b013158b7c0acbdf4fc8b4f6549a1dba35169e6 Mon Sep 17 00:00:00 2001 From: syshex Date: Fri, 2 Jun 2017 11:04:20 +0100 Subject: [PATCH] * Fix to Sorting * Added Multicolumn Sorting * Fix dynamic adding rows with update to interface * Ajax with multicolumn sorting --- CHANGELOG.md | 7 + README.md | 39 +- dist/vue-bootstrap-table.js | 17293 +++++++++++++++++++++++++++++- dist/vue-bootstrap-table.js.map | 2 +- dist/vue-bootstrap-table.min.js | 8 +- examples/01-basic.html | 1 + examples/01-basic.js | 16 +- index.html | 1 + package.json | 3 +- src/VueBootstrapTable.vue | 116 +- src/app.js | 21 +- 11 files changed, 17396 insertions(+), 111 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6d0b3f8..d280983 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/README.md b/README.md index 31ad29f..9ed4947 100644 --- a/README.md +++ b/README.md @@ -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) @@ -34,6 +34,7 @@ TODO UPDATE CHANGELOG ## Features * Sortable +* Multicolumn Sorting * Searchable * Select display columns * Pagination @@ -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" > @@ -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 */ @@ -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: @@ -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 @@ -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 diff --git a/dist/vue-bootstrap-table.js b/dist/vue-bootstrap-table.js index c67e076..f779d59 100644 --- a/dist/vue-bootstrap-table.js +++ b/dist/vue-bootstrap-table.js @@ -74,7 +74,7 @@ return /******/ (function(modules) { // webpackBootstrap __vue_script__ = __webpack_require__(6) if (Object.keys(__vue_script__).some(function (key) { return key !== "default" && key !== "__esModule" })) { console.warn("[vue-loader] src/VueBootstrapTable.vue: named exports in *.vue files are ignored.")} - __vue_template__ = __webpack_require__(42) + __vue_template__ = __webpack_require__(44) module.exports = __vue_script__ || {} if (module.exports.__esModule) module.exports = module.exports.default var __vue_options__ = typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports @@ -133,7 +133,7 @@ return /******/ (function(modules) { // webpackBootstrap // module - exports.push([module.id, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n .vue-table {\n\n }\n\n /*#maindiv {\n content: \" \";\n box-sizing: border-box;\n display:\n table; width: 100%;\n }\n*/\n .spinner {\n border: 16px solid #f3f3f3; /* Light grey */\n border-top: 16px solid #3498db; /* Blue */\n border-radius: 50%;\n width: 120px;\n height: 120px;\n -webkit-animation: spin 2s linear infinite;\n animation: spin 2s linear infinite;\n position: absolute;\n left: 50%;\n top: 50%;\n margin: -60px 0 0 -60px;\n }\n\n @-webkit-keyframes spin {\n 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\n }\n\n @keyframes spin {\n 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\n }\n\n\n .vue-table-loading{\n position: absolute;\n z-index: 99;\n background-color: #ddd;\n opacity: 0.5;\n width: 100%;\n height: 100%;\n }\n\n .vue-table-loading-hidden {\n display: none;\n }\n\n table.vue-table thead > tr > th {\n cursor: pointer;\n padding-right: 30px !important;\n }\n\n /*.vue-table th.active {\n color: red;\n }*/\n\n .vue-table .arrow {\n opacity: 1;\n position: relative;\n }\n\n .vue-table .arrow:after {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: block;\n font-family: 'Glyphicons Halflings';\n content: \"\\E150\";\n /*\n display: inline-block;\n vertical-align: middle;\n width: 0;\n height: 0;\n margin-left: 5px;\n opacity: 0.66;*/\n }\n\n .vue-table .arrow.asc:after {\n content: \"\\E155\";\n /*\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 4px solid #000;\n */\n }\n\n .vue-table .arrow.dsc:after {\n content: \"\\E156\";\n }\n\n\n .vue-table .editableField {\n cursor:pointer;\n }\n\n /*.vue-table .selected-cell {\n background-color: #F7C072;\n }\n\n .vue-table .selected-row {\n background-color: #FAE1BE !important;\n }*/\n", "", {"version":3,"sources":["/./src/VueBootstrapTable.vue?40e910cc"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkFA;;KAEA;;IAEA;;;;;;EAMA;IACA;QACA,2BAAA,CAAA,gBAAA;QACA,+BAAA,CAAA,UAAA;QACA,mBAAA;QACA,aAAA;QACA,cAAA;QACA,2CAAA;gBAAA,mCAAA;QACA,mBAAA;QACA,UAAA;QACA,SAAA;QACA,wBAAA;KACA;;IAEA;QACA,KAAA,gCAAA,CAAA,wBAAA,EAAA;QACA,OAAA,kCAAA,CAAA,0BAAA,EAAA;KACA;;IAHA;QACA,KAAA,gCAAA,CAAA,wBAAA,EAAA;QACA,OAAA,kCAAA,CAAA,0BAAA,EAAA;KACA;;;IAGA;QACA,mBAAA;QACA,YAAA;QACA,uBAAA;QACA,aAAA;QACA,YAAA;QACA,aAAA;KACA;;IAEA;QACA,cAAA;KACA;;IAEA;QACA,gBAAA;QACA,+BAAA;KACA;;IAEA;;OAEA;;IAEA;QACA,WAAA;QACA,mBAAA;KACA;;IAEA;QACA,mBAAA;QACA,YAAA;QACA,WAAA;QACA,eAAA;QACA,oCAAA;QACA,iBAAA;QACA;;;;;;wBAMA;KACA;;IAEA;QACA,iBAAA;QACA;;;;UAIA;KACA;;IAEA;QACA,iBAAA;KACA;;;IAGA;QACA,eAAA;KACA;;IAEA;;;;;;OAMA","file":"VueBootstrapTable.vue","sourcesContent":["\n\n"],"sourceRoot":"webpack://"}]); + exports.push([module.id, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n .vue-table {\n\n }\n\n /*#maindiv {\n content: \" \";\n box-sizing: border-box;\n display:\n table; width: 100%;\n }\n*/\n .spinner {\n border: 16px solid #f3f3f3; /* Light grey */\n border-top: 16px solid #3498db; /* Blue */\n border-radius: 50%;\n width: 120px;\n height: 120px;\n -webkit-animation: spin 2s linear infinite;\n animation: spin 2s linear infinite;\n position: absolute;\n left: 50%;\n top: 50%;\n margin: -60px 0 0 -60px;\n }\n\n @-webkit-keyframes spin {\n 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\n }\n\n @keyframes spin {\n 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\n }\n\n\n .vue-table-loading{\n position: absolute;\n z-index: 99;\n background-color: #ddd;\n opacity: 0.5;\n width: 100%;\n height: 100%;\n }\n\n .vue-table-loading-hidden {\n display: none;\n }\n\n table.vue-table thead > tr > th {\n cursor: pointer;\n padding-right: 30px !important;\n }\n\n /*.vue-table th.active {\n color: red;\n }*/\n\n .vue-table .arrow {\n opacity: 1;\n position: relative;\n }\n\n .vue-table .arrow:after {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: block;\n font-family: 'Glyphicons Halflings';\n content: \"\\E150\";\n /*\n display: inline-block;\n vertical-align: middle;\n width: 0;\n height: 0;\n margin-left: 5px;\n opacity: 0.66;*/\n }\n\n .vue-table .arrow.asc:after {\n content: \"\\E155\";\n /*\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 4px solid #000;\n */\n }\n\n .vue-table .arrow.dsc:after {\n content: \"\\E156\";\n }\n\n\n .vue-table .editableField {\n cursor:pointer;\n }\n\n /*.vue-table .selected-cell {\n background-color: #F7C072;\n }\n\n .vue-table .selected-row {\n background-color: #FAE1BE !important;\n }*/\n", "", {"version":3,"sources":["/./src/VueBootstrapTable.vue?74e76db7"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkFA;;KAEA;;IAEA;;;;;;EAMA;IACA;QACA,2BAAA,CAAA,gBAAA;QACA,+BAAA,CAAA,UAAA;QACA,mBAAA;QACA,aAAA;QACA,cAAA;QACA,2CAAA;gBAAA,mCAAA;QACA,mBAAA;QACA,UAAA;QACA,SAAA;QACA,wBAAA;KACA;;IAEA;QACA,KAAA,gCAAA,CAAA,wBAAA,EAAA;QACA,OAAA,kCAAA,CAAA,0BAAA,EAAA;KACA;;IAHA;QACA,KAAA,gCAAA,CAAA,wBAAA,EAAA;QACA,OAAA,kCAAA,CAAA,0BAAA,EAAA;KACA;;;IAGA;QACA,mBAAA;QACA,YAAA;QACA,uBAAA;QACA,aAAA;QACA,YAAA;QACA,aAAA;KACA;;IAEA;QACA,cAAA;KACA;;IAEA;QACA,gBAAA;QACA,+BAAA;KACA;;IAEA;;OAEA;;IAEA;QACA,WAAA;QACA,mBAAA;KACA;;IAEA;QACA,mBAAA;QACA,YAAA;QACA,WAAA;QACA,eAAA;QACA,oCAAA;QACA,iBAAA;QACA;;;;;;wBAMA;KACA;;IAEA;QACA,iBAAA;QACA;;;;UAIA;KACA;;IAEA;QACA,iBAAA;KACA;;;IAGA;QACA,eAAA;KACA;;IAEA;;;;;;OAMA","file":"VueBootstrapTable.vue","sourcesContent":["\n\n"],"sourceRoot":"webpack://"}]); // exports @@ -434,10 +434,39 @@ return /******/ (function(modules) { // webpackBootstrap var _qs2 = _interopRequireDefault(_qs); + var _lodash = __webpack_require__(42); + + var _lodash2 = _interopRequireDefault(_lodash); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } /* Field Section used for displaying and editing value of cell */ - //