Created
December 28, 2013 10:11
-
-
Save Arsey/8157988 to your computer and use it in GitHub Desktop.
modified to support group choosing buildDropdown function from bootstrap-multiselects by David Stutz(https://github.com/davidstutz/bootstrap-multiselect)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Build the dropdown and bind event handling. | |
buildDropdown : function() { | |
var alreadyHasSelectAll = this.$select[0][0] ? this.$select[0][0].value == this.options.selectAllValue : false; | |
// If options.includeSelectAllOption === true, add the include all | |
// checkbox. | |
if (this.options.includeSelectAllOption && this.options.multiple && !alreadyHasSelectAll) { | |
this.$select.prepend('<option value="' + this.options.selectAllValue + '">' + this.options.selectAllText + '</option>'); | |
} | |
this.toggleActiveState(); | |
this.$select.children().each($.proxy(function(index, element) { | |
// Support optgroups and options without a group simultaneously. | |
var tag = $(element).prop('tagName').toLowerCase(); | |
if (tag == 'optgroup') { | |
var group = element; | |
var groupName = $(group).prop('label'); | |
var id=$(group).attr('data-id'); | |
// Add a header for the group. | |
var $li = $('<li><label class="multiselect-group"></label></li>'); | |
$('label', $li).text(groupName); | |
// Add an input for the group to check children elements | |
if(this.options.enableGroupCheck){ | |
$('label',$li).prepend($('<input type="checkbox" class="group-checkbox"/>').data('id',id)); | |
} | |
$('.multiselect-container', this.$container).append($li); | |
// Add the options of the group. | |
$('option', group).each($.proxy(function(index, element) { | |
this.createOptionValue(element,id); | |
}, this)); | |
} | |
else | |
if (tag == 'option') { | |
this.createOptionValue(element); | |
} | |
else { | |
// Ignore illegal tags. | |
} | |
}, this)); | |
// Bind the change event on the dropdown elements. | |
$('.multiselect-container li input', this.$container).on('change', $.proxy(function(event) { | |
if($(event.target).attr('class')==='group-checkbox'){ | |
var groupId=$(event.target).data('id'); | |
$('.multiselect-container li input[data-group-id="'+groupId+'"]').prop('checked',$(event.target).is(':checked')).change(); | |
return; | |
} | |
var checked = $(event.target).prop('checked') || false; | |
var isSelectAllOption = $(event.target).val() == this.options.selectAllValue; | |
// Apply or unapply the configured selected class. | |
if (this.options.selectedClass) { | |
if (checked) { | |
$(event.target).parents('li').addClass(this.options.selectedClass); | |
} | |
else { | |
$(event.target).parents('li').removeClass(this.options.selectedClass); | |
} | |
} | |
var $option = $('option', this.$select).filter(function() { | |
return $(this).val() == $(event.target).val(); | |
}); | |
var $optionsNotThis = $('option', this.$select).not($option); | |
var $checkboxesNotThis = $('input', this.$container).not($(event.target)); | |
// Toggle all options if the select all option was changed. | |
if (isSelectAllOption) { | |
$checkboxesNotThis.filter(function() { | |
return $(this).is(':checked') != checked; | |
}).trigger('click'); | |
} | |
if (checked) { | |
$option.prop('selected', true); | |
if (this.options.multiple) { | |
$option.attr('selected', 'selected'); | |
} | |
else { | |
if (this.options.selectedClass) { | |
$($checkboxesNotThis).parents('li').removeClass(this.options.selectedClass); | |
} | |
$($checkboxesNotThis).prop('checked', false); | |
$optionsNotThis.removeAttr('selected').prop('selected', false); | |
// It's a single selection, so close. | |
$(this.$container).find(".multiselect.dropdown-toggle").click(); | |
} | |
if (this.options.selectedClass == "active") { | |
$optionsNotThis.parents("a").css("outline", ""); | |
} | |
} | |
else { | |
$option.removeAttr('selected').prop('selected', false); | |
} | |
this.updateButtonText(); | |
this.options.onChange($option, checked); | |
this.$select.change(); | |
if(this.options.preventInputChangeEvent) { | |
return false; | |
} | |
}, this)); | |
$('.multiselect-container li a', this.$container).on('touchstart click', function(event) { | |
event.stopPropagation(); | |
$(event.target).blur(); | |
}); | |
// Keyboard support. | |
this.$container.on('keydown', $.proxy(function(event) { | |
if ($('input[type="text"]', this.$container).is(':focus')) | |
return; | |
if ((event.keyCode == 9 || event.keyCode == 27) && this.$container.hasClass('open')) { | |
// Close on tab or escape. | |
$(this.$container).find(".multiselect.dropdown-toggle").click(); | |
} | |
else { | |
var $items = $(this.$container).find("li:not(.divider):visible a"); | |
if (!$items.length) { | |
return; | |
} | |
var index = $items.index($items.filter(':focus')); | |
// Navigation up. | |
if (event.keyCode == 38 && index > 0) { | |
index--; | |
} | |
// Navigate down. | |
else | |
if (event.keyCode == 40 && index < $items.length - 1) { | |
index++; | |
} | |
else | |
if (!~index) { | |
index = 0; | |
} | |
var $current = $items.eq(index); | |
$current.focus(); | |
// Override style for items in li:active. | |
if (this.options.selectedClass == "active") { | |
$current.css("outline", "thin dotted #333").css("outline", "5px auto -webkit-focus-ring-color"); | |
$items.not($current).css("outline", ""); | |
} | |
if (event.keyCode == 32 || event.keyCode == 13) { | |
var $checkbox = $current.find('input'); | |
$checkbox.prop("checked", !$checkbox.prop("checked")); | |
$checkbox.change(); | |
} | |
event.stopPropagation(); | |
event.preventDefault(); | |
} | |
}, this)); | |
}, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
changes on lines: 19, 25-27, 34, 49-53