Vis.js Timeline - Как свернуть группу без вложенности - PullRequest
Новая
       36

Vis.js Timeline - Как свернуть группу без вложенности

0 голосов
/ 11 декабря 2018

Я хотел бы иметь возможность свернуть или переключить видимость определенных групп на временной шкале, щелкнув заголовок группы (или значок рядом с ним и т. Д.)

Все примеры, которые я виделдля выполнения аналогичной функциональности необходимо использовать вложенные группы, а затем свернуть группу, но вложенная модель не работает для наших данных, и мы хотим иметь возможность свернуть только одну за раз.

Я понял, какпоказать группу как свернутую при инициализации, установив className, но я не понял, как переключить className на метке группы + строке на лету.

1 Ответ

0 голосов
/ 21 мая 2019

Я использую эти функции для удаления / отображения всех элементов в группе 

    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>'

Тогда это выглядит так open group closed group

...