如果class =“node focused”,我如何过滤base.html中的table table-bordered table-sm table-active中的id数据
我想在我的表中只看到所选节点。{d.1} = div id
<div id="TEM01" data-parent="ATK" class="node focused"><div class="title" style="width:200px"><i class="oci oci-leader symbol"></i>ATK</div>
<div id="TEM02" data-parent="ATK" class="node"><div class="title" style="width:200px"><i class="oci oci-leader symbol"></i>ATK</div>
下面的chart.js
nodeClickHandler: function (event) {
this.$chart.find('.focused').removeClass('focused');
$(event.delegateTarget).addClass('focused');
},
css below
.orgchart .node.focused {
background-color: rgba(217, 83, 79, 0.8);
}
下面的base.html。
<body>
<div id="chart-container"></div>
{% block content %}
{% endblock %}
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.orgchart.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<div id=" row justify-content-md-center">
<div class="col-sm">
<h5 align="center"><i><span style="background-color: #262626"
class=" badge badge-info">Node Information </span></i>
</h5>
<table class="table table-bordered table-sm table-active">
<tr>
<th>DVS</th>
<th>DWH</th>
<th>AO_Trap</th>
<th>BO_Trap</th>
<th>Info</th>
</tr>
<tr>
<tbody>
{% for d in alltables %}
<tr>
<td>{{d.1}}</td>
<td>{{d.1}}</td>
<td>{{d.2}}</td>
<td>{{d.3}}</td>
</tr>
{% endfor %}
</tbody>
</tr>
</table>
1条答案
按热度按时间fdbelqdn1#
您可以使用JavaScript/jQuery根据所选节点调整表,类为“node focused”。这可以通过基于所选节点的ID过滤表来完成。看看这个例子,看看它是如何做到的:
通过附加一个响应节点单击的事件侦听器来添加表更新功能。要实现这一点,您需要调整当前JavaScript文件中的代码。
1.要修改表体的结构,请发挥创意并尝试不同的选项。
1.请确保测试您的更改,以确保它们正常工作。
这里是HTML修改后的代码。https://pastebin.com/ssY2xRyS(无法在此处粘贴html。)
在将“focused”类添加到图表中的节点后,仅显示第一列中包含所单击节点ID的表行。这就是过滤的工作方式。其余没有选定ID的行将被隐藏。