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

Posted 2023-05-08

【中文标题】Vis.js 时间轴 - 如何在不嵌套的情况下折叠组

【英文标题】：Vis.js Timeline - How to collapse a group without nesting

【发布时间】：2019-05-11 21:06:06

【问题描述】：

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

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

我已经想出了如何通过设置类名在初始化时将组显示为折叠，但我还没有想出如何动态切换组标签+行上的类名。

【问题讨论】：

All examples I've seen for accomplishing similar functionality requires using nested groups。那是因为这是最好的方法。 but the nested model does not work for our data。为什么不？是因为如果从服务器中取消嵌套，您就没有得到吗？如果是这样，没有什么能阻止您在客户端上创建自己的嵌套模型。

@Geert-Jan 这对我们来说没有意义，因为我们的组本身并没有“分组”——我们的组层次结构中只有一个级别

抱歉，在这种情况下再次阅读“组”是 vis.js 特有的，而不是一般数据结构意义上的分组。不确定，但您能否将点击事件处理程序附加到组以切换提到的类名？

@Geert-Jan 是的，只是想在初始化组后获得有关如何访问组的帮助，因为我在模块上看不到检索组的方法（它们不仅仅是 dom元素）。而且我在文档中没有看到任何迹象表明您可以动态更改组属性。在 vis.js 中，组是时间线的行。

【参考方案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 也是我的群组 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>'

然后看起来像这样