Умный фильтр обладает бОльшими возможностями и выглядит для заказчика более предпочтительным, чем выше описанный пример. Естественно, что все зависит от конкретной задачи в рамках которой разработчик делает свой выбор. Для описаной здесь реализации использован следующий подход: многоуровневость заложена в [spoiler]свойство инфоблока типа строка и реализовано с помощью перечисления через точку запятой разных данных, первая часть до точки с запятой считается разделом верхнего уровня и должна повторяться у тех элементов которые должны быть объеденены в одну группу. Эти данные приходят из 1С и формируются на основе внутренней структуры 1С, при этом на этапе обмена они трансформируются к виду <занчение1> ; <значение2>. Далее в умном фильтре мы выводим сначала стандартными средствами эти свойства, а после непродолжительного "смотрения" на них по условию ID-свойства "натравливаем" на них JS и получаем структуру как здесь:
Следует заметить, что сгенерированный с помощью JS chekbox верхнего уровня не являются чистыми элементами для филтрации по свойствам, они лишь несут вспомогательную роль для объеденинения в группу свойств и возможности пометить все элементы подгруппы. В рамках показанной реализации этого было достаточно.
if ($arItem[ID]==<ID нужного свойства>){?>
<script type="text/javascript">
var catgroup = $('.cataloggroup');
var textgroup = [];
for (i=0; i<catgroup.length; i++){
textgroup[i] = catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML.split(';',1);
}
var groupname = '';
var str = '';
var checkitem;
for (i=0; i<textgroup.length; i++){
str = textgroup[i].join('');;
if (i==0) {
groupname = str;
var divgrop = document.createElement('div');
divgrop.className = 'groupcat';
var lastId = 'groupcat'+i;
divgrop.id = lastId;
$(catgroup[i].parentNode).append('<span class="labelchek" data-for="'+lastId+'"></span><label class="bx_filter_param_label cataloggroup cathand" id="labelgroup'+i+'" for="arrFilter_group_'+i+'"><span class="bx_filter_input_checkbox"><input type="checkbox" value="Y" name="arrFilter_group_'+i+'" id="arrFilter_group_'+i+'" onclick="checkfunc(\''+lastId+'\', \'arrFilter_group_'+i+'\');"><span class="bx_filter_param_text">'+str+'</span></span></label>');
catgroup[i].parentNode.appendChild(divgrop);
catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML=catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML.replace(str+'; ','');
$(catgroup[i]).appendTo('#'+lastId);
// create div, label, input, span
}
else
if (groupname==str){
catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML=catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML.replace(str+'; ','');
$(catgroup[i]).appendTo('#'+lastId);
// поместить i-ый элемент из catgroup в контейнер
}
else{
checkitem = $('#'+lastId).find('input:checked');
if (checkitem.length>0) {
$('#'+lastId).attr('style','display: block;');
$('[data-for="'+lastId+'"]').addClass('active');
}
// create div, label, input, span
groupname = str;
divgrop = document.createElement('div');
divgrop.className = 'groupcat';
lastId = 'groupcat'+i;
divgrop.id = lastId;
$(catgroup[i].parentNode).append('<div style="clear:both;"></div><span class="labelchek" data-for="'+lastId+'"></span><label class="bx_filter_param_label cataloggroup cathand" id="labelgroup'+i+'" for="arrFilter_group_'+i+'"><span class="bx_filter_input_checkbox"><input type="checkbox" value="Y" class="inpcathand" name="arrFilter_group_'+i+'" id="arrFilter_group_'+i+'" onclick="checkfunc(\''+lastId+'\', \'arrFilter_group_'+i+'\');"><span class="bx_filter_param_text">'+str+'</span></span></label>');
catgroup[i].parentNode.appendChild(divgrop);
catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML=catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML.replace(str+'; ','');
$(catgroup[i]).appendTo('#'+lastId);
}
}
checkitem = $('#'+lastId).find('input:checked');
if (checkitem.length>0) {
$('#'+lastId).attr('style','display: block;');
$('[data-for="'+lastId+'"]').addClass('active');
}
$('.labelchek').click(function(){
$(this).toggleClass('active');
$('#'+$(this).attr('data-for')).toggle();
$(this).parent().parent().height('auto');
});
function checkfunc(param, idinput){
if ($('#'+idinput).prop('checked')==false) {
$('#'+param).find('input:checked').click();
}
else {
$('#'+param).find('input:checked').click();
$('#'+param).find('input').click();
}
}
</script>
<? }
|
Компетентные специалисты оказывают техническую поддержку сайтов на любых CMS