Skip to content

B
bootstrap-multiselect
Commit 00ebed1b authored by Devristo's avatar Devristo
Browse files
Options

Added KnockoutJS data-binding support 

Added KnockoutJS support by using a custom 'multiselect' binding handler.

Example:

1. Define select input
-------------------------
<select class="multiSelect" data-bind="multiselect: true,options: Options, selectedOptions: SelectedOptions, optionsValue: $data" multiple="multiple"></select>

1. Initialize Bootstrap-multiselect
-------------------------------------
$(".multiSelect").multiselect();

3 .Apply view model
parent 0bafa7ce
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 163 deletions
js/bootstrap-multiselect.js
View file @ 00ebed1b
/**
* bootstrap-multiselect.js 1.0.0
* https://github.com/davidstutz/bootstrap-multiselect
*
* Copyright 2012 David Stutz
*
*
* Copyright 2012 David Stutz
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
......@@ -18,163 +18,200 @@
*/
!function ($) {
"use strict"; // jshint ;_;
function Multiselect(select, options) {
this.options = this.getOptions(options);
this.select = $(select);
this.container = $(this.options.buttonContainer)
.append('<button type="button" style="width:' + this.options.buttonWidth + '" class="dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>')
.append('<ul class="dropdown-menu"></ul>');
// Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) {
$('ul', this.container).css({
'max-height': this.options.maxHeight + 'px',
'overflow-y': 'auto',
'overflow-x': 'hidden',
});
}
// Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) {
this.select.attr('multiple', true);
}
// Build the dropdown.
$('option', this.select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) {
$(element).attr('selected', 'selected');
$(element).prop('selected', 'selected');
}
$('ul', this.container).append('<li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>');
var selected = $(element).prop('selected') || false;
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container);
checkbox.prop('checked', selected);
if (selected) {
checkbox.parents('li').addClass('active');
}
}, this));
this.select.hide()
.after(this.container);
// Bind the change event on the dropdown elements.
$('ul li input[type="checkbox"]', this.container).on('change', $.proxy(function(event) {
var checked = $(event.target).prop('checked') || false;
if (checked) {
$(event.target).parents('li').addClass('active');
}
else {
$(event.target).parents('li').removeClass('active');
}
var option = $('option[value="' + $(event.target).val() + '"]', this.select);
if (checked) {
option.attr('selected', 'selected');
option.prop('selected', 'selected');
}
else {
option.removeAttr('selected');
}
console.log(option);
var options = $('option:selected', this.select);
$('button', this.container).html(this.options.buttonText(options));
this.options.onChange(option, checked);
}, this));
$('ul li a', this.container).on('click', function(event) {
event.stopPropagation();
});
};
Multiselect.prototype = {
defaults: {
// Default text function will either print 'None selected' in case no option is selected,
// or a list of the selected options up to a length of 3 selected options.
// If more than 3 options are selected, the number of selected options is printed.
buttonText: function(options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
}
else if (options.length > 3) {
return options.length + ' selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
},
// Is triggered on change of the selected options.
onChange: function() {
},
buttonClass: 'btn',
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
// Maximum height of thet dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: 400,
},
constructor: Multiselect,
reset: function() {
},
// Destroy - unbind - the plugin.
destroy: function() {
this.container.remove();
this.select.show();
},
// Refreshs the checked options based on the current state of the select.
refresh: function() {
$('option', this.select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) {
$('ul li input[value="' + $(element).val() + '"]', this.container).prop('checked', true);
$('ul li input[value="' + $(element).val() + '"]', this.container).parents('li').addClass('active');
}
else {
$('ul li input[value="' + $(element).val() + '"]', this.container).prop('checked', false);
$('ul li input[value="' + $(element).val() + '"]', this.container).parents('li').removeClass('active');
}
}, this));
$('button', this.container).html(this.options.buttonText($('option:selected', this.select)));
},
// Get options by merging defaults and given options.
getOptions: function(options) {
return $.extend({}, this.defaults, options);
}
};
$.fn.multiselect = function (option) {
return this.each(function () {
var data = $(this).data('multiselect'),
options = typeof option == 'object' && option;
if (!data) {
$(this).data('multiselect', (data = new Multiselect(this, options)));
}
if (typeof option == 'string') {
data[option]();
}
});
}
}(window.jQuery);
\ No newline at end of file
"use strict"; // jshint ;_;
if(ko && ko.bindingHandlers && !ko.bindingHandlers.multiselect){
ko.bindingHandlers.multiselect = {
init: function (element) {
var ms = $(element).data('multiselect');
if(!ms)
throw new Error("Bootstrap-multiselect's multiselect() has to be called on element before applying the Knockout View model!");
var prev = ms.options.onChange;
ms.options.onChange = function(option, checked){
// We dont want to refresh the multiselect since it would delete / recreate all items
$(element).data('blockRefresh', true);
// Force the binding to be updated by triggering the change event on the select element
$(element).trigger('change');
// Call any defined change handler
return prev(option, checked);
}
},
update: function (element) {
var blockRefresh = $(element).data('blockRefresh') || false;
if (!blockRefresh) { $(element).multiselect("refresh"); }
$.data(element, 'blockRefresh', false);
}
};
}
function Multiselect(select, options) {
this.options = this.getOptions(options);
this.select = $(select);
this.container = $(this.options.buttonContainer)
.append('<button type="button" class="dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>')
.append('<ul class="dropdown-menu"></ul>');
// Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) {
$('ul', this.container).css({
'max-height': this.options.maxHeight + 'px',
'overflow-y': 'auto',
'overflow-x': 'hidden',
});
}
// Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) {
this.select.attr('multiple', true);
}
this.addOptions(select, options);
this.select
.hide()
.after(this.container);
};
Multiselect.prototype = {
addOptions: function(select, options){
// Build the dropdown.
$('option', this.select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) {
$(element).attr('selected', 'selected');
$(element).prop('selected', 'selected');
}
$('ul', this.container).append('<li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>');
var selected = $(element).prop('selected') || false;
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container);
checkbox.prop('checked', selected);
if (selected) {
checkbox.parents('li').addClass('active');
}
}, this));
// Bind the change event on the dropdown elements.
$('ul li input[type="checkbox"]', this.container).on('change', $.proxy(function(event) {
var checked = $(event.target).prop('checked') || false;
if (checked) {
$(event.target).parents('li').addClass('active');
}
else {
$(event.target).parents('li').removeClass('active');
}
var option = $('option[value="' + $(event.target).val() + '"]', this.select);
if (checked) {
option.attr('selected', 'selected');
option.prop('selected', 'selected');
}
else {
option.removeAttr('selected');
}
console.log(option);
var options = $('option:selected', this.select);
$('button', this.container).html(this.options.buttonText(options));
this.options.onChange(option, checked);
}, this));
$('ul li a', this.container).on('click', function(event) {
event.stopPropagation();
});
},
defaults: {
// Default text function will either print 'None selected' in case no option is selected,
// or a list of the selected options up to a length of 3 selected options.
// If more than 3 options are selected, the number of selected options is printed.
buttonText: function(options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
}
else if (options.length > 3) {
return options.length + ' selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
},
// Is triggered on change of the selected options.
onChange: function() {
},
buttonClass: 'btn',
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
// Maximum height of thet dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: 400,
},
constructor: Multiselect,
reset: function() {
},
// Destroy - unbind - the plugin.
destroy: function() {
this.container.remove();
this.select.show();
},
// Refreshs the checked options based on the current state of the select.
refresh: function() {
$('ul', this.container).html('');
this.addOptions(this.select, this.options);
$('option', this.select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) {
$('ul li input[value="' + $(element).val() + '"]', this.container).prop('checked', true);
$('ul li input[value="' + $(element).val() + '"]', this.container).parents('li').addClass('active');
}
else {
$('ul li input[value="' + $(element).val() + '"]', this.container).prop('checked', false);
$('ul li input[value="' + $(element).val() + '"]', this.container).parents('li').removeClass('active');
}
}, this));
$('button', this.container).html(this.options.buttonText($('option:selected', this.select)));
},
// Get options by merging defaults and given options.
getOptions: function(options) {
return $.extend({}, this.defaults, options);
}
};
$.fn.multiselect = function (option) {
return this.each(function () {
var data = $(this).data('multiselect'),
options = typeof option == 'object' && option;
if (!data) {
$(this).data('multiselect', (data = new Multiselect(this, options)));
}
if (typeof option == 'string') {
data[option]();
}
});
}
}(window.jQuery);
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