Skip to content

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

Fixed #595 and got rid of additional js file.

parent 3f9821ff
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 148 deletions
dist/js/bootstrap-multiselect-collapsible-groups.js deleted 100644 → 0
View file @ 3f9821ff
! function(e) {
"use strict";
jQuery.fn.multiselect.Constructor.prototype.selectAll = (function() {
var cached_function = jQuery.fn.multiselect.Constructor.prototype.selectAll;
return function() {
var args = Array.prototype.slice.call( arguments );
args[0] = (this.options.enableCollapsibleOptGroups && this.options.multiple) ? false : args[0];
cached_function.apply(this, args);
};
}());
jQuery.fn.multiselect.Constructor.prototype.deselectAll = (function() {
var cached_function = jQuery.fn.multiselect.Constructor.prototype.deselectAll;
return function() {
var args = Array.prototype.slice.call( arguments );
args[0] = (this.options.enableCollapsibleOptGroups && this.options.multiple) ? false : args[0];
cached_function.apply(this, args);
};
}());
jQuery.fn.multiselect.Constructor.prototype.createOptgroup = (function() {
var cached_function = jQuery.fn.multiselect.Constructor.prototype.createOptgroup;
return function() {
var args = Array.prototype.slice.call( arguments );
var t = args[0];
if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
var n = e(t).attr("label");
var v = e(t).attr("value");
var r = e('<li class="multiselect-item multiselect-group"><a href="javascript:void(0);"><input type="checkbox" value="' + v + '"/><b> ' + n + '<b class="caret"></b></b></a></li>');
if (this.options.enableClickableOptGroups) {
r.addClass("multiselect-group-clickable")
}
this.$ul.append(r);
if (e(t).is(":disabled")) {
r.addClass("disabled")
}
e("option", t).each(e.proxy(function(e, t) {
this.createOptionValue(t)
}, this))
} else {
cached_function.apply(this, arguments);
}
};
}());
jQuery.fn.multiselect.Constructor.prototype.buildDropdownOptions = (function() {
var cached_function = jQuery.fn.multiselect.Constructor.prototype.buildDropdownOptions;
return function() {
cached_function.apply(this, arguments);
if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
e("li.multiselect-group input", this.$ul).off();
e("li.multiselect-group", this.$ul).siblings().not("li.multiselect-group, li.multiselect-all", this.$ul).each( function () {
$(this).toggleClass('hidden', true);
});
e("li.multiselect-group", this.$ul).on("click", e.proxy(function(t) {
t.stopPropagation();
}, this));
e("li.multiselect-group > a > b", this.$ul).on("click", e.proxy(function(t) {
t.stopPropagation();
var n = e(t.target).closest('li');
var r = n.nextUntil("li.multiselect-group");
var i = true;
r.each(function() {
i = i && e(this).hasClass('hidden');
});
r.toggleClass('hidden', !i);
}, this));
e("li.multiselect-group > a > input", this.$ul).on("change", e.proxy(function(t) {
t.stopPropagation();
var n = e(t.target).closest('li');
var r = n.nextUntil("li.multiselect-group");
var i = true;
var s = r.find("input");
s.each(function() {
i = i && e(this).prop("checked")
});
s.prop("checked", !i).trigger("change")
}, this));
e("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');
e("li.multiselect-group > a, li.multiselect-all > a > label.checkbox", this.$ul).css('padding', '3px 20px 3px 35px');
e("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');
}
};
}());
}(window.jQuery)
dist/js/bootstrap-multiselect.js
View file @ 03582561
......@@ -387,6 +387,7 @@
enableCaseInsensitiveFiltering: false,
enableFullValueFiltering: false,
enableClickableOptGroups: false,
enableCollapsibelOptGroups: false,
filterPlaceholder: 'Search',
// possible options: 'text', 'value', 'both'
filterBehavior: 'text',
......@@ -723,7 +724,7 @@
if(this.options.enableClickableOptGroups && this.options.multiple) {
$('li.multiselect-group', this.$ul).on('click', $.proxy(function(event) {
event.stopPropagation();
console.log('test');
var group = $(event.target).parent();
// Search all option in optgroup
......@@ -750,6 +751,83 @@
this.options.onChange(optionInputs, !allChecked);
}, this));
}
if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
$("li.multiselect-group input", this.$ul).off();
$("li.multiselect-group", this.$ul).siblings().not("li.multiselect-group, li.multiselect-all", this.$ul).each( function () {
$(this).toggleClass('hidden', true);
});
$("li.multiselect-group", this.$ul).on("click", $.proxy(function(group) {
group.stopPropagation();
}, this));
$("li.multiselect-group > a > b", this.$ul).on("click", $.proxy(function(t) {
t.stopPropagation();
var n = $(t.target).closest('li');
var r = n.nextUntil("li.multiselect-group");
var i = true;
r.each(function() {
i = i && $(this).hasClass('hidden');
});
r.toggleClass('hidden', !i);
}, this));
$("li.multiselect-group > a > input", this.$ul).on("change", $.proxy(function(t) {
t.stopPropagation();
var n = $(t.target).closest('li');
var r = n.nextUntil("li.multiselect-group", ':not(.disabled)');
var s = r.find("input");
var i = true;
s.each(function() {
i = i && $(this).prop("checked");
});
s.prop("checked", !i).trigger("change");
}, this));
// Set the initial selection state of the groups.
$('li.multiselect-group', this.$ul).each(function() {
var r = $(this).nextUntil("li.multiselect-group", ':not(.disabled)');
var s = r.find("input");
var i = true;
s.each(function() {
i = i && $(this).prop("checked");
});
$(this).find('input').prop("checked", i);
});
// Update the group checkbox based on new selections among the
// corresponding children.
$("li input", this.$ul).on("change", $.proxy(function(t) {
t.stopPropagation();
var n = $(t.target).closest('li');
var r1 = n.prevUntil("li.multiselect-group", ':not(.disabled)');
var r2 = n.nextUntil("li.multiselect-group", ':not(.disabled)');
var s1 = r1.find("input");
var s2 = r2.find("input");
var i = $(t.target).prop('checked');
s1.each(function() {
i = i && $(this).prop("checked");
});
s2.each(function() {
i = i && $(this).prop("checked");
});
n.prevAll('.multiselect-group').find('input').prop('checked', i);
}, this));
$("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');
$("li.multiselect-group > a, li.multiselect-all > a > label.checkbox", this.$ul).css('padding', '3px 20px 3px 35px');
$("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');
}
},
/**
......@@ -833,33 +911,51 @@
*
* @param {jQuery} group
*/
createOptgroup: function(group) {
var groupName = $(group).prop('label');
// Add a header for the group.
var $li = $(this.options.templates.liGroup);
if (this.options.enableHTML) {
$('label', $li).html(groupName);
createOptgroup: function(group) {
if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
var label = $(group).attr("label");
var value = $(group).attr("value");
var r = $('<li class="multiselect-item multiselect-group"><a href="javascript:void(0);"><input type="checkbox" value="' + value + '"/><b> ' + label + '<b class="caret"></b></b></a></li>');
if (this.options.enableClickableOptGroups) {
r.addClass("multiselect-group-clickable")
}
this.$ul.append(r);
if ($(group).is(":disabled")) {
r.addClass("disabled")
}
$("option", group).each($.proxy(function($, group) {
this.createOptionValue(group)
}, this))
}
else {
$('label', $li).text(groupName);
}
if (this.options.enableClickableOptGroups) {
$li.addClass('multiselect-group-clickable');
}
var groupName = $(group).prop('label');
this.$ul.append($li);
// Add a header for the group.
var $li = $(this.options.templates.liGroup);
if ($(group).is(':disabled')) {
$li.addClass('disabled');
}
if (this.options.enableHTML) {
$('label', $li).html(groupName);
}
else {
$('label', $li).text(groupName);
}
// Add the options of the group.
$('option', group).each($.proxy(function(index, element) {
this.createOptionValue(element);
}, this));
if (this.options.enableClickableOptGroups) {
$li.addClass('multiselect-group-clickable');
}
this.$ul.append($li);
if ($(group).is(':disabled')) {
$li.addClass('disabled');
}
// Add the options of the group.
$('option', group).each($.proxy(function(index, element) {
this.createOptionValue(element);
}, this));
}
},
/**
......@@ -1195,6 +1291,8 @@
* @param {Boolean} triggerOnSelectAll
*/
selectAll: function (justVisible, triggerOnSelectAll) {
justVisible = (this.options.enableCollapsibleOptGroups && this.options.multiple) ? false : justVisible;
var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul);
var visibleCheckboxes = allCheckboxes.filter(":visible");
......@@ -1236,7 +1334,8 @@
* @param {Boolean} justVisible
*/
deselectAll: function (justVisible) {
var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
justVisible = (this.options.enableCollapsibleOptGroups && this.options.multiple) ? false : justVisible;
justVisible = typeof justVisible === 'undefined' ? true : justVisible;
if(justVisible) {
var visibleCheckboxes = $("li input[type='checkbox']:not(:disabled)", this.$ul).filter(":visible");
......
index.html
View file @ 03582561
......@@ -15,7 +15,6 @@
<link rel="stylesheet" href="dist/css/bootstrap-multiselect.css" type="text/css">
<script type="text/javascript" src="dist/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="dist/js/bootstrap-multiselect-collapsible-groups.js"></script>
<script type="text/javascript">
$(document).ready(function() {
......@@ -568,8 +567,11 @@
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true
$('#example-enableClickableOptGroups-onChange').multiselect({
enableClickableOptGroups: true,
onChange: function(option, checked) {
alert(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
}
});
});
&lt;/script&gt;
......@@ -578,16 +580,10 @@
</td>
</tr>
<tr>
<td><code id="configuration-options-enableCollapsibleOptGroups">enableCollapsibleOptGroups</code></td>
<td>
<code id="configuration-options-enableCollapsibleOptGroups">enableCollapsibleOptGroups</code>
</td>
<td>
<p class="alert alert-info">
For this option to be available, <code>bootstrap-multiselect-collapsible-groups.js</code> needs to be included.
</p>
<p>
Make your groups collapsible.
If set to <code>true</code>, <code>optgroup</code>'s will be collapsible.
</p>
<div class="example">
......@@ -598,7 +594,6 @@
});
});
</script>
<select id="example-enableCollapsibleOptGroups" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
......@@ -606,7 +601,7 @@
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1" disabled>Option 2.1</option>
<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>
......@@ -614,26 +609,13 @@
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups').multiselect({
enableCollapsibleOptGroups: true
});
});
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups').multiselect({
enableCollapsibleOptGroups: true
});
});
&lt;/script&gt;
&lt;select id="example-enableCollapsibleOptGroups" multiple="multiple"&gt;
&lt;optgroup label=&quot;Group 1&quot;&gt;
&lt;option value=&quot;1-1&quot; disabled&gt;Option 1.1&lt;/option&gt;
&lt;option value=&quot;1-2&quot; selected=&quot;selected&quot;&gt;Option 1.2&lt;/option&gt;
&lt;option value=&quot;1-3&quot; selected=&quot;selected&quot;&gt;Option 1.3&lt;/option&gt;
&lt;/optgroup&gt;
&lt;optgroup label=&quot;Group 2&quot;&gt;
&lt;option value=&quot;2-1&quot; disabled&gt;Option 2.1&lt;/option&gt;
&lt;option value=&quot;2-2&quot;&gt;Option 2.2&lt;/option&gt;
&lt;option value=&quot;2-3&quot;&gt;Option 2.3&lt;/option&gt;
&lt;/optgroup&gt;
&lt;/select&gt;
</pre>
</div>
</td>
......
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