如何获取Grid.js Redux Store中的state值并提交至Flask后端

你当前代码的核心问题是按钮value里写的{{state}}是Jinja2在服务端渲染时生成的静态值，不会随前端Grid.js的复选框选中状态自动更新，只要在复选框状态变化时实时把选中值同步到表单控件上，提交时就能正常传给Flask后端。

具体操作步骤：

• 给表单增加一个隐藏输入框，专门用来存储实时更新的选中行数据，避免直接修改按钮value带来的逻辑混乱
• 在Grid.js复选框Store的updated回调里，把拿到的选中状态序列化为JSON字符串（直接传JS对象会被转成无意义的[object Object]），赋值给隐藏输入框的value属性
• Flask后端收到表单数据后，把JSON字符串解析为Python对象即可使用

修改后的前端代码示例：

<script>
grid.on('ready', () => {
  const checkboxPlugin = grid.config.plugin.get('selectRow');
  checkboxPlugin.props.store.on('updated', function (state) {
    console.log('checkbox updated', state);
    // 按需提取你需要传的字段，比如只传选中行ID：const submitData = JSON.stringify(state.selectedRowIds)
    const submitData = JSON.stringify(state);
    // 把选中数据同步到表单隐藏域
    document.getElementById('selected-data').value = submitData;
  });
});
</script>

<form method="POST" action="{{ url_for('about') }}">
  <!-- 隐藏域存储实时选中数据，name属性对应后端接收的字段名 -->
  <input type="hidden" name="selected_rows" id="selected-data" value="">
  <!-- 按钮标签内写需要显示的按钮文案，value可以存操作类型 -->
  <button name="activity" class="btn btn-danger" type="submit" value="batch_op">批量处理选中项</button> 
</form>

Flask后端接收解析示例：

from flask import request
import json

@app.route('/about', methods=['POST'])
def about_view():
    # 拿到操作类型
    activity_type = request.form.get('activity')
    # 拿到选中数据的JSON字符串并解析
    selected_rows = []
    selected_str = request.form.get('selected_rows')
    if selected_str:
        selected_rows = json.loads(selected_str)
    
    # 后续写你的业务逻辑即可，selected_rows就是前端传的选中状态
    print(activity_type, selected_rows)
    return "处理完成"

提示：不需要把整个state对象都传给后端，建议在序列化前只提取你需要的字段（比如选中行的主键ID列表），能减少传输数据量，也能简化后端解析逻辑。

内容的提问来源于stack exchange，提问作者bakerjam92