javascript - Vis.js 时间线 - 如何在不嵌套的情况下折叠组

Question

我希望能够通过单击组标题(或其旁边的图标等)来折叠或切换时间轴上特定组的可见性

我见过的用于完成类似功能的所有示例都需要使用嵌套组，然后折叠组，但嵌套模型不适用于我们的数据，我们只想一次能够折叠一个。

我已经弄清楚如何通过设置 className 在初始化时显示折叠的组，但我还没有弄清楚如何动态切换组标签 + 行上的 className。

Answer 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];
}

closeItems 是一个全局数组

plannerMinus 和 plannerPlus 是组名称旁边的图标

当我定义我的组时，我在内容中包含此代码，其中 $employeeID 也是我的组 ID

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

然后看起来像这样