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
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 52 deletions
index-2-3.html
View file @ 536ca604
......@@ -642,7 +642,22 @@
</pre>
</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>
<td><code>buttonTitle</code></td>
<td>Function defining the title of the button. Similar to the <code>buttonText</code> option.</td>
<td>
......@@ -2229,6 +2244,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</p>
<p>
<<<<<<< HEAD
<b>How to check whether filtering all options resulted no options being displayed (except the select all option)?</b>
</p>
......@@ -2295,6 +2311,27 @@ $('#example2').multiselect({
<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>.
</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 class="container">
......
index.html
View file @ 536ca604
......@@ -680,7 +680,22 @@
</pre>
</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>
<td><code>buttonTitle</code></td>
<td>Function defining the title of the button. Similar to the <code>buttonText</code> option.</td>
<td>
......@@ -2284,8 +2299,8 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</div>
<div class="page-header">
<h1><a id="faq"></a>Frequently Asked Questions</h1>
</div>
<h1><a id="faq"></a>Frequently Asked Questions</h1>
</div>
<p>
Here are some of the (not necessarily that frequently) asked questions and their answers.
......@@ -2374,6 +2389,27 @@ $('#example2').multiselect({
<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>.
</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 class="container">
......
js/bootstrap-multiselect.js
View file @ 536ca604
......@@ -106,8 +106,8 @@
// Build select all if enabled.
this.buildContainer();
this.buildButton();
this.buildSelectAll();
this.buildDropdown();
this.buildSelectAll();
this.buildDropdownOptions();
this.buildFilter();
......@@ -310,6 +310,10 @@
var tag = $(element).prop('tagName')
.toLowerCase();
if ($(element).prop('value') == this.options.selectAllValue) {
return;
}
if (tag === 'optgroup') {
this.createOptgroup(element);
}
......@@ -362,33 +366,35 @@
}
}
if (checked) {
$option.prop('selected', true);
if (this.options.multiple) {
// Simply select additional option.
if(!isSelectAllOption){
if (checked) {
$option.prop('selected', true);
}
else {
// Unselect all other options and corresponding checkboxes.
if (this.options.selectedClass) {
$($checkboxesNotThis).parents('li').removeClass(this.options.selectedClass);
if (this.options.multiple) {
// Simply select additional option.
$option.prop('selected', true);
}
else {
// Unselect all other options and corresponding checkboxes.
if (this.options.selectedClass) {
$($checkboxesNotThis).parents('li').removeClass(this.options.selectedClass);
}
$($checkboxesNotThis).prop('checked', false);
$optionsNotThis.prop('selected', false);
$($checkboxesNotThis).prop('checked', false);
$optionsNotThis.prop('selected', false);
// It's a single selection, so close.
this.$button.click();
}
// It's a single selection, so close.
this.$button.click();
}
if (this.options.selectedClass === "active") {
$optionsNotThis.parents("a").css("outline", "");
if (this.options.selectedClass === "active") {
$optionsNotThis.parents("a").css("outline", "");
}
}
else {
// Unselect option.
$option.prop('selected', false);
}
}
else {
// Unselect option.
$option.prop('selected', false);
}
this.$select.change();
......@@ -453,7 +459,7 @@
this.$button.click();
}
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) {
return;
......@@ -525,6 +531,8 @@
if ($(element).is(':disabled')) {
$checkbox.attr('disabled', 'disabled')
.prop('disabled', true)
.parents('a')
.attr("tabindex", "-1")
.parents('li')
.addClass('disabled');
}
......@@ -573,20 +581,35 @@
/**
* Build the selct all.
* Checks if a select all ahs already been created.
* Checks if a select all has already been created.
*/
buildSelectAll: function() {
var alreadyHasSelectAll = this.hasSelectAll();
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.
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 @@
}
if (showElement) {
$(element).show();
$(element).show().removeClass("filter-hidden");
}
else {
$(element).hide();
$(element).hide().addClass("filter-hidden");
}
}
}, this));
......@@ -728,6 +751,11 @@
var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value);
if($option === void(0) || $checkbox === void(0))
{
continue;
}
if (this.options.selectedClass) {
$checkbox.parents('li')
.addClass(this.options.selectedClass);
......@@ -767,6 +795,11 @@
var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value);
if($option === void(0) || $checkbox === void(0))
{
continue;
}
if (this.options.selectedClass) {
$checkbox.parents('li')
.removeClass(this.options.selectedClass);
......@@ -793,11 +826,11 @@
$("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").addClass(this.options.selectedClass);
if (allCheckboxesCount === visibleCheckboxesCount) {
$("option:enabled:not([data-role='divider'])", this.$select).prop('selected', true);
$("option:enabled", this.$select).prop('selected', true);
}
else {
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 @@
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);
}else {
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);
}
},
......@@ -837,10 +870,6 @@
rebuild: function() {
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.
this.options.multiple = this.$select.attr('multiple') === "multiple";
......@@ -863,10 +892,23 @@
*/
dataprovider: function(dataprovider) {
var optionDOM = "";
var groupCounter = 0;
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.rebuild();
},
......@@ -909,28 +951,32 @@
},
/**
* Checks whether a select all option is present.
* Checks whether a select all checkbox is present.
*
* @returns {Boolean}
*/
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() {
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,
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) {
this.select(this.options.selectAllValue);
selectAllInput.prop("checked", true);
selectAllLi.addClass(this.options.selectedClass);
}
else {
this.deselect(this.options.selectAllValue);
selectAllInput.prop("checked", false);
selectAllLi.removeClass(this.options.selectedClass);
}
}
},
......@@ -955,7 +1001,7 @@
* @returns {jQUery}
*/
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