时间戳

首页 > 解决方案 > flask_table 在 buttonCol 表单上发送整行数据

javascript - flask_table 在 buttonCol 表单上发送整行数据

问题描述

示例表 这个表是用 flask_table 创建的，它显示来自数据库的数据。表格的每一行看起来都与此示例类似，并带有一个登录按钮。

目前，当我单击登录按钮时，它会附加该项目的数据库 ID 以形成返回到 python 烧瓶的操作端点。

这是在 flask_table 中设置表的方式：

class myTable(Table):
id = Col('id', show = False)
sign_in_button = ButtonCol('Sign In', 'endpoint_to_send_form_to', url_kwargs=dict(id='id'))

因此，鉴于此...当前，当我单击登录按钮时（假设该项目在数据库中的 ID 号为 1）。它使表单 action= "/endpoint_to_send_form_to/1"

这就是它在烧瓶中的接收方式：

@app.route('/endpoint_to_send_form_to/<int:id>', methods=['POST'])
def endpoint_to_send_form_to(id):
    #doing python/flask stuff

然后我可以对数据库中的那个项目做 python/flask 的事情，因为我知道它的 id，但是，我想要的是：

单击按钮后，还会收到“课堂、活动和基金选择”选项的发布信息（仅在单击的按钮所在的行中）。我想知道是否有一种flask_table 方法可以做到这一点，但老实说，我目前正在考虑查看javascript 是否可以将该数据添加到表单中。

我想我应该能够通过以下方式获取该表单数据：

data = request.form.get("nameOfForm")
data.classroom
data.activity
data.fund

标签： javascriptpythonflaskrequest

解决方案

所以我想我问这个问题需要深入挖掘并阅读一些文档才能提出解决方案。

文档：

https://flask-table.readthedocs.io/en/latest/

首先，我想纠正一些我以前认为但错误的东西：

data = request.form.get("nameOfForm")
data.classroom
data.activity
data.fund

我在想我必须给出表单的名称，但我可以直接获取表单中元素的名称：

element = request.form.get("nameOfElementInForm")  #as shown at the bottom of this page

我仍然可以使用 flask_table 来让它工作，但是我也需要使用 javascript。

在烧瓶表中：

class myTable(Table):
id = Col('id', show = False)
sign_in_button = ButtonCol('Sign In', 'endpoint_to_send_form_to', url_kwargs=dict(id='id'), form_hidden_fields={'class_number':'test_class','activity':'test_activity','fund':'test_fund'}, button_attrs={'onclick':'update_form_info(this)'})

文档说：

“您可以使用 form_hidden_​​fields kwargs 传递隐藏字段的字典以添加到表单元素中。键将用作名称属性，值将用作值属性。”

我只是用值填充它们以进行测试，并且当我在 DOM 中找到它们时要打印一些东西，无论如何我都会覆盖它们。

文档还说：

您可以使用 button_attrs kwarg 传递属性字典以添加到按钮元素。

我用它来添加一个 onclick 函数并传入“this”，这样我就可以点击该按钮以确保我正在搜索并编辑正确的数据行。

在 Javascript 中

function update_form_info(ele) {
        var $row = ele.closest('tr')
        var classroom = jQuery('td:nth-child(6) select', $row).val()
        var activity = jQuery('td:nth-child(7) select', $row).val()
        var fund = jQuery('td:nth-child(8) select', $row).val()

        var $hidden_eles = ele.closest('td')
        jQuery('input:nth-child(1)', $hidden_eles).val(activity)
        jQuery('input:nth-child(2)', $hidden_eles).val(classroom)
        jQuery('input:nth-child(3)', $hidden_eles).val(fund)

由于表结构是相同的，我确切地知道哪个列号包含我正在寻找的内容，我了解了 .closest('some element type') ，它从元素开始，然后上升到最近的元素类型的 DOM . 无论如何，我找到了在表格选项选择字段中选择的元素并更新了表单内的隐藏元素，所以现在我们可以做我们的烧瓶/python 的东西了。

在 Python 中：

activity = request.form.get("activity")
class_number = request.form.get("class_number")
fund = request.form.get("fund")

现在我们在 python 中得到了我们的值！

推荐阅读