Django-如何从下拉列表中的选定值动态显示表/数据行

Question

还是我，Django新手。

我试图通过从py表单的dropdowm中选择的值，通过html表显示相关的行/信息。

例如，我从员工模型中获得了一份表格。 我从来自员工模型的LOV中选择员工1。 员工1的技能模型为fk。 从下拉列表中选择员工1后，下面将显示一个表格，列出员工1拥有的所有技能，这些技能均来自技能模型。

这就是我到目前为止所得到的。 我在网上找不到其他符合此特定要求的有用参考资料。 到目前为止，我是如何编写和构造代码的。 我真的迷路了。 我真的在树桩上。 我不知道从哪里开始以及如何开始。

摘录：

employee_form.html

{% extends 'skillsMatrixApp/base.html' %}
{% block title %}Add Employee{% endblock %}
{% block employee_active %}active{% endblock %}

{% block body %}
    {% if error_message %}
        <p><strong>{{ error_message }}</strong></p>
    {% endif %}
    <form class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% include 'skillsMatrixApp/form-template.html' %}
        <div class="form-group sub">
            <div class="col-sm" style="text-align: right">
                <button type="submit" formnovalidate class="btn btn-info">Save</button>
                <button type="submit" formnovalidate name="another" class="btn btn-info">Save and add another</button>
                <button type="submit" formnovalidate name="cancel" class="btn btn-danger">Cancel</button>
            </div>
        </div>
    </form>
{% endblock %}

外形template.html

<div class="form-tmp ">
    {% for field in form %}
        <!--<div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <span class="text-danger small">{{ field.errors }}</span>
            </div>
            <label class="control-label col-sm-2">{{ field.label_tag }}</label>
            <div class="col-sm-10">{{ field }}</div>
        </div>-->
        <div class="form-lbl"> {{ field.label_tag }} {{ field }}
            <div class="error">{{ field.errors }}
            </div>
        </div>

    {% endfor %}
</div>

views.py

class skillsMatrixCreate(SuccessMessageMixin, CreateView):
    model = skillsMatrix
    fields = ['skillsMatrixEmployee', 'skillsMatrixSkills', 'proficiency', 'levelOfInterest']

    success_url = reverse_lazy('skillsMatrixApp:skills-matrix')
    success_message = "Skill associated to Employee successfully."

    def post(self, request, *args, **kwargs):
        if "cancel" in request.POST:
            return HttpResponseRedirect(reverse('skillsMatrixApp:index'))
        return super(skillsMatrixCreate, self).post(request, *args, **kwargs)

    def get_success_url(self):
        if "another" in self.request.POST:
            return reverse('skillsMatrixApp:skills-matrix-add')
        # else return the default `success_url`
        return super(skillsMatrixCreate, self).get_success_url()

urls.py

    url(r'skills-matrix/$', views.skillsMatrixView.as_view(), name='skills-matrix'),
    url(r'skills-matrix/add/$', views.skillsMatrixCreate.as_view(), name='skills-matrix-add'),
    url(r'skills-matrix/(?P<pk>[0-9]+)/$', views.skillsMatrixUpdate.as_view(), name='skills-matrix-update'),
    url(r'skills-matrix/(?P<pk>[0-9]+)/delete/$', views.skillsMatrixDelete.as_view(), name='skills-matrix-delete'),
]

请帮忙。

任何帮助，提示，建议都将是非常好的。 谢谢！

Answer 1

在网页上动态地表示您需要使用AJAX调用。 只需将JavaScript侦听器放在下拉列表中即可捕获所选员工的价值。

<select id="selectXX" onchange="displaySkills(this)">

displaySkills应该向服务器发送AJAX请求以获取技能列表并将其显示在表格中或其他内容中。 在django端，创建一个以employee作为参数并返回技能列表的函数，最好以JSON格式。 最后创建一条将在请求中使用的路由。