python - 如何创建“保存并添加另一个”按钮并在 Wagtail 管理模型页面上显示

Question

想知道是否可以在 Wagtail 模型页面中添加一个自定义按钮，这将允许我保存（创建）当前数据字段并移至另一个页面。“保存并添加另一个”按钮已经在 django 中可用，我想在 Wagtail 模型页面上有类似的东西。

谢谢。

Answer 1

Wagtail 有几种方法可以自定义显示在各种 Wagtail 模型管理视图中的内容。

代码示例

第 1 步 - 创建自定义CreateView

• 这将覆盖get_context_data提供create_url.
• 重写该get_success_url方法以允许设置 URL 参数next，如果存在，则下一个 URL 将是 this 而不是默认行为。

产品/wagtail_hooks.py

from wagtail.contrib.modeladmin.views import CreateView
# ... other imports


class CustomCreateView(CreateView):

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['create_url'] = self.create_url
        return context

    def get_success_url(self):
        next = self.request.GET.get('next')
        if next:
            return next
        return super().get_success_url()

class ProductsModelAdmin(ModelAdmin):
    create_view_class = CustomCreateView

第 2 步 - 覆盖模板以添加新按钮

• Wagtail modeladmin 使用模板路径覆盖方法，您需要创建一个与所需覆盖对齐的新模板（例如，我们可能只想覆盖产品模型创建视图。
• templates/modeladmin/products/products/create.html-> 这表示覆盖产品应用程序中产品模型的创建模板。
• 添加下面的代码并检查它是否正常工作，有时模板路径可能有点棘手，因此请确保您可以看到新按钮并且该按钮具有data-next应该是您的创建 URL 的属性。

模板/modeladmin/products/products/create.html

{% extends "modeladmin/create.html" %}
{% load i18n wagtailadmin_tags %}

{% block form_actions %}
  {{ block.super }}
  <div class="dropdown dropup dropdown-button match-width">
    <button type="submit" class="button button-secondary action-save button-longrunning" data-next="{{ create_url }}" data-clicked-text="{% trans 'Saving…' %}">
      {% icon name="spinner" %}<em>{% trans 'Save & add another' %}</em>
    </button>
  </div>
{% endblock %}

第 3 步 - 添加 JS 以在点击时修改表单操作 URL

• 下一步需要一点 JavaScript，我们希望将不同的行为附加到“保存并添加另一个”按钮。
• 这里使用的 JS 不需要 jQuery，应该可以在 IE11 中使用
• 一旦加载了 DOM（这意味着 JS 可以做事），找到所有具有该data-next属性的按钮。
• 为每个按钮的“单击”添加一个侦听器，这将action使用额外的 URL 部分动态更新表单属性。
• 这个额外的 URL 部分由get_success_url自定义创建类中的方法读取，但只有在成功保存时才会读取，否则您将留在页面上并能够修复错误。

{% block extra_js %}
{{ block.super}}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[data-next]').forEach(function(button) {
      button.addEventListener('click', function(event) {
        var form = document.querySelector('.content-wrapper form');
        form.action = form.action + '?next=' + button.dataset.next;
      });
    });
  })
</script>
{% endblock %}