Временная шкала Vis.js - Как свернуть группу без вложенности
Я хотел бы иметь возможность сворачивать или переключать видимость определенных групп на временной шкале, щелкнув заголовок группы (или значок рядом с ним и т. д.)
Все примеры, которые я видел для выполнения аналогичных функций, требуют использования вложенных групп, а затем сворачивания группы, но вложенная модель не работает для наших данных, и мы хотим иметь возможность сворачиваться только по одной за раз.
Я понял, как показать группу как свернутую при инициализации, установив className, но я не понял, как переключать className на метке группы + row на лету.
@ Geert-Jan это не имеет для нас смысла, потому что наши группы не «сгруппированы» сами по себе - у нас есть только один уровень в нашей иерархии групп
Извините, повторное чтение «групп» в этом контексте - это специфическая вещь vis.js, а не группировка в общем смысле структуры данных. Не уверен, но сможете ли вы прикрепить к группе обработчик события щелчка, чтобы переключить упомянутое имя класса?
@ Geert-Jan да, просто пытаюсь получить помощь с тем, как получить доступ к группам после их инициализации, потому что я не вижу в модуле метода для получения групп (это не просто элементы dom). и я не вижу в документации никаких указаний на то, что вы можете изменять свойства группы на лету. в vis.js группы - это строки шкалы времени.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я использую эти функции, чтобы удалить / показать все элементы в группе
function plannerCloseGroup(groupID){
// retrieve all items having a property group with value groupID
var itemsFiltered = items.get({
filter: function (item) {
return (item.group == groupID);
}
});
closedItems[groupID] = itemsFiltered;
items.remove(itemsFiltered);
$("#plannerMinus_" + groupID).addClass("hidden");
$("#plannerMinus_" + groupID).removeClass("display");
$("#plannerPlus_" + groupID).removeClass("hidden");
$("#plannerPlus_"+ groupID).addClass("display");
}
function plannerOpenGroup(groupID){
items.update(closedItems[groupID]);
$("#plannerMinus_" + groupID).addClass("display");
$("#plannerMinus_" + groupID).removeClass("hidden");
$("#plannerPlus_" + groupID).removeClass("display");
$("#plannerPlus_" + groupID).addClass("hidden");
delete closedItems[groupID];
}
closedItems - это глобальный массив
plannerMinus og plannerPlus - значки рядом с названием группы
Когда я определяю свои группы, у меня есть этот код в содержимом, где $ employeeID также является моим groupID.
'<span id = "plannerPlus_'.$employeeID.'" class = "hidden"><img src = "images/planner-plus-grey.gif" width=10 height=10 onclick = "plannerOpenGroup('.$employeeID.')"> </span><span id = "plannerMinus_'.$employeeID.'" class = "display"><img src = "images/planner-minus.gif" width=10 height=10 onclick = "plannerCloseGroup('.$employeeID.')"> </span>'
All examples I've seen for accomplishing similar functionality requires using nested groups. Потому что это лучший способ сделать это.but the nested model does not work for our data. Почему нет? Это потому, что вы не получаете unnested с сервера? В таком случае ничто не мешает вам создать собственную вложенную модель на клиенте.