Skip to content

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

Merge branch 'master' of https://github.com/davidstutz/bootstrap-multiselect 

Conflicts:
	index-2-3.html
	index.html
	js/bootstrap-multiselect.js
parents dcb6596a e7ad7cf6
Show whitespace changes
Inline Side-by-side
Showing with 171 additions and 52 deletions
index-2-3.html
View file @ 536ca604
...@@ -642,6 +642,21 @@ ...@@ -642,6 +642,21 @@
</pre> </pre>
</td> </td>
</tr> </tr>
<tr>
<td><code>nonSelectedText</code></td>
<td>A string that is displayed when no options are selected.</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
nonSelectedText: 'You have not selected any options'
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr> <tr>
<td><code>buttonTitle</code></td> <td><code>buttonTitle</code></td>
<td>Function defining the title of the button. Similar to the <code>buttonText</code> option.</td> <td>Function defining the title of the button. Similar to the <code>buttonText</code> option.</td>
...@@ -2229,6 +2244,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2229,6 +2244,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</p> </p>
<p> <p>
<<<<<<< HEAD
<b>How to check whether filtering all options resulted no options being displayed (except the select all option)?</b> <b>How to check whether filtering all options resulted no options being displayed (except the select all option)?</b>
</p> </p>
...@@ -2295,6 +2311,27 @@ $('#example2').multiselect({ ...@@ -2295,6 +2311,27 @@ $('#example2').multiselect({
<p> <p>
This may be caused by several reasons one of which is described and resolved here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/223">https://github.com/davidstutz/bootstrap-multiselect/pull/223</a>. This may be caused by several reasons one of which is described and resolved here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/223">https://github.com/davidstutz/bootstrap-multiselect/pull/223</a>.
</p> </p>
<p>
<b>How to underline the searched text when using the filter?</b>
</p>
<p>
This issue is discussed <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/309" target="_blank">here</a>.
</p>
<p>
<b>How to hide the checkboxes?</b>
</p>
<p>
A related issue is discussed <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/205" target="_blank">here</a> and includes a possible solution when using CSS to hide the checkboxes:
</p>
<pre>
.multiselect-container input {
display: none
}
</pre>
</div> </div>
<div class="container"> <div class="container">
......
index.html
View file @ 536ca604
...@@ -680,6 +680,21 @@ ...@@ -680,6 +680,21 @@
</pre> </pre>
</td> </td>
</tr> </tr>
<tr>
<td><code>nonSelectedText</code></td>
<td>A string that is displayed when no options are selected.</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
nonSelectedText: 'You have not selected any options'
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr> <tr>
<td><code>buttonTitle</code></td> <td><code>buttonTitle</code></td>
<td>Function defining the title of the button. Similar to the <code>buttonText</code> option.</td> <td>Function defining the title of the button. Similar to the <code>buttonText</code> option.</td>
...@@ -2374,6 +2389,27 @@ $('#example2').multiselect({ ...@@ -2374,6 +2389,27 @@ $('#example2').multiselect({
<p> <p>
This may be caused by several reasons one of which is described and resolved here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/223">https://github.com/davidstutz/bootstrap-multiselect/pull/223</a>. This may be caused by several reasons one of which is described and resolved here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/223">https://github.com/davidstutz/bootstrap-multiselect/pull/223</a>.
</p> </p>
<p>
<b>How to underline the searched text when using the filter?</b>
</p>
<p>
This issue is discussed <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/309" target="_blank">here</a>.
</p>
<p>
<b>How to hide the checkboxes?</b>
</p>
<p>
A related issue is discussed <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/205" target="_blank">here</a> and includes a possible solution when using CSS to hide the checkboxes:
</p>
<pre>
.multiselect-container input {
display: none
}
</pre>
</div> </div>
<div class="container"> <div class="container">
......
js/bootstrap-multiselect.js
View file @ 536ca604
...@@ -106,8 +106,8 @@ ...@@ -106,8 +106,8 @@
// Build select all if enabled. // Build select all if enabled.
this.buildContainer(); this.buildContainer();
this.buildButton(); this.buildButton();
this.buildSelectAll();
this.buildDropdown(); this.buildDropdown();
this.buildSelectAll();
this.buildDropdownOptions(); this.buildDropdownOptions();
this.buildFilter(); this.buildFilter();
...@@ -310,6 +310,10 @@ ...@@ -310,6 +310,10 @@
var tag = $(element).prop('tagName') var tag = $(element).prop('tagName')
.toLowerCase(); .toLowerCase();
if ($(element).prop('value') == this.options.selectAllValue) {
return;
}
if (tag === 'optgroup') { if (tag === 'optgroup') {
this.createOptgroup(element); this.createOptgroup(element);
} }
...@@ -362,6 +366,7 @@ ...@@ -362,6 +366,7 @@
} }
} }
if(!isSelectAllOption){
if (checked) { if (checked) {
$option.prop('selected', true); $option.prop('selected', true);
...@@ -390,6 +395,7 @@ ...@@ -390,6 +395,7 @@
// Unselect option. // Unselect option.
$option.prop('selected', false); $option.prop('selected', false);
} }
}
this.$select.change(); this.$select.change();
...@@ -453,7 +459,7 @@ ...@@ -453,7 +459,7 @@
this.$button.click(); this.$button.click();
} }
else { else {
var $items = $(this.$container).find("li:not(.divider):visible a"); var $items = $(this.$container).find("li:not(.divider):not(.disabled) a").filter(":visible");
if (!$items.length) { if (!$items.length) {
return; return;
...@@ -525,6 +531,8 @@ ...@@ -525,6 +531,8 @@
if ($(element).is(':disabled')) { if ($(element).is(':disabled')) {
$checkbox.attr('disabled', 'disabled') $checkbox.attr('disabled', 'disabled')
.prop('disabled', true) .prop('disabled', true)
.parents('a')
.attr("tabindex", "-1")
.parents('li') .parents('li')
.addClass('disabled'); .addClass('disabled');
} }
...@@ -573,20 +581,35 @@ ...@@ -573,20 +581,35 @@
/** /**
* Build the selct all. * Build the selct all.
* Checks if a select all ahs already been created. * Checks if a select all has already been created.
*/ */
buildSelectAll: function() { buildSelectAll: function() {
var alreadyHasSelectAll = this.hasSelectAll(); var alreadyHasSelectAll = this.hasSelectAll();
if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple
&& $('option[data-role!="divider"]', this.$select).length > this.options.includeSelectAllIfMoreThan) { && $('option', this.$select).length > this.options.includeSelectAllIfMoreThan) {
// Check whether to add a divider after the select all. // Check whether to add a divider after the select all.
if (this.options.includeSelectAllDivider) { if (this.options.includeSelectAllDivider) {
this.$select.prepend('<option value="" disabled="disabled" data-role="divider">'); this.$ul.prepend($(this.options.templates.divider));
} }
this.$select.prepend('<option value="' + this.options.selectAllValue + '">' + this.options.selectAllText + '</option>'); var $li = $(this.options.templates.li);
$('label', $li).addClass("checkbox");
$('label', $li).append('<input type="checkbox" name="' + this.options.checkboxName + '" />');
var $checkbox = $('input', $li);
$checkbox.val(this.options.selectAllValue);
$li.addClass("multiselect-item multiselect-all");
$checkbox.parent().parent()
.addClass('multiselect-all');
$('label', $li).append(" " + this.options.selectAllText);
this.$ul.prepend($li);
$checkbox.prop('checked', false);
} }
}, },
...@@ -644,10 +667,10 @@ ...@@ -644,10 +667,10 @@
} }
if (showElement) { if (showElement) {
$(element).show(); $(element).show().removeClass("filter-hidden");
} }
else { else {
$(element).hide(); $(element).hide().addClass("filter-hidden");
} }
} }
}, this)); }, this));
...@@ -728,6 +751,11 @@ ...@@ -728,6 +751,11 @@
var $option = this.getOptionByValue(value); var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value); var $checkbox = this.getInputByValue(value);
if($option === void(0) || $checkbox === void(0))
{
continue;
}
if (this.options.selectedClass) { if (this.options.selectedClass) {
$checkbox.parents('li') $checkbox.parents('li')
.addClass(this.options.selectedClass); .addClass(this.options.selectedClass);
...@@ -767,6 +795,11 @@ ...@@ -767,6 +795,11 @@
var $option = this.getOptionByValue(value); var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value); var $checkbox = this.getInputByValue(value);
if($option === void(0) || $checkbox === void(0))
{
continue;
}
if (this.options.selectedClass) { if (this.options.selectedClass) {
$checkbox.parents('li') $checkbox.parents('li')
.removeClass(this.options.selectedClass); .removeClass(this.options.selectedClass);
...@@ -793,11 +826,11 @@ ...@@ -793,11 +826,11 @@
$("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").addClass(this.options.selectedClass); $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").addClass(this.options.selectedClass);
if (allCheckboxesCount === visibleCheckboxesCount) { if (allCheckboxesCount === visibleCheckboxesCount) {
$("option:enabled:not([data-role='divider'])", this.$select).prop('selected', true); $("option:enabled", this.$select).prop('selected', true);
} }
else { else {
var values = visibleCheckboxes.map(function() { return $(this).val() }).get(); var values = visibleCheckboxes.map(function() { return $(this).val() }).get();
$("option:enabled:not([data-role='divider'])", this.$select).filter(function(index){ return $.inArray($(this).val(), values) !== -1; }).prop('selected', true); $("option:enabled", this.$select).filter(function(index){ return $.inArray($(this).val(), values) !== -1; }).prop('selected', true);
} }
}, },
...@@ -819,13 +852,13 @@ ...@@ -819,13 +852,13 @@
values = visibleCheckboxes.map(function() { return $(this).val() }).get(); values = visibleCheckboxes.map(function() { return $(this).val() }).get();
$("option:enabled:not([data-role='divider'])", this.$select).filter(function(index){ return $.inArray($(this).val(), values) !== -1; }).prop('selected', false); $("option:enabled", this.$select).filter(function(index){ return $.inArray($(this).val(), values) !== -1; }).prop('selected', false);
$("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass); $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass);
}else { }else {
allCheckboxes.prop('checked', false); allCheckboxes.prop('checked', false);
$("option:enabled:not([data-role='divider'])", this.$select).prop('selected', false); $("option:enabled", this.$select).prop('selected', false);
$("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass); $("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass);
} }
}, },
...@@ -837,10 +870,6 @@ ...@@ -837,10 +870,6 @@
rebuild: function() { rebuild: function() {
this.$ul.html(''); this.$ul.html('');
// Remove select all option in select.
$('option[value="' + this.options.selectAllValue + '"]', this.$select).remove();
$('option[data-role="divider"]', this.$select).remove();
// Important to distinguish between radios and checkboxes. // Important to distinguish between radios and checkboxes.
this.options.multiple = this.$select.attr('multiple') === "multiple"; this.options.multiple = this.$select.attr('multiple') === "multiple";
...@@ -863,8 +892,21 @@ ...@@ -863,8 +892,21 @@
*/ */
dataprovider: function(dataprovider) { dataprovider: function(dataprovider) {
var optionDOM = ""; var optionDOM = "";
var groupCounter = 0;
dataprovider.forEach(function (option) { dataprovider.forEach(function (option) {
optionDOM += '<option value="' + option.value + '">' + option.label + '</option>'; if ($.isArray(option.children)) {
groupCounter++;
optionDOM += '<optgroup label="' + (option.title || 'Group ' + groupCounter) + '">';
option.children.forEach(function(subOption) {
optionDOM += '<option value="' + subOption.value + '">' + (subOption.label || subOption.value) + '</option>';
});
optionDOM += '</optgroup>';
} else {
optionDOM += '<option value="' + option.value + '">' + (option.label || option.value) + '</option>';
}
}); });
this.$select.html(optionDOM); this.$select.html(optionDOM);
...@@ -909,28 +951,32 @@ ...@@ -909,28 +951,32 @@
}, },
/** /**
* Checks whether a select all option is present. * Checks whether a select all checkbox is present.
* *
* @returns {Boolean} * @returns {Boolean}
*/ */
hasSelectAll: function() { hasSelectAll: function() {
return $('option[value="' + this.options.selectAllValue + '"]', this.$select).length > 0; return $('li.' + this.options.selectAllValue, this.$ul).length > 0;
}, },
/** /**
* Updates the select all option based on the currently displayed and selected checkboxes. * Updates the select all checkbox based on the currently displayed and selected checkboxes.
*/ */
updateSelectAll: function() { updateSelectAll: function() {
if (this.hasSelectAll()) { if (this.hasSelectAll()) {
var allBoxes = $("li:not(.multiselect-item) input:enabled", this.$ul).filter(":visible"), var allBoxes = $("li:not(.multiselect-item):not(.filter-hidden) input:enabled", this.$ul),
allBoxesLength = allBoxes.length, allBoxesLength = allBoxes.length,
checkedBoxesLength = allBoxes.filter(":checked").length; checkedBoxesLength = allBoxes.filter(":checked").length,
selectAllLi = $("li." + this.options.selectAllValue, this.$ul),
selectAllInput = selectAllLi.find("input");
if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) { if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
this.select(this.options.selectAllValue); selectAllInput.prop("checked", true);
selectAllLi.addClass(this.options.selectedClass);
} }
else { else {
this.deselect(this.options.selectAllValue); selectAllInput.prop("checked", false);
selectAllLi.removeClass(this.options.selectedClass);
} }
} }
}, },
...@@ -955,7 +1001,7 @@ ...@@ -955,7 +1001,7 @@
* @returns {jQUery} * @returns {jQUery}
*/ */
getSelected: function() { getSelected: function() {
return $('option:not([value="' + this.options.selectAllValue + '"])', this.$select).filter(":selected"); return $('option', this.$select).filter(":selected");
}, },
/** /**
......
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