javascript - 在 Javascript 中操作从 Flask 呈现的 HTML 表格

Question

我仍在学习一切是如何工作的，但我正在尝试将一个项目放在一起，该项目有一个需要排序的表格。我正在使用烧瓶来生成页面，并计划将表的信息保存在 sql 中。目前，我正在使用一个硬编码的字典表，最终将从这个 sql 数据库转换。我已经成功地让我的 html 页面将烧瓶表格元素加载到网页上的表格中。但是，我希望让用户能够对这个表进行排序，并且我相信使用 Javascript 将是做到这一点的最佳方式。

但是，在我开始编写排序函数之前，我遇到的问题是以某种方式将 Flask 中呈现的字典表传递到我的 Javascript 文件中。我相信最好先让 html 从 Flask 渲染表格，然后让 Javascript 直接从 html 页面检索表格信息。

需要明确的是，Flask 中表格的格式是这样的：

items = [{'item 1': "Name", 'item 2': "Name"}, {'item 1': "Name2", 'item 2': "Name2"}]

并在 html 页面中呈现，如下所示：

            {% for row in items %}
            <tr>
                <td class="item1">{{ row.item1 }}</td>
                <td class="item2">{{ row.item2 }}</td>
            </tr>
            {% endfor %}

不知何故，我想在 Javascript 中使用 html 页面作为其源来呈现相同的“items”变量。我已经能够找到解释 Javascript 中的排序函数的教程，但是，这些教程假设该表已经存在于 JS 中，我不确定如何像这样动态呈现它。有谁知道我会怎么做？谢谢。

标签： javascripthtmlflask

Answer 1

如前所述，数据表非常适合您的前端，因为它会自动处理所有分页、排序和搜索功能。

您可能希望查看 repo search-generic-tables。这是我使用 SQLite 数据库的实现，但您可能正在寻找的大部分内容都在那里。

模板的构建方式使得数据不会被硬编码到其中。许多 Flask 教程涉及将标头硬编码到模板<td>Header Name</td>中，这会阻止模板变得通用。

如果您不想克隆整个 repo，您​​可能只需从模板文件夹中复制两个模板，其中包括使数据表工作所需的 CDN 链接。

要使用您的代码进行此操作，（请注意以下假设您列表中的每个字典都具有相同的键！）您可以执行以下操作。让我们调用您的字典列表original_items并为清晰起见使值唯一：

original_items = [{'item 1': "Banana", 'item 2': "Car"}, {'item 1': "Apple", 'item 2': "Bike"}]

定义一个函数，使它成为一个列表OrderedDicts。这将使表中的列顺序保持可预测：

import collections
def sort_dict(d):    
    return collections.OrderedDict(sorted(d.items()))

ods = [sort_dict(d) for d in original_items]

现在将它们变成列表列表：

table_items = [ list(v for _,v in od.items()) for od in ods]

table_items现在是一个列表列表，如下所示：

[['Banana', 'Car'], ['Apple', 'Bike']]

然后从列表中的第一个字典中获取标题ods：

headers = [k for k,_ in ods[0].items()]

headers现在看起来像：

['item 1', 'item 2']

因此，将这些传递给模板变得像视图函数一样简单，如下所示：

@app.route('/all')
def all():
    return render_template('index.html', headers=headers, objects=table_items)

这在浏览器中很好地呈现：

如果你想改变列的左右顺序，datatables 提供了一种方便的方式来在本机上执行此操作，而无需更改 Python 代码。