/
webgrid.js
294 lines (253 loc) · 9.14 KB
/
webgrid.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
var datagrid_active_filters = [];
var _datagrid_is_loaded = false;
$(document).ready(function() {
// sorting
datagrid_toggle_sort_selects();
$('.datagrid .header .sorting select').change(datagrid_toggle_sort_selects);
// filtering
datagrid_prep_filters();
$('.datagrid .filters .operator select').change(datagrid_on_operator_change);
$('.datagrid .filters .add-filter select').change(datagrid_add_filter);
$('.datagrid .filters .toggle-button').click(datagrid_toggle_mselect);
$('.inputs1 select').change(function() {
$(this).siblings('input').val($(this).val());
});
_datagrid_is_loaded = true;
});
/*
datagrid_toggle_mselect()
Called when the select box in an inputs1 column needs to be turned into a
multi-select UI element or a multi-select UI element needs to be turned into
a normal select box.
MUST be called from a context where "this" refers to the toggle image next to
the select element.
*/
function datagrid_toggle_mselect(){
jq_img = $(this);
jq_select = jq_img.siblings('select');
select_name = jq_select.attr('name');
multiple_attr = jq_select.attr('multiple')
if (typeof multiple_attr !== 'undefined' && multiple_attr !== false) {
jq_select.removeAttr('multiple');
jq_select.siblings('.ms-parent').hide();
jq_select.show();
} else {
datagrid_activate_mselect_ui(jq_select);
}
}
/*
datagrid_activate_mselect_ui()
Called to activate the multi-select ui on a select element.
*/
function datagrid_activate_mselect_ui(jq_select) {
var all_opt = $(jq_select).find('option[value="-1"]');
var use_all_opt = (all_opt.text() == '-- All --');
if ( use_all_opt ) {
$(all_opt).detach();
}
if (jq_select.siblings('.ms-parent').length > 0) {
jq_select.hide();
jq_select.siblings('.ms-parent').show();
} else {
jq_select.multipleSelect({
container: 'body',
onOpen: function() {
$('.ms-drop input').show();
},
minumimCountSelected: 2,
filter: true
});
jq_select.parent().find('.ms-parent > button, .ms-drop').each(function() {
$(this).css('width', $(this).width() + 60);
});
}
jq_select.attr('multiple', 'multiple');
if ( use_all_opt ) {
$(all_opt).prependTo(jq_select);
}
}
/*
datagrid_add_filter()
Called when the Add Filter select box is changed. Shows the operator and input
fields that corresponds to the filter selected.
*/
function datagrid_add_filter() {
jq_afs = $('.datagrid .filters .add-filter select');
filter_key = jq_afs.val();
if( filter_key != '') {
datagrid_activate_filter(filter_key);
jq_afs.val('');
}
}
/*
datagrid_prep_filters()
Called when the page is loaded, this function loops through the filter controls
table looking for filters that should be active (because of their initial
operator and input values) and shows the filter's input fields.
*/
function datagrid_prep_filters(){
$('.datagrid .filters tr').each(function(){
jq_tr = $(this);
// Added _filter to address CSS collision with Bootstrap
// Ref: https://github.com/level12/webgrid/issues/28
filter_key = jq_tr.attr('class').replace(new RegExp('_filter$'),'');
if( filter_key != 'add-filter') {
op_select = jq_tr.find('.operator select');
if( op_select.val() != '' ) {
// filter should be active, so activate it
datagrid_activate_filter(filter_key);
} else {
// the filter is not active, hide the row
jq_tr.hide();
}
datagrid_toggle_filter_inputs(jq_tr);
}
});
}
/*
datagrid_activate_filter()
Called initially when the page is loaded and also when the "Add Filter" select
box is changed to show the row and controls for the given filter key.
*/
function datagrid_activate_filter(filter_key) {
// Added _filter to address CSS collision with Bootstrap
// Ref: https://github.com/level12/webgrid/issues/28
jq_tr = $('.datagrid .filters tr.' + filter_key+ "_filter");
// show the filter's row of controls
jq_tr.show();
// make sure the option in the "Add Filter" select box for this
// filter is disabled
jq_option = $('.datagrid .filters .add-filter option[value="'+filter_key+'"]');
jq_option.attr('disabled', 'disabled');
}
/*
datagrid_on_operator_change()
Called when an operator select box is changed, it calls
datagrid_toggle_filter_inputs() for the filter in question so that the input
fields for the filter can be displayed properly.
*/
function datagrid_on_operator_change() {
jq_op_select = $(this);
jq_tr = jq_op_select.closest('tr');
// Added _filter to address CSS collision with Bootstrap
// Ref: https://github.com/level12/webgrid/issues/28
filter_key = jq_tr.attr('class').replace(new RegExp('_filter$'), '');
datagrid_toggle_filter_inputs(jq_tr);
}
/*
datagrid_toggle_filter_inputs()
Handles showing or hiding the input fields (input/select/multi-select UI) for a
given filter row.
*/
function datagrid_toggle_filter_inputs(jq_filter_tr) {
op_key = jq_filter_tr.find('.operator select').val();
fields1 = jq_filter_tr.find('.inputs1').children();
fields2 = jq_filter_tr.find('.inputs2').children();
v1name = 'v1('+filter_key+')';
if( op_key == null ) {
fields1.show();
} else if( op_key == '' ) {
// destroy any multi-selects that have been created
fields1.removeAttr('multiple');
fields1.siblings('.ms-parent').hide();
fields1.hide();
fields1.val('');
fields2.hide();
fields2.val('');
} else {
op_data = datagrid_data[filter_key][op_key];
field_type = op_data.field_type;
if( field_type == null ) {
fields1.hide();
fields1.val('');
} else {
fields1.show();
// turn on multi-select for a select field that has multiple
// set. The selector is for the toggle-button img, so that
// datagrid_toggle_mselect() works correctly.
fields1.siblings('.ms-parent').hide();
jq_filter_tr.find('.inputs1 select[multiple]').each(function(){
datagrid_activate_mselect_ui($(this));
});
if ( field_type.substring(0,6) == 'select' ) {
jq_filter_tr.find('.inputs1 input').hide();
jq_filter_tr.find('.inputs1 select:not([multiple])').show();
jq_filter_tr.find('.inputs1 input').val(
jq_filter_tr.find('.inputs1 select').val()
);
if ( field_type == 'select+input' ) {
jq_filter_tr.find('.inputs1 .toggle-button').hide();
jq_filter_tr.find('.inputs1 input').removeAttr('name');
jq_filter_tr.find('.inputs1 select').attr('name',v1name);
}
} else {
if (_datagrid_is_loaded) {
jq_filter_tr.find('.inputs1 input').val('');
}
jq_filter_tr.find('.inputs1 input').show();
jq_filter_tr.find('.inputs1 select').hide();
jq_filter_tr.find('.inputs1 .toggle-button').hide();
jq_filter_tr.find('.inputs1 input').attr('name',v1name);
jq_filter_tr.find('.inputs1 select').removeAttr('name');
}
}
if( field_type == '2inputs' || field_type == 'select+input' ) {
fields2.show();
} else {
fields2.hide();
fields2.val('');
}
}
}
/*
datagrid_filter_inactive() DON'T THINK I NEED THIS ANYMORE
Utility function that returns a bool value indicating if the filter key passed
in represents a filter that is currently inactive (and therefore hidden).
*/
function datagrid_filter_inactive(filter_key){
return $.inArray(filter_key, datagrid_active_filters) == -1;
}
/*
datagrid_toggle_sort_selects()
Called when any of the sorting related select boxes change, it handles hiding
and showing the select boxes.
*/
function datagrid_toggle_sort_selects() {
jq_dds = $('.datagrid .header .sorting dd');
if (jq_dds.length == 0) return;
dd1 = jq_dds.eq(0)
dd2 = jq_dds.eq(1)
dd3 = jq_dds.eq(2)
sb1 = dd1.find('select');
sb2 = dd2.find('select');
sb3 = dd3.find('select');
if( sb1.val() == '' ) {
dd2.hide();
sb2.val('');
dd3.hide();
sb3.val('');
} else {
dd2.show();
if( sb2.val() == '' ) {
dd3.hide();
sb3.val('');
} else {
dd3.show();
}
}
$('dl.sorting select option').removeAttr('disabled');
disable_sort(sb3);
disable_sort(sb2);
disable_sort(sb1);
}
/*
disable_sort()
Takes the target_id select box and grays out options that have been chosen in sb1 and sb2.
*/
function disable_sort(sb) {
if ($(sb).val() == '') return;
var sbval = $(sb).val().replace(/^-/, "");
$('dl.sorting select[id!="'+$(sb).attr('id')+'"]').find(
'option[value="'+sbval+'"], option[value="-'+sbval+'"]'
).attr('disabled', 'disabled');
}