Question

我正在使用Google组织结构图，我已经准备了结构图，但是现在我想在Google组织结构图中实现搜索功能，所以我已经放置了一个文本框，并且在文本框键入事件中我在其中添加了边框新课程。

我在这里提供代码

jQuery代码

  google.charts.load('current', {packages:["orgchart"]});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');

    // For each orgchart box, provide the name, manager, and tooltip to show.
    data.addRows([
      [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
       '', 'The President'],
      [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
       'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
    ]);

    // Create the chart.
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    // Draw the chart, setting the allowHtml option to true for the tooltips.
    chart.draw(data, {'allowHtml':true});
    loadjs();
  }
  
  function loadjs() {
    $("#txtsearch").keyup(function () {
        var srch = $(this).val().toLowerCase();
        if (srch != "" && srch.length >= 2) {
            $('.google-visualization-orgchart-table tr').filter(function () {
            var tdval = $(this).text().toLowerCase();
                        if (tdval.indexOf(srch) > -1) {
                            $(this).children().addClass("searchnode");
                        }
                });
        }
        else {
            $('.google-visualization-orgchart-table tr >td').each(function () {
                $(this).removeClass("searchnode");
            });
        }
    });
}

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<input type="text" id="txtsearch" style="float:right" class="form-group" />
<div id="chart_div"></div>

CSS

.searchnode {
    border: 2px solid #e34b4b;
}

这也是jsfiddle链接，我无法超链接fiddle链接https://jsfiddle.net/8429foam/8/，它在发布帖子时显示错误。

一切正常，它在td中添加了类，但我不知道为什么边框不适用于搜索单元格。

任何帮助或建议将不胜感激。

谢谢。

Answer 1

您几乎可以正常使用，但我已经更改了2件事：

$('.google-visualization-orgchart-table tr td').filter(function () {
    var tdval = $(this).text().toLowerCase();
    if (tdval.indexOf(srch) > -1) {
        $(this).addClass("searchnode");
    }
});

我已经在选择器中添加了td，并删除了.children()

.searchnode {
    border: 2px solid #e34b4b!important;
}

Google的CSS会覆盖您的边框，因此我添加了!important。

您可以在这里尝试。 https://jsfiddle.net/gpnuhj0r/

Google组织结构图中的搜索功能

jQuery代码

HTML

CSS

1 个答案: