-
Notifications
You must be signed in to change notification settings - Fork 1
/
bootstrap-table.js
130 lines (104 loc) · 4.19 KB
/
bootstrap-table.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import Component from 'can/component/';
import './bootstrap-table.less!';
import template from './bootstrap-table.stache!';
import ViewModel from './bootstrap-table.viewmodel';
import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css!';
import 'bootstrap-table/dist/bootstrap-table.min.css!';
import './extensions/bootstrap-table-fixed-columns/bootstrap-table-fixed-columns.css!';
import 'bootstrap/dist/js/bootstrap.min';
import 'bootstrap-table/src/bootstrap-table';
import './extensions/bootstrap-table-multiple-sort/';
import './extensions/bootstrap-table-fixed-columns/';
import './extensions/bootstrap-table-perfect-scrollbar/';
import './extensions/bootstrap-table-pagination-events/';
import './extensions/bootstrap-table-refresh-data/';
//We'd probably want to implement our own filter control. This one is pretty slow.
//import 'bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control';
export default Component.extend({
tag: 'bootstrap-table',
viewModel: ViewModel,
template,
events:{
//---- CONTROLLER PROPERTIES ----//
//flag to know whether or not to manually insert/remove items
// Initially false because the initialization of the comoponent
// will insert all items in the beginning
manageDataOnChange: false,
//---- END CONTROLLER PROPERTIES ----//
//---- INITIALIZATION ----//
"inserted": function($el, ev){
this.$el = $(this.element);
this.$table = this.$el.find("table");
var performanceMap = this.viewModel.attr("performanceMap");
performanceMap && performanceMap.setRenderStartTime();
this.initBootstrapTable();
performanceMap && performanceMap.setRenderEndTime();
//set flag for managing incoming data
this.manageDataOnChange = true;
},
initBootstrapTable(){
let tableData = this.viewModel.attr("tableData");
let derivedHeaders = this.viewModel.attr("tableHeaders");
let derivedRows = this.viewModel.attr("tableRows");
let self = this; //need self because we need the context of some of the callback functions
this.$table.bootstrapTable({
columns: derivedHeaders.attr(),
data: derivedRows.attr(),
pagination: true,
height: this.$el.height(),
search: true,
pageSize: 100,
//http://issues.wenzhixin.net.cn/bootstrap-table/extensions/fixed-columns.html
fixedColumns: true,
fixedNumber: 2,
perfectScrollbar: true,
showMultiSort: true,
sortPriority: [{sortName: 1, sortOrder: 'asc'}, {sortName: 3, sortOrder: 'desc'}],
diffProp: 3,
onPageChange: function(num, size){
self.onPageChange(this, num, size);
},
onPageChangeBefore: function(num, size){
self.onPageChangeBefore(this, num, size);
},
onSort: function(name, order){
self.onSort(this, name, order);
},
onSortAfter: function(name, order){
self.onSortAfter(this, name, order);
}
});
},
//---- END INITIALIZATION ----//
//---- EVENTS ----//
onPageChangeBefore(tablePlugin, num, size){
var performanceMap = this.viewModel.attr("performanceMap");
performanceMap && performanceMap.setLastPageStart();
},
onPageChange(tablePlugin, num, size){
var performanceMap = this.viewModel.attr("performanceMap");
performanceMap && performanceMap.setLastPageEnd();
},
onSortAfter(tablePlugin, name, order){
var performanceMap = this.viewModel.attr("performanceMap");
performanceMap && performanceMap.setLastSortEnd();
},
onSort(tablePlugin, sortPrioirty){
var performanceMap = this.viewModel.attr("performanceMap");
performanceMap && performanceMap.setLastSortStart();
},
//---- END EVENTS ----//
//---- DATA CHANGING ----//
"{viewModel} tableRows": function(vm, ev, newVal, oldVal){
if(this.manageDataOnChange){
var newRows = newVal.attr ? newVal.attr() : newVal;
this.onDataChanged(newRows, oldVal);
}
},
onDataChanged(newVal, oldVal){
this.$table.bootstrapTable("refreshData", newVal);
}
//---- END DATA CHANGING ----//
}
});