我有一个flask网络应用程序,该应用程序呈现了Jinja2模板,该模板在表单中显示多个字段。该表单表示数据库中的两个表,这些表之间是一对多的关系。
记录班级
class Record(db.Base):
__tablename__ = 'metadata_record_version'
id = Column(Integer, primary_key=True)
number = Column(Float, nullable=False)
其他属性类
class Extra(db.Base):
__tablename__ = 'extra'
id = Column(Integer, primary_key=True)
record_id = Column(Integer, ForeignKey('metadata_record_version.id'), nullable=False)
key = Column(String(256), nullable=False)
value = Column(String, nullable=False)
metadata_record_version = relationship("MetadataRecordVersion")
该表格允许用户向包含多余行的表中动态添加更多行。用户可以通过单击表单上调用相关javascript函数的+和-按钮来实现此目的。我的代码的这一部分效果很好,目前看起来像:
Template.html
<form>
<!-- Other Form attributes here -->
<table id="extra-table">
<tr>
<th class="col-md-4">Property</th>
<th class="col-md-4">Value</th>
<th class="col-md-4"></th>
</tr>
{% for extra in form.extras %}
<tr>
<td>{{ extra.key(class_="form-control") }}</td>
<td>{{ extra.value(class_="form-control") }}</td>
<td>
<button type="button" class="btn btn-danger"
onclick="removeExtraRow(this)">
Remove <i class="fas fa-minus"></i>
</button>
</td>
</tr>
{% endfor %}
<button type="button" class="btn btn-info" onclick="addExtraRow()">
Add Row <i class="fas fa-plus"></i>
</button>
</table>
</form>
Template.html中的 <script>
标签
// Function to add a row to the Extra Properties Table
function addExtraRow() {
let table = document.getElementById("extra-table");
let row = table.insertRow(-1);
row.contentEditable = "true";
row.insertCell(0);
row.insertCell(1);
let cell3 = row.insertCell(2);
cell3.innerHTML = "
<button type=\"button\" class=\"btn btn-danger\" onclick=\"removeExtraRow(this)\"> Remove <i class=\"fas fa-minus\"></i> </button>";
}
// Function to remove a row from the extra properties table
function removeExtraRow(x) {
let i = x.parentNode.parentNode["rowIndex"];
let table = document.getElementById("extra-table");
table.deleteRow(i);
}
我面临的问题是正确接收表单数据并将其传递到WTForms中。
如何在WTForms中为动态长度表建模?当前,当将一行添加到表中时,它无法正确地将其发布回视图中。
当前表格。py
class ExtraForm(Form):
key = StringField('Property')
value = StringField('Value')
class Edit(FlaskForm):
version_number = FloatField('Version Number')
extras = FieldList(FormField(ExtraForm)
编辑:通过使用FieldList(FormField(ExtraForm))
在一对多关系方面取得了进步。
答案 0 :(得分:0)
我能够通过向表中添加与WTForm生成的内容相同的格式的行来解决此问题。以下是用于添加新的extra
行的函数。
function addExtraRow() {
let table = document.getElementById("extra-table");
let length = table.rows.length + 1;
let row = table.insertRow(-1);
let keyCell = row.insertCell(0);
let valCell = row.insertCell(1);
let cell3 = row.insertCell(2);
keyCell.innerHTML = "<span class=\"bmd-form-group is-filled\"><input class=\"form-control\" id=\"extras-" + length + "-key\" name=\"extras-" + length + "-key\" required=\"\" type=\"text\" value=\"\"></span>";
valCell.innerHTML = "<span class=\"bmd-form-group is-filled\"><input class=\"form-control\" id=\"extras-" + length + "-value\" name=\"extras-" + length + "-value\" required=\"\" type=\"text\" value=\"\"></span>";
cell3.innerHTML = "<button type=\"button\" class=\"btn btn-danger\" onclick=\"removeExtraRow(this)\"> Remove <i class=\"fas fa-minus\"></i> </button>";
}
通过查看页面源来提取要插入单元格的InnerHTML属性的内容。