如何让下拉选择从 Django 模型中填充模板中的 DataTables 表？

Posted 2023-05-07

【中文标题】如何让下拉选择从 Django 模型中填充模板中的 DataTables 表？

【英文标题】：How to have dropdown selection populate DataTables table in template from Django model?

【发布时间】：2018-08-27 10:11:48

【问题描述】：

希望我能得到一些帮助。我基本上在我的网站上有一个带有表格的页面，并且该表格是从数据库中填充我的模型的。我的问题是我想要一个下拉菜单，用户可以在其中选择他们想要查看的数据。我知道我需要使用 django 表单才能做到这一点，但我一直在寻找，并且很难找到我需要做的事情。该表由 DataTables 和一些 BS4 样式制成。

现在，我的表格中只填充了我的一个模型 (Model1)，效果很好，但我不确定如何从下拉列表中进行选择来填充使用不同的模型。我有点了解表单是如何工作的，但我不确定如何按照我想要的方式实现它们。我看到的很多东西只是展示了如何用一个模型制作一个表单。

任何类型的示例或指导将不胜感激:)

这是我的models.py：

    class Model1(models.Model):

            date = models.DateTimeField(db_column='Date', primary_key=True, default='', max_length=40) 
            data1 = models.CharField(max_length=40, default='NoData', blank=True, null=True, db_column='data1',)
            data2 = models.CharField(max_length=40, default='NoData', blank=True, null=True, db_column='data2',)
            class Meta:
                    managed = True
                    db_table = 'table1'
            def __str__(self):
            return '%s %s %s' % (str(self.date), self.data1, self.data2,)

    class Model2(models.Model):

            date = models.DateTimeField(db_column='Date', primary_key=True, default='', max_length=40) 
            data1 = models.CharField(max_length=40, default='NoData', blank=True, null=True, db_column='data1',)
            data2 = models.CharField(max_length=40, default='NoData', blank=True, null=True, db_column='data2',)
            class Meta:
                    managed = True
                    db_table = 'table2'
            def __str__(self):
            return '%s %s %s' % (str(self.date), self.data1, self.data2,)

    class Model3(models.Model):

            date = models.DateTimeField(db_column='Date', primary_key=True, default='', max_length=40) 
            data1 = models.CharField(max_length=40, default='NoData', blank=True, null=True, db_column='data1',)
            data2 = models.CharField(max_length=40, default='NoData', blank=True, null=True, db_column='data2',)
            class Meta:
                    managed = True
                    db_table = 'table3'
            def __str__(self):
            return '%s %s %s' % (str(self.date), self.data1, self.data2,)

这是我的观点.py：

from app.models import Model1, Model2, Model3
from django.shortcuts import render

def Appview(request):
    template_name = 'app/app.html'

    Model1 = Model1.objects.all()
    Model2 = Model2.objects.all()
    Model3 = Model3.objects.all()
    return render(request, template_name, 'Model1': Model1)

这是我的（简化的）app.html：

<div class="table-responsive container">
      <table id = "table" class = "table table-sm table-hover" >
        <thead>
            <tr>
                <th>Date</th>
                <th>Data1</th>
                <th>Data2</th>
            </tr>
        </thead>

        <tbody>
            % for data in Model1 %
            <tr>
                <td> data.date </td> 
                <td> data.data1 </td>
                <td> data.data2 </td>    
            </tr>
            % endfor %
        </tbody>
    </table>

这个问题的真正核心是：如何制作一个下拉表单，用不同的模型重新填充视图/模板？

编辑：模型有更多字段，并且表格比显示的要大得多。为简单起见，我只是把事情精简了。再深入一点，我想我可能需要使用 AJAX？

【参考方案1】：

您没有包含您的表单，但它可能很简单：

class DataForm(forms.Form):
    model = forms.CharField()

然后您将表单放在模板中的某个位置：

<form method="get">
     form.as_p 
    <input type="submit">
</form>

在您看来，您将处理 GET 请求：

def Appview(request):
    models = 
        'model1': Model1,
        'model2': Model2,
        'model3': Model3,
        
    template_name = 'app/app.html'
    data = Model1.objects.all()

    if 'model' in request.GET:
        form = DataForm(request.GET)
        if form.is_valid()
            model = form.cleaned_data['model']
            model = models[model]
            data = model.objects.all()
    else:
        form = DataForm()
    return render(request, template_name, 'data': data, 'form': form)

我没有包括验证（您需要确保model 存在），但这只是为了给您一个想法。如果您不想要默认模型，逻辑也可能更复杂。

【讨论】：

哇，真的有那么简单吗？我会试一试的！

我明白了！我使用了一个 ChoiceField 来获取我的下拉菜单。我宁愿让它更新表格本身，而不是重新加载整个页面，但现在它可以正常工作。改天我会去拿 AJAX 蠕虫罐 LOL。

太棒了！是的，当然ChoiceField 好很多，AJAX 会更流畅。