Django - 根据下拉选择过滤并显示模型

时间:2017-08-11 01:23:28

标签: ajax django filter model dropdown

我想显示一个基于下拉框选择过滤的模型中的表。我使用表单创建了一个下拉列表。下拉列表中的值是sensor_loc_blg的不同值。如果用户从下拉框中进行选择,则将显示过滤所有具有sensor_loc_blg作为所选值的行的表。

以下是我的尝试:

models.py

class SensorsTable(models.Model):
    sensor_uuid = models.CharField(primary_key=True, max_length=32)
    sensor_desc = models.CharField(max_length=256)
    sensor_mid = models.CharField(max_length=256)
    gw_uuid = models.CharField(max_length=32, blank=True, null=True)
    sensor_loc_lat = models.DecimalField(max_digits=11, decimal_places=8, blank=True, null=True)
    sensor_loc_long = models.DecimalField(max_digits=11, decimal_places=8, blank=True, null=True)
    sensor_loc_blg = models.CharField(max_length=100, blank=True, null=True)
    sensor_loc_room = models.CharField(max_length=100, blank=True, null=True)
    sensor_loc_position = models.CharField(max_length=100, blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'sensors_table'

    def __str__(self):
        return self.sensor_uuid

forms.py

from django import forms
from .models import *


class LocationChoiceField(forms.Form):

    locations = forms.ModelChoiceField(
        queryset=SensorsTable.objects.values_list("sensor_loc_blg", flat=True).distinct(),
        #empty_label=None
    )

views.py

from django.http import HttpResponse
from django.template import loader
from django.shortcuts import render
from django.views.generic.edit import CreateView
from .forms import *

from .models import *

#def index(request):
#    return HttpResponse("Smart Uni Analytics Test")


def index(request):

    if request.method =='POST':
        location_list = LocationChoiceField(request.POST)

        if location_list.is_valid():
            selected_location = location_list.cleaned_data['locations']
            query_results = SensorsTable.objects.filter(sensor_loc_blg= selected_location)

        else:
            location_list = LocationChoiceField()
            query_results = SensorsTable.objects.all()

    else:
        location_list = LocationChoiceField()
        query_results = SensorsTable.objects.all()




    context = {
        'query_results': query_results,
        'location_list': location_list,

    }
    return render(request,'analytics/index.html', context)

的index.html

<body>

<div class="container">
    <p></p>
    <form method=POST action="">
        {{ location_list }}

    </form>



    <h1>All sensors</h1>
    <table>

        {% for item in query_results %}
        <tr>
            <td>{{ item.sensor_uuid }}</td>
            <td>{{ item.sensor_desc }}</td>
            <td>{{ item.sensor_mid }}</td>
            <td>{{ item.gw_uuid }}</td>
            <td>{{ item.sensor_loc_blg }}</td>
            <td>{{ item.sensor_loc_room }}</td>
            <td>{{ item.sensor_loc_position }}</td>
        </tr>
        {% endfor %}
    </table>
</div>
</body>

我对此很新。有人可以告诉我这里出了什么问题吗?我需要使用Ajax吗?

1 个答案:

答案 0 :(得分:0)

<强>解决方案

views.py

def index(request):


    location_list = LocationChoiceField()

    if request.GET.get('locations'):
        selected_location = request.GET.get('locations')
        query_results = SensorsTable.objects.filter(sensor_loc_blg=selected_location)
    else:
        query_results = SensorsTable.objects.all()


    context = {
        'query_results': query_results,
        'location_list': location_list,

    }
    return render(request,'analytics/index.html', context)

的index.html

<body>

<div class="container">
    <p></p>
    <form method="get" action="{% url 'index' %}">
        {{ location_list }}
        <input type="submit" >
    </form>



    <h1>All sensors</h1>
    <table>

        {% for item in query_results %}
        <tr>
            <td>{{ item.sensor_uuid }}</td>
            <td>{{ item.sensor_desc }}</td>
            <td>{{ item.sensor_mid }}</td>
            <td>{{ item.gw_uuid }}</td>
            <td>{{ item.sensor_loc_blg }}</td>
            <td>{{ item.sensor_loc_room }}</td>
            <td>{{ item.sensor_loc_position }}</td>
        </tr>
        {% endfor %}
    </table>
</div>
</body>