Question

我不想用按钮切换所有组。我只想用组标题左侧的小三角按钮一次切换各个组。

目前，我可以单击按钮，三角形旋转90度，但嵌套组仍然可见。

我在GitHub上看过这个问题和类似的问题但是还没有让我到那儿。

以下是我如何配置时间线...

var container = document.getElementById('timelinez');
var items = new vis.DataSet();
var visibleData;

// Configure groups
//var groupLabelHTML = '<p style="margin:0px;padding:0px;">'+name+'<br><a href='+URL+'><img style="height:14px" src='+arrowURL+'></a></p>';
var groups = [
    {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
    {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
    {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
    {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
    {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
    {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
    {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
    {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

    {id: 'x1_APs',content: 'APs'},
    {id: 'x2_APs',content: 'APs'},
    {id: 'x3_APs',content: 'APs'},
    {id: 'x4_APs',content: 'APs'},
    {id: 'x5_APs',content: 'APs'},
    {id: 'x6_APs',content: 'APs'},
    {id: 'x7_APs',content: 'APs'},
    {id: 'x8_APs',content: 'APs'}
];

// Configuration for the Timeline
var options = {
    width: '100%',
    type:'range',
    groupOrder: 'content',
    editable: true,
    groupEditable: true,
    orientation: 'top',
    tooltip:{followMouse:true},
    start: new Date(Date.now()),
    end: new Date(sixWeek), 
    groupTemplate: function (group) {
        var container = document.createElement('div');
        var label = document.createElement('span');
        var hide = document.createElement('img');
        label.innerHTML = group.content + ' ';
        label.style = "font-size:15px";
        container.insertAdjacentElement('afterBegin',label);
        hide.src = "cant show this";
        hide.className = "hide-btn";

        if (!(group.id.indexOf("_APs") >= 0)) {
            container.insertAdjacentElement('beforeEnd',hide);  
        }   

        return container;
    }
};

我无法展示更多代码，因为删除专有内容非常繁琐。这是我如何创建项目......

items.add({group:sys,content:name,title:toolTip,start:start,end:end,className:color,variety:type,subgroup:subgroup,system:sys,linkHTML:linkHTML});

如何切换这些嵌套组的可见性？

Answer 1

解决方案是将组创建为数据集而不是数组。

换句话说。此...

var groups = [
   {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
   {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
   {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
   {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
   {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
   {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
   {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
   {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

   {id: 'x1_APs',content: 'APs'},
   {id: 'x2_APs',content: 'APs'},
   {id: 'x3_APs',content: 'APs'},
   {id: 'x4_APs',content: 'APs'},
   {id: 'x5_APs',content: 'APs'},
   {id: 'x6_APs',content: 'APs'},
   {id: 'x7_APs',content: 'APs'},
   {id: 'x8_APs',content: 'APs'}
];

改为此...

var groups = new vis.DataSet();
groups.add([
   {id: 'x1',content: 'x1', nestedGroups: ['x1_APs']},
   {id: 'x2',content: 'x2', nestedGroups: ['x2_APs']},
   {id: 'x3',content: 'x3', nestedGroups: ['x3_APs']},
   {id: 'x4',content: 'x4', nestedGroups: ['x4_APs']},
   {id: 'x5',content: 'x5', nestedGroups: ['x5_APs']},
   {id: 'x6',content: 'x6', nestedGroups: ['x6_APs']},
   {id: 'x7',content: 'x7', nestedGroups: ['x7_APs']},
   {id: 'x8',content: 'x8', nestedGroups: ['x8_APs']},

   {id: 'x1_APs',content: 'APs'},
   {id: 'x2_APs',content: 'APs'},
   {id: 'x3_APs',content: 'APs'},
   {id: 'x4_APs',content: 'APs'},
   {id: 'x5_APs',content: 'APs'},
   {id: 'x6_APs',content: 'APs'},
   {id: 'x7_APs',content: 'APs'},
   {id: 'x8_APs',content: 'APs'}
]);

现在，嵌套组可见性按组的名称通过箭头按预期切换。

Vis.js时间轴无法切换嵌套组

1 个答案: