Flask/Jinja - 在不刷新页面的情况下，在单击或计时器上重新呈现 UITab

Question

我有一个带有 Jinja 模板的 Flask 服务器，它正在跟踪网络 PC 的当前状态。下面是设置的屏幕截图。

顶部的每个仪表代表该工作组中活动客户端的数量，但也是仅查看该工作组的过滤器。

每个量规代表一个UITab。当我单击 Gauge 时，它会将我带到选项卡，并使用 Jinja 比较来检查它是否属于选项卡的 table。

问题 - 我想动态更新页面，而不刷新。目前，仪表会上下调节，动态没问题，但数据 table 没有正确重新渲染。

如果我将工作站从 workgroup01 移动到 workgroup02，仪表将节流，但行项目不会移动到正确的 table。我在仪表的计时器上使用 AJAX，但我需要以某种方式重新触发 computer.current_workgroup == workgroup 检查，以便在 table

上获得动态更新

这可以用 Jinja 做，还是我必须写一个很长的自定义函数来做这个？出于后勤原因，我试图避免定制工作。

这里有一些与文档流相关的代码，我已尝试删除非必要代码，如果需要更多请告诉我。

index.html

<div id="tabs" >
    <ul id="gaugeList">
        {% for workgroup in context['workgroup_list'] %}
            <li><h3>
                <a class="gaugeCell" id="{{ workgroup }}"
                   href="#tabs-{{ workgroup.name }}">

                <script type="text/javascript">
                    //  The  gauges
                </script>
                </a></h3></li>
        {% endfor %}
    </ul>

    {% for workgroup in context['workgroup_list'] %}

    <div id="tabs-{{ workgroup.name }}" class="scrollable">

        <table class="tablesorter">

            <thead>
            <!-- Header stuff -->
            </thead>

            <tbody id="{{workgroup.name}}_table" class="table_body">
                {% for computer in context['computer_list'] %}


                {% if (computer.current_workgroup == workgroup.shorthand) or (workgroup.name == 'All') %}

                <tr id="{{computer.name}}" class="parent">
                <td>
                <-- TD's for table --> 
                </td>




            {% endif %}
            {% endfor%}
            </tbody>

        </table>
        </div>


    {% endfor %}

有什么想法吗？感谢阅读

Answer 1

我不相信它可以直接使用 jinja2 实现，我会制作一个额外的控制器，returns HTML 仅用于 table（没有 html, header, body-tags 等等），为此你可以使用 jinja2 模板。

如果你有这个，使用 jquery 的 .load()，你可以每 n 秒从这个控制器获取数据并从主页更新适当的 div。 http://api.jquery.com/load/

Flask/Jinja - 在不刷新页面的情况下，在单击或计时器上重新呈现 UITab

Flask/Jinja - Rerender UITab on Click Or Timer without page refresh

javascript

python

jinja2

jquery-ui-tabs

flask

index.html