Skip to content

B
bootstrap-multiselect
Commit ed5ab6a4 authored by David Stutz's avatar David Stutz
Browse files
Options

Fixed collapisble optgroups and added tests for correct mirroring and... 

Fixed collapisble optgroups and added tests for correct mirroring and initialization of clickable optgroups.
parent 4deb377f
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 21 deletions
dist/js/bootstrap-multiselect.js
View file @ ed5ab6a4
...@@ -208,7 +208,11 @@ ...@@ -208,7 +208,11 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(true); this.updateSelectAll(true);
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) { if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
this.disable(); this.disable();
} }
...@@ -608,7 +612,7 @@ ...@@ -608,7 +612,7 @@
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) { if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups($target, checked); this.updateOptGroup($target, checked);
} }
if(this.options.preventInputChangeEvent) { if(this.options.preventInputChangeEvent) {
...@@ -741,19 +745,29 @@ ...@@ -741,19 +745,29 @@
$.each($inputs, $.proxy(function(index, input) { $.each($inputs, $.proxy(function(index, input) {
var value = $(input).val(); var value = $(input).val();
values.push(value); var $option = this.getOptionByValue(value);
if (checked) {
$(input).prop('checked', true);
$(input).closest('li')
.addClass(this.options.selectedClass);
$option.prop('selected', true);
}
else {
$(input).prop('checked', false);
$(input).closest('li')
.removeClass(this.options.selectedClass);
$option.prop('selected', false);
}
$options.push(this.getOptionByValue(value)); $options.push(this.getOptionByValue(value));
}, this)) }, this))
if (checked) { // Cannot use select or deselect here because it would call updateOptGroups again.
this.select(values, false);
}
else {
this.deselect(values, false);
}
this.options.onChange($options, checked); this.options.onChange($options, checked);
// $inputs.prop("checked", checked).trigger("change");
}, this)); }, this));
} }
...@@ -961,9 +975,16 @@ ...@@ -961,9 +975,16 @@
var clearBtn = $(this.options.templates.filterClearBtn); var clearBtn = $(this.options.templates.filterClearBtn);
clearBtn.on('click', $.proxy(function(event){ clearBtn.on('click', $.proxy(function(event){
clearTimeout(this.searchTimeout); clearTimeout(this.searchTimeout);
this.$filter.find('.multiselect-search').val(''); this.$filter.find('.multiselect-search').val('');
$('li', this.$ul).show().removeClass('multiselect-filter-hidden'); $('li', this.$ul).show().removeClass('multiselect-filter-hidden');
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
}, this)); }, this));
this.$filter.find('.input-group').append(clearBtn); this.$filter.find('.input-group').append(clearBtn);
} }
...@@ -1048,6 +1069,10 @@ ...@@ -1048,6 +1069,10 @@
} }
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
}, this), 300, this); }, this), 300, this);
}, this)); }, this));
} }
...@@ -1111,6 +1136,10 @@ ...@@ -1111,6 +1136,10 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
}, },
/** /**
...@@ -1160,6 +1189,10 @@ ...@@ -1160,6 +1189,10 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
}, },
/** /**
...@@ -1169,6 +1202,10 @@ ...@@ -1169,6 +1202,10 @@
this.deselectAll(false); this.deselectAll(false);
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
}, },
/** /**
...@@ -1214,6 +1251,10 @@ ...@@ -1214,6 +1251,10 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
}, },
/** /**
...@@ -1315,6 +1356,10 @@ ...@@ -1315,6 +1356,10 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(true); this.updateSelectAll(true);
if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) { if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
this.disable(); this.disable();
} }
...@@ -1436,9 +1481,9 @@ ...@@ -1436,9 +1481,9 @@
}, },
/** /**
* Update opt groups. * Update a particular opt group.
*/ */
updateOptGroups: function($element, checked) { updateOptGroup: function($element, checked) {
var $prevs = $element.closest('li').prevUntil('li.multiselect-group').filter(":visible:not(.disabled)"); var $prevs = $element.closest('li').prevUntil('li.multiselect-group').filter(":visible:not(.disabled)");
var $nexts = $element.closest('li').nextUntil('li.multiselect-group').filter(":visible:not(.disabled)"); var $nexts = $element.closest('li').nextUntil('li.multiselect-group').filter(":visible:not(.disabled)");
...@@ -1455,7 +1500,7 @@ ...@@ -1455,7 +1500,7 @@
} }
}); });
var $group = $element.closest('li').prevAll('li.multiselect-group'); var $group = $element.closest('li').prevAll('li.multiselect-group')[0];
if (selected) { if (selected) {
$('input', $group).prop('checked', true); $('input', $group).prop('checked', true);
...@@ -1465,6 +1510,28 @@ ...@@ -1465,6 +1510,28 @@
} }
}, },
/**
* Update opt groups.
*/
updateOptGroups: function() {
var $groups = $('li.multiselect-group', this.$ul)
$groups.each(function() {
var $options = $(this).nextUntil('li.multiselect-group').filter(":not(.disabled)");
var checked = true;
$options.each(function() {
var $input = $('input', this);
if (!$input.prop('checked')) {
checked = false;
}
});
$('input', this).prop('checked', checked);
});
},
/** /**
* Updates the select all checkbox based on the currently displayed and selected checkboxes. * Updates the select all checkbox based on the currently displayed and selected checkboxes.
*/ */
......
index.html
View file @ ed5ab6a4
...@@ -618,6 +618,43 @@ ...@@ -618,6 +618,43 @@
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre>
</div>
<p>
Note that the <code>optgroup</code>'s are automatically selected if a whole group is selected by default:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups-init').multiselect({
enableClickableOptGroups: true
});
});
</script>
<select id="example-enableClickableOptGroups-init" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled="disabled">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-enableClickableOptGroups-init').multiselect({
enableClickableOptGroups: true
});
});
&lt;/script&gt;
</pre> </pre>
</div> </div>
</td> </td>
......
tests/spec/bootstrap-multiselect.js
View file @ ed5ab6a4
...@@ -278,7 +278,12 @@ describe('Bootstrap Multiselect "Clickable Optgroups"', function() { ...@@ -278,7 +278,12 @@ describe('Bootstrap Multiselect "Clickable Optgroups"', function() {
var $optgroup = $('<optgroup label="Group ' + i + '"></optgroup>'); var $optgroup = $('<optgroup label="Group ' + i + '"></optgroup>');
for (var j = 1; j < 11; j++) { for (var j = 1; j < 11; j++) {
$optgroup.append('<option value="' + i + '-' + j + '">Option ' + i + '.' + j + '</option>'); if (i == 1) {
$optgroup.append('<option value="' + i + '-' + j + '" selected="selected">Option ' + i + '.' + j + '</option>');
}
else {
$optgroup.append('<option value="' + i + '-' + j + '">Option ' + i + '.' + j + '</option>');
}
} }
$select.append($optgroup); $select.append($optgroup);
...@@ -304,22 +309,35 @@ describe('Bootstrap Multiselect "Clickable Optgroups"', function() { ...@@ -304,22 +309,35 @@ describe('Bootstrap Multiselect "Clickable Optgroups"', function() {
}); });
}); });
it('Groups should be clickable.', function() { it('Groups should be clickable and correctly initialized.', function() {
expect($('#multiselect option:selected').length).toBe(0); expect($('#multiselect option:selected').length).toBe(10);
expect(fired).toBe(0);
var i = 0; var i = 0;
$('#multiselect-container li.multiselect-group').each(function() { $('#multiselect-container li.multiselect-group').each(function() {
$('label', $(this)).click(); if (i == 0) {
expect($('option:selected', $('#multiselect optgroup')[i]).length).toBe(10); expect($('option:selected', $('#multiselect optgroup')[i]).length).toBe(10);
expect($('#multiselect option:selected').length).toBe(10); expect($('#multiselect option:selected').length).toBe(10);
$('label', $(this)).click()
expect($('option:selected', $('#multiselect optgroup')[i]).length).toBe(0);
expect($('#multiselect option:selected').length).toBe(0);
}
else {
$('label', $(this)).click();
expect($('option:selected', $('#multiselect optgroup')[i]).length).toBe(10);
expect($('#multiselect option:selected').length).toBe(10);
$('label', $(this)).click();
}
$('label', $(this)).click();
i++; i++;
}); });
}); });
it('Clickable groups should fire onChange only once.', function() { it('Clickable groups should fire onChange only once.', function() {
expect($('#multiselect option:selected').length).toBe(0); expect($('#multiselect option:selected').length).toBe(10);
fired = 0; fired = 0;
expect(fired).toBe(0); expect(fired).toBe(0);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment