操作 HTML 表，从 Flask 渲染，在 Javascript

Question

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

但是，在我开始编写排序 function 之前，我遇到的问题是以某种方式将 Flask 中呈现的字典表传递到我的 Javascript 文件中。 I believe it would be best to have the html render the table from Flask first, and then have Javascript retrieve the table information straight from the html page.

明确一点，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 %}

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

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"}]

定义一个 function使其成为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']

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

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

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

如果您想更改列的左右顺序，数据表提供了一种方便的方式来本地执行此操作，而无需更改您的 Python 代码。