|
37 | 37 | <table class="table table-bordered table-hover table-condensed table-striped vue-table"> |
38 | 38 | <thead> |
39 | 39 | <tr> |
40 | | - <th v-for="column in displayCols | filterBy true in 'visible'" @click="sortBy(column.name)" |
| 40 | + <th v-for="column in displayColsVisible" @click="sortBy($event, column.name)" |
41 | 41 | track-by="$index" |
42 | 42 | :class="getClasses(column.name)"> |
43 | 43 | {{ column.title }} |
44 | 44 | </th> |
45 | 45 | </tr> |
46 | 46 | </thead> |
47 | 47 | <tbody> |
48 | | - <tr v-for="entry in filteredValues | orderBy sortKey sortOrders[sortKey]" track-by="$index"> |
49 | | - <td v-for="column in displayCols | filterBy true in 'visible'" track-by="$index" |
| 48 | + <tr v-for="entry in filteredValuesSorted " track-by="$index"> |
| 49 | + <td v-for="column in displayColsVisible" track-by="$index" |
50 | 50 | v-show="column.visible"> |
| 51 | + |
51 | 52 | <span v-if="!column.editable"> {{ entry[column.name] }} </span> |
52 | 53 | <value-field-section v-else |
53 | 54 | :entry="entry" |
|
65 | 66 | <div class="btn-group" role="group" aria-label="pages"> |
66 | 67 | <button v-for="index in validPageNumbers" |
67 | 68 | type="button" class="btn btn-default" |
68 | | - v-bind:class="{ active: this.page===index }" |
| 69 | + :class="{ active: this.page===index }" |
69 | 70 | @click="this.page=index"> |
70 | 71 | {{index}} |
71 | 72 | </button> |
|
182 | 183 |
|
183 | 184 | import axios from 'axios'; |
184 | 185 | import qs from 'qs'; |
| 186 | + import lodash from 'lodash'; |
| 187 | +
|
185 | 188 |
|
186 | 189 | /* Field Section used for displaying and editing value of cell */ |
187 | 190 | var valueFieldSection = { |
|
246 | 249 | required: false, |
247 | 250 | default: true, |
248 | 251 | }, |
| 252 | + /** |
| 253 | + * Enable/disable table multicolumn sorting, optional, default false. |
| 254 | + * Also sortable must be enabled for this function to work. |
| 255 | + */ |
| 256 | + multiColumnSortable: { |
| 257 | + type: Boolean, |
| 258 | + required: false, |
| 259 | + default: false, |
| 260 | + }, |
249 | 261 | /** |
250 | 262 | * Enable/disable input filter, optional, default false |
251 | 263 | */ |
|
298 | 310 | return { |
299 | 311 | filteredSize: 0, |
300 | 312 | filterKey: "", |
301 | | - sortKey: "", |
302 | | - sortDir: "", |
| 313 | + sortKey: [], |
303 | 314 | sortOrders: {}, |
| 315 | + sortChanged: 1, |
304 | 316 | columnMenuOpen: false, |
305 | 317 | displayCols: [], |
306 | 318 | filteredValues: [], |
|
360 | 372 | sortKey: function () { |
361 | 373 | this.processFilter(); |
362 | 374 | }, |
363 | | - sortDir: function () { |
| 375 | + sortChanged: function () { |
364 | 376 | this.processFilter(); |
365 | 377 | }, |
366 | 378 | page: function () { |
|
375 | 387 | } |
376 | 388 | }, |
377 | 389 | computed: { |
| 390 | + displayColsVisible: function () { |
| 391 | + var displayColsVisible = []; |
| 392 | + for (var a in this.displayCols) { |
| 393 | + if (this.displayCols[a].visible) |
| 394 | + displayColsVisible.push(this.displayCols[a]); |
| 395 | + } |
| 396 | + return displayColsVisible; |
| 397 | + }, |
| 398 | + filteredValuesSorted: function () { |
| 399 | + var tColsDir = []; |
| 400 | + for(var i=0, len=this.sortKey.length; i < len; i++){ |
| 401 | + tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase()); |
| 402 | + } |
| 403 | + return _.orderBy(this.filteredValues, this.sortKey , tColsDir); |
| 404 | + }, |
378 | 405 | validPageNumbers: function () { |
379 | 406 | // 5 page max |
380 | 407 | var result = []; |
|
408 | 435 | self.loading = false; |
409 | 436 | }); |
410 | 437 | } else { |
411 | | - var result = this.$options.filters.filterBy(this.values, this.filterKey); |
412 | | - result = this.$options.filters.orderBy(result, this.sortKey, this.sortOrders[this.sortKey]); |
| 438 | + var result = this.values.filter(item => { |
| 439 | + var good = false; |
| 440 | + for (var col in self.displayColsVisible) { |
| 441 | + if ( _.includes(item[self.displayColsVisible[col].name]+"" , self.filterKey+"")){ |
| 442 | + good = true; |
| 443 | + } |
| 444 | + } |
| 445 | + return good; |
| 446 | + }); |
| 447 | +
|
| 448 | + var tColsDir = []; |
| 449 | + for(var i=0, len=this.sortKey.length; i < len; i++){ |
| 450 | + tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase()); |
| 451 | + } |
| 452 | +
|
| 453 | + result = _.orderBy(result, this.sortKey, tColsDir); |
| 454 | +
|
413 | 455 | this.filteredSize = result.length; |
414 | 456 | if (this.paginated) { |
415 | 457 | var startIndex = (this.page - 1) * this.pageSize; |
|
429 | 471 | fetchData: function ( dataCallBackFunction ) { |
430 | 472 | var self = this; |
431 | 473 | var ajaxParameters = { |
432 | | -
|
| 474 | + params: {} |
433 | 475 | }; |
434 | 476 | this.echo++; |
435 | 477 | if (this.ajax.enabled && this.ajax.delegate) { |
| 478 | + var tColsDir = []; |
| 479 | + for(var i=0, len=this.sortKey.length; i < len; i++){ |
| 480 | + tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase()); |
| 481 | + } |
436 | 482 | if ( this.ajax.method=== "GET" ) { |
437 | 483 | ajaxParameters.params.sortcol = this.sortKey; |
438 | | - ajaxParameters.params.sortdir = this.sortDir; |
| 484 | + ajaxParameters.params.sortdir = tColsDir; |
439 | 485 | ajaxParameters.params.filter = this.filterKey; |
440 | 486 | if (self.paginated ) { |
441 | 487 | ajaxParameters.params.page = this.page; |
|
448 | 494 | } |
449 | 495 | if ( this.ajax.method=== "POST" ) { |
450 | 496 | ajaxParameters.sortcol = this.sortKey; |
451 | | - ajaxParameters.sortdir = this.sortDir; |
| 497 | + ajaxParameters.sortdir = tColsDir; |
452 | 498 | ajaxParameters.filter = this.filterKey; |
453 | 499 | if (self.paginated ) { |
454 | 500 | ajaxParameters.page = this.page; |
|
504 | 550 | return obj; |
505 | 551 | }, |
506 | 552 | setSortOrders: function () { |
507 | | - this.sortKey = ""; |
| 553 | + this.sortKey = []; |
508 | 554 | var sortOrders = {}; |
509 | 555 | this.columns.forEach(function (column) { |
510 | | - sortOrders[column.name] = 0; |
| 556 | + sortOrders[column.name] = ""; |
511 | 557 | }); |
512 | 558 | this.sortOrders = sortOrders; |
513 | 559 |
|
514 | 560 | }, |
515 | | - sortBy: function (key) { |
| 561 | + sortBy: function (event, key) { |
516 | 562 | if (this.sortable) { |
517 | 563 | var self = this; |
518 | | - this.sortKey = key; |
519 | | - this.columns.forEach(function (column) { |
520 | | - if (column.name !== key) { |
521 | | - self.sortOrders[column.name] = 0; |
| 564 | +
|
| 565 | + if (!this.multiColumnSortable || ( this.multiColumnSortable && !event.shiftKey)) { |
| 566 | + this.sortKey = [key]; |
| 567 | + this.columns.forEach(function (column) { |
| 568 | + if (column.name !== key) { |
| 569 | + self.sortOrders[column.name] = ""; |
| 570 | + } |
| 571 | + }); |
| 572 | + } else { |
| 573 | + if (_.findIndex(this.sortKey, function(o) { return o === key; }) === -1) { |
| 574 | + this.sortKey.push(key); |
522 | 575 | } |
523 | | - }); |
524 | | - if (this.sortOrders[key] === 0) { |
525 | | - this.sortOrders[key] = 1; |
| 576 | + } |
| 577 | + if (this.sortOrders[key] === "") { |
| 578 | + this.sortOrders[key] = "ASC"; |
| 579 | + } else if (this.sortOrders[key] === "ASC") { |
| 580 | + this.sortOrders[key] = "DESC"; |
526 | 581 | } else { |
527 | | - this.sortOrders[key] = this.sortOrders[key] * -1; |
| 582 | + this.sortOrders[key] = "ASC"; |
528 | 583 | } |
529 | 584 |
|
530 | | - if (this.sortOrders[key] === 1) |
531 | | - this.sortDir = "ASC"; |
532 | | - if (this.sortOrders[key] === -1) |
533 | | - this.sortDir = "DESC"; |
| 585 | + this.sortChanged = this.sortChanged * -1; |
534 | 586 | } |
535 | 587 | }, |
536 | 588 | getClasses: function (key) { |
537 | 589 | var classes = []; |
538 | 590 | if (this.sortable) { |
539 | 591 | classes.push("arrow"); |
540 | | - if (this.sortKey === key) { |
| 592 | + /*if (this.sortKey === key) { |
| 593 | + classes.push("active"); |
| 594 | + }*/ |
| 595 | + if (_.findIndex(this.sortKey, function(o) { return o === key; }) !== -1) { |
541 | 596 | classes.push("active"); |
542 | 597 | } |
543 | | - if (this.sortOrders[key] === 1) { |
| 598 | +
|
| 599 | + if (this.sortOrders[key] === "ASC") { |
544 | 600 | classes.push("asc"); |
545 | | - } else if (this.sortOrders[key] === -1) { |
| 601 | + } else if (this.sortOrders[key] === "DESC") { |
546 | 602 | classes.push("dsc"); |
547 | 603 | } |
548 | 604 | } |
|
0 commit comments