Хотя этот вопрос относится к Drupal, я задаю его здесь, потому что у меня есть пример поведения JSFiddle, и знание Drupal не требуется.
Цель
Создатьналоженный более симпатичный флажок для каждого.Пользователь должен иметь возможность проверить / снять их, нажав или с помощью клавиатуры.Флажок «Выбрать все» должен поставить все флажки ниже.Снятие отметки должно снять все их.Если флажок уже установлен, при снятии флажка ниже следует снять флажок «Выбрать все».Кроме того, нажатие на строку должно действовать так, как если бы вы нажимали на флажок.
Проблема
Нажатие на "выбрать все "окна не работает.Это меняет значение дважды, я думаю, из-за кода VBO для щелчка строк.Это можно увидеть, просмотрев то, что вошло в консоль браузера при нажатии одной из них.
JSFiddle: https://jsfiddle.net/42zxng7c/7/
Только JQuery включен ниже.
Сводка разделов кода:
HTML представляет собой небольшую таблицу с имитацией VBO ( Просмотр массовых операций 7.x-3.x)флажки.Верхний флажок - флажок Выбрать все.HTML будет динамически изменен JQuery.
SCSS включает базовую версию некоторых стилей, которые я использую для флажков.Не обращайте на это большого внимания, так как это не слишком важно для вопроса.Он также используется для «скрытия» фактических элементов флажков.
JQuery состоит в основном из трех частей:
Drupal.attachBehaviors Это шаблон и не имеет отношения к делу.Это минимальный кусок drupal.js из Drupal 7.67 для использования Drupal.attachBehaviors ().
var Drupal = Drupal || { 'settings': { 'vbo': { 'row_clickable': true } }, 'behaviors': {} };
Drupal.attachBehaviors = function (context, settings) {
context = context || document;
settings = settings || Drupal.settings;
// Execute all of them.
$.each(Drupal.behaviors, function () {
if ($.isFunction(this.attach)) {
this.attach(context, settings);
}
});
};
$.fn.once = function (events, callback) {
//The handler is executed at most once per element for all event types.
return this.each(function () {
$(this).on(events, myCallback);
function myCallback(e) {
$(this).off(events, myCallback);
callback.call(this, e);
}
});
};
// ( and this part from the end )
//Attach all behaviors.
$(function () {
Drupal.attachBehaviors(document, Drupal.settings);
});
Drupal.behaviors.prettyCheckboxes Это мой код, часть с ошибкой. Здесь я немного изменяю HTML и выполняю некоторую работу по созданию симпатичных флажков и переключателей, которые заменяют обычные.Части переключателя не включены.Любые изменения для устранения проблемы должны произойти в этом разделе.
/**
* Add some JS-based state detection in order to allow prettier checkboxes
* and radio buttons.
*/
Drupal.behaviors.prettyCheckboxes = {
attach: function (context, settings) {
// If there are are a ton of elements, don't bring the browser to a
// screeching halt.
var $elements = $('.form-type-checkbox, .form-type-radio', context);
$elements.each(function () {
// Used for styling purposes.
$('label', this).prepend('<span class="input"></span>');
var $input = $('input', this);
// Add selected state on checkbox inputs.
$('input[type="checkbox"]', this).each(function () {
$(this).change(function (event) {
if (event) {
// Show change events.
console.log($(this).attr('value'));
}
Drupal.behaviors.prettyCheckboxes.toggleCheckbox(this);
// Uncheck the "select all" checkbox in the table header.
var table = $(this).closest('table')[0];
if (table) {
var $selectAll = $('.vbo-table-select-all', table);
Drupal.behaviors.prettyCheckboxes.toggleCheckbox($selectAll);
}
});
Drupal.behaviors.prettyCheckboxes.toggleCheckbox(this);
});
// Check if this is a VBO "select all" checkbox.
if ($input.hasClass('vbo-table-select-all')) {
// Trigger change event on all vbo-select checkboxes on change,
// because VBO updates the properties without triggering the event.
$(this).change(function (event) {
$(this).closest('table').find('.vbo-select').trigger('change');
});
}
});
// if (Drupal.settings.vbo.row_clickable) {
// $('span.input', context).on('click', function () {
// $(this).next('input[type="checkbox"]:not(.vbo-table-select-all)').trigger('click');
// });
// }
},
toggleCheckbox: function (checkbox) {
if ($(checkbox).is(':checked')) {
$(checkbox).closest('.form-type-checkbox').addClass('checked');
}
else {
$(checkbox).closest('.form-type-checkbox').removeClass('checked');
}
//Drupal.attachBehaviors(checkbox);
}
};
Drupal.vbo Некоторый код, который я скопировал из проекта Views Bulk Operations 7.x-3.5 (
views_bulk_operations.js ), который я использую, чтобы показать, как он взаимодействует с моим кодом.Он лицензируется под
GNU GPLv2 .
(function ($) {
Drupal.behaviors.vbo = {
attach: function(context) {
$('.vbo-views-form', context).each(function() {
Drupal.vbo.initTableBehaviors(this);
Drupal.vbo.initGenericBehaviors(this);
});
}
}
Drupal.vbo = Drupal.vbo || {};
Drupal.vbo.initTableBehaviors = function(form) {
$('.vbo-table-select-all', form).show();
// This is the "select all" checkbox in (each) table header.
$('input.vbo-table-select-all', form).click(function() {
var table = $(this).closest('table:not(.sticky-header)')[0];
$('.vbo-select:not(:disabled)', table).prop('checked', this.checked);
});
// Set up the ability to click anywhere on the row to select it.
if (Drupal.settings.vbo.row_clickable) {
$('.views-table tbody tr', form).click(function(event) {
var tagName = event.target.tagName.toLowerCase();
if (tagName != 'input' && tagName != 'a' && tagName != 'label') {
$('.vbo-select:not(:disabled)', this).each(function() {
// Always return true for radios, you cannot de-select a radio by clicking on it,
// it should be the same when clicking on a row.
this.checked = $(this).is(':radio') ? true : !this.checked;
$(this).trigger('change');
});
}
});
}
}
Drupal.vbo.initGenericBehaviors = function(form) {
// Handle a "change" event originating either from a row click or an actual checkbox click.
$('.vbo-select', form).change(function() {
// If a checkbox was deselected, uncheck any "select all" checkboxes.
if (!this.checked) {
$('.vbo-select-this-page', form).prop('checked', false);
$('.vbo-select-all-pages', form).prop('checked', false);
// Modify the value of the hidden form field.
$('.select-all-rows', form).val('0')
var table = $(this).closest('table')[0];
if (table) {
// Uncheck the "select all" checkbox in the table header.
$('.vbo-table-select-all', table).prop('checked', false);
}
}
});
}
})(jQuery);
Я часами работал над этим и исправил некоторые другие проблемы, которые у меня были, но до сих пор не могу понять, почему флажки не работают иликак я могу адаптировать свой код, чтобы исправить это хорошим способом .В моем разделе есть закомментированный код, который может работать в качестве обходного пути, но это плохо, поскольку он просто запускает событие click снова для каждого флажка.
Любая помощь была бы полезной,Спасибо.