如何在表单字段旁边添加自定义按钮或链接

Question

我正在使用带有crispy_forms 第三方库的Django。我想在表单字段旁边添加一个链接，例如 Django 管理应用程序中的某些表单。我该怎么做？

Answer 1

您选择了一个相当复杂的示例，该示例使用了我什至不推荐的方法。但我会尽量解释你如何看待你所看到的，并保持简短。

即AdminTimeWidget(forms.TimeInput) 和AdminDateWidget 都嵌套在AdminSplitDateTime(SplitDateTimeWidget(MultiWidget)) 中。其中MultiWidget 部分并不重要，这只是将两个小部件绑定在一起以提供一个值（datetime.datetime）的方式。

AdminTimeWidget 是这样的：

class AdminTimeWidget(forms.TimeInput):
    @property
    def media(self):
        extra = '' if settings.DEBUG else '.min'
        js = [
            'vendor/jquery/jquery%s.js' % extra,
            'jquery.init.js',
            'calendar.js',
            'admin/DateTimeShortcuts.js',
        ]
        return forms.Media(js=["admin/js/%s" % path for path in js])

    def __init__(self, attrs=None, format=None):
        final_attrs = {'class': 'vTimeField', 'size': '8'}
        if attrs is not None:
            final_attrs.update(attrs)
super().__init__(attrs=final_attrs, format=format)

这会将DateTimeShortcuts.js 脚本添加到页面（以管理员小部件可以通过form media property 的方式），并且该脚本会迭代输入标签以查找日期和时间输入。

要实现这一点涉及很多机器，但实际上，它只是一个查找日期/时间输入并添加 HTML 客户端的 javascript。

但您可能不想这样做。

正如我所说，这是一个非常复杂的小部件，并且在管理中更难即时更改内容。如果您想编写一个管理小部件，您可能确实想这样做。

但是，如果您已经控制了模板或清晰的布局，则可以插入一些 HTML。 Crispy 有一个 HTML 元素，您可以将其放入布局中。这是well documented。

或者，如果您想要一个可重复使用的小部件，您可以使用自定义模板。从 Django 1.11 开始，Widgets 使用模板来渲染。

1. 创建一个小部件，借用现有小部件以节省时间

   from django.forms import widgets
   
   class DateWithButtonWidget(widgets.DateInput):
       template_name = 'widgets/date_with_button.html'
   

2. 使用您想要的 HTML 自定义模板：

   {% include "django/forms/widgets/input.html" %} <button>MY BUTTON</button>
   

3. 在表单中使用该小部件：

   class MyForm(forms.ModelForm):
       fancydate = forms.DateField(widget=DateWithButtonWidget)
   

当然，将那个按钮连接到做某事完全取决于你。毕竟，您可能需要使用完全脚本化的选项。