【问题标题】:How to hide a HTML class for a selected item in google org chart?如何在谷歌组织结构图中隐藏选定项目的 HTML 类?
【发布时间】:2016-07-04 13:48:50
【问题描述】:

我有一个谷歌组织结构图,这是我的source code in JSFIDDLE,我有这个功能

if(collapsed == 0)
     {       
       $(function(){  
           $(".plus").hide();
        });
      }

我有一个名为 plus 的类,它有一张为每个节点显示的图片,但如果节点没有子项,我希望仅对没有子项的项隐藏该类(加图像)。在我的情况下,它隐藏了所有节点,我不需要它。

在我的情况下,人 Carol 没有孩子,他不需要与 Alice 相同的加号图像

谢谢

【问题讨论】:

  • 您想从“Alice”和“Carol”等 0 个子节点的节点中删除加号??

标签: javascript c# jquery html css


【解决方案1】:

您正在使用类选择器隐藏元素,它将隐藏该类存在的所有元素,您应该使用其他选择器标识节点

如果你需要隐藏节点,那么你将不得不更新数据本身,这里是你可以去的。

更新小提琴:http://jsfiddle.net/w8Ytq/102/

var runOnce = google.visualization.events.addListener(chart, 'ready', function() {
    // set up + sign event handlers
    var previous;
    $('#chart_div').on('click', 'div.plus', function () {
        var selection = chart.getSelection();
        var row;
        if (selection.length == 0) {
            row = previous;
        }
        else {
            row = selection[0].row;
            previous = row;
        }
        var collapsed = chart.getCollapsedNodes();
        var collapse = (collapsed.indexOf(row) == -1);

        chart.collapse(row, collapse);
        chart.setSelection();

        // get a new list of collapsed nodes
        collapsed = chart.getCollapsedNodes();

        // set up event listener to recollapse nodes after redraw
        var runOnce2 = google.visualization.events.addListener(chart, 'ready', function() {
            google.visualization.events.removeListener(runOnce2);
            for (var i = 0; i < collapsed.length; i++) {
                chart.collapse(collapsed[i], true);
            }

        });

      var children =chart.getChildrenIndexes(row);
      for(var i=0;i< children.length;i++)
      {
          var childrenOfChildren =     chart.getChildrenIndexes(children[i]);
          if(childrenOfChildren == "")
          {
           var col1 = data.getValue(children[i],0);
           var col2 = data.getValue(children[i],1);
           var col3 = data.getValue(children[i],2);

           data.removeRow(children[i]);
           data.insertRows(children[i], [[col1, col2, col3]]);

          }
      }

        // redraw the chart to account for the change in the sign
        chart.draw(data, options);

    });

【讨论】:

  • 知道如何识别吗?
  • 您可以查看 jquery 选择器以了解其工作原理。请查看 parent、child、children、prev/next 选择器。他们可能会有所帮助
  • @AkshayKhandelwal 你能用代码告诉我该怎么做,因为我不知道 jQuery。
  • @Iamnderon 根据您的要求提供了解决方案。
  • 好答案,但我不同意jsfiddle.net/w8Ytq/100 上的缩进:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-11-28
  • 1970-01-01
相关资源
最近更新 更多