python - 将 Textarea 用于 CSVWidget 和 django-filter

Question

我使用 django-filter为大型数据集提供搜索表单。它适用于想要提供样本 ID 并获得过滤列表的科学家。

为此，我想要 <textarea>而不是 <input type="text">因为他们只会一次粘贴十几个或更多 ID，如果他们对提交的值有概览就更好了。

这是我的代码:

from django import forms
import django_filters as filters

class TextareaCSVWidget(filters.widgets.BaseCSVWidget, forms.Textarea):
    """
    The widget should create textarea.
    """
    pass

class CharInFilter(filters.BaseInFilter, filters.CharFilter):
    """
    The filter should accept coma separated strings.
    """
    pass

class SampleFilter(filters.FilterSet):
    sample_ids = CharInFilter(
        name='sample_id',
        widget=TextareaCSVWidget()
    )

现在文本区域已正确显示。搜索按预期工作。

但是有一个奇怪的问题:当我输入多个值(以逗号分隔)时，在提交搜索表单后文本区域被 <input type="text"> 取代(输入的值被保留)。这看起来很尴尬，我需要防止这种行为。

如果我在文本区域中输入单个值，则不会发生这种情况。

我的方法有什么问题？

编辑:

发布问题后，我仔细查看了 django-filter 的源代码这是类(class)的相关部分BaseCSVWidget我用它来创建 TextareaCSVWidget :

def render(self, name, value, attrs=None):
    if not self._isiterable(value):
        value = [value]

    if len(value) <= 1:
        # delegate to main widget (Select, etc...) if not multiple values
        value = value[0] if value else ''
        return super(BaseCSVWidget, self).render(name, value, attrs)

    <strong># if we have multiple values, we need to force render as a text input
    # (otherwise, the additional values are lost)
    surrogate = forms.TextInput()</strong>
    value = [force_text(format_value(surrogate, v)) for v in value]
    value = ','.join(list(value))

    return surrogate.render(name, value, attrs)

强调的部分是决定性的。我现在应该怎么做？覆盖 render方法对我来说看起来没有希望。我不想丢失输入的值。

如果没有其他帮助，我可以用 JavaScript 操作它并在文档加载时用 textarea 替换输入元素。

Answer 1

我已经覆盖了 render方法，效果很好。这是我的解决方案:

def render(self, name, value, attrs=None):
    if not self._isiterable(value):
        value = [value]

    if len(value) <= 1:
        # delegate to main widget (Select, etc...) if not multiple values
        value = value[0] if value else ''
        return super(TextareaCSVWidget, self).render(name, value, attrs)

     <strong>value = ','.join(value)
     return super(TextareaCSVWidget, self).render(name, value, attrs)</strong>

强调的部分是变化。这呈现了 textarea正确并保留用户输入。我想作者没有考虑到 HTML 元素 textarea创建此小部件并因此强制执行 input 时类型的元素text .例如在 <input type="number"> 中放置多个逗号分隔值是不可能的。 .

如果有人有更好的解决方案，我仍然很乐意得到更好的答案。