添加填充Flask-Admin内置模板中其他字段的按钮

时间:2018-06-02 22:43:18

标签: flask flask-admin

我想在我的Flask-Admin创建视图中添加一个按钮,然后在this question之后设法执行此操作。

现在,假设模型传递给该视图,请说User

  • ClassAClassB一对多关系
  • ClassAClassB
  • 之间也存在一对多关系

假设在我的创建视图中,我在创建ClassA的实例时添加了User的一些实例,比如说my_class_a_instance,我希望这个按钮:< / p>

  • my_class_a_instance执行查询,并在此时返回与ClassB(或my_class_b_instance s)相关的任何实例
  • 使用这些结果填充创建模板中的form.class_b字段
  • 如果可能的话,弹出一些模式窗口,提示用户进行确认。可以使用@action

到目前为止,我的方法是这样的:

# templates/admin/cascade_button_create.html

{% extends 'admin/model/create.html' %}

{% block body %}

{% call lib.form_tag(form) %}
<div class="row">
  <div class="col-xg-10">
    {{ lib.render_form_fields([form.name])}}
  </div>
</div>

<div class="row">
    <div class="col-xg-10">
        <!-- form.cities follows the attributes of sqla model -->
      {{ lib.render_form_fields([form.instances_of_a])}}
    </div>
    <div class="col-xg-2">
        <!-- so this button should query any model related to form.cities 
        and populate the create form with whatever comes out.

        Say Street has a one to many relationship, I want this 
        button to run some method of the form get_instances_of_b_from_instance_of_a(form.instances_of_a) (query_method() for short) that fills
        the field form.instances_of_b

        If possible I would like to pop up a modal window prompting the user
        to confirm this before filling this field.-->
      <a href="{{ query_method() }}" class="btn btn-default">Add with cascade</a>
    </div>
</div>


<div class="form-buttons">
  {{ lib.render_form_buttons(return_url) }}
</div>
{% endcall %}
{% endblock %}-

我会像文档中所说的那样注册这个视图

# admin/views.py

class CascadesView(ModelView):

    create_template = 'admin/cascade_button_create.html'

我还没有找到相关信息,而且模板没有很多有用的评论。

谢谢!

编辑:

我已经复制了flask-admin回购中的示例,并将我的https://github.com/diegoquintanav/flask-admin-autopopulate设置为

1 个答案:

答案 0 :(得分:1)

我进一步了解它,这似乎是非常具体的行为,这在flask-admin中没有实现。我继续前进,看看它无论如何,我能想到的唯一方法就是使用Ajax和特殊的api路径。

所以我已将此添加到您的js:

<a href="#" class="btn btn-default" onClick="retrieve_location_b_ids()">Add with cascade</a>
<script>
function retrieve_location_b_ids(){

  // make sure that the user wants to preload the b locations
  if (confirm('load location b connected to location a?')){
    // look for the selected options
    var selected_a_locations = $('#s2id_sub_locations_a').select2("val");

    // request the b_ids using the a_ids provided by the user using ajax
    var oData = new FormData();
    oData.append('selected_a_locations', JSON.stringify(selected_a_locations));
    var oReq = new XMLHttpRequest();
    oReq.open("POST", "{{url_for('look_up_b_locations_connected_to_a_locations')}}", true);
    oReq.onload = function(oEvent) {
      if (oReq.status == 200) {
        // get the correct b ids back from the ajax request, and use them to load the select2 field
        var selected_b_ids_list = JSON.parse(oReq.responseText)
        $('#s2id_sub_locations_b').select2('val', selected_b_ids_list);
      } else {
        alert("Error " + oReq.status + " occurred when retrieving the ids")
      }
    };
    oReq.send(oData);
  }
}

</script>

和处理此请求的烧瓶路线:

@app.route('/api/look_up_b_locations_connected_to_a_locations', methods=['POST'])
def look_up_b_locations_connected_to_a_locations():
    # use a set in case the same b location is in multiple a locations to prevent duplicates
    b_location_set = set()
    a_location_list = json.loads(request.form['selected_a_locations'])
    for a_location_id in a_location_list:
        a_location = SubLocationA.query.get_or_404(a_location_id)
        for b_location in a_location.sub_sub_locations_b:
            b_location_set.add(str(b_location.id))
    return jsonify(list(b_location_set))

它似乎工作得很好,处理大多数边缘情况(我希望)。