Bootstrap

Flask中如何让表格带控件或控件列表并进行前后端交互(最方便方法)

先上图:
最右侧为Input
目标:

  1. 网上大都采用父子Form定义来实现效果,但我研究出更简便的方法;
  2. 后端还是正常只定义一个Form:fix_rate_whole = DecimalField("FixRate",validators=[DataRequired()],default=0)
  3. 视图函数处理时对转化为html之前的df的相应列进行处理:query_df['fFixingrate'] = query_df.apply(lambda x: '''<div class="input-group"><input id="fix_rate" name="fix_rate" type="text" class="form-control input-l" value='%s'></div>''' % x["fFixingrate"], axis=1)
  4. to_html转化df时加参数escape=False,相当于对列内容用了一个eval:rate_input_table = rate_input_df.to_html(classes="table",index=None,escape=False)
  5. 这时在前端用safe嵌入返回的table,发现展示的就是变换后的具体控件了:{{rate_input_table|safe}}
  6. 注意,我们变换df时候给控件赋的id必须等于form相应field名称才能前后关联上
  7. 此时提交Form获得的就是所有控件的值了,问题是提交后如何获得request的系列值呢?在视图函数中用request.form.getlist("fix_rate_whole")即可。

结论:

通过以上方法,table获得了自由展示控件的能力,前后端也可以正常传递完整参数进行处理,而form的复杂度没有增加,个人感觉挺完美的。

;