首页 > 解决方案 > Django - 如何从下拉列表中的选定值动态显示数据表/行

问题描述

又是我,Django 新手。

我正在尝试通过 html 表从添加 py 表单中从 dropdowm 中选择的值显示相关的行/信息。

例如,我从员工模型中得到了一个表格。我从来自员工模型的 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 %}

表单模板.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>

视图.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()

网址.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'),
]

请帮忙。

任何帮助、提示和建议都会很棒。谢谢!

标签: pythondjangodjango-modelsdjango-formsdjango-views

解决方案


在网页上动态显示意味着您需要使用 AJAX 调用。只需在下拉列表中放置一个 javascript 侦听器即可捕获所选员工的价值。

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

displaySkills 应该向服务器发送一个 AJAX 请求以检索技能列表并将它们显示在表格或其他内容中。在 django 端创建一个以员工为参数并返回技能列表的函数,最好是 JSON 格式。最后创建一个您将在请求中使用的路由。


推荐阅读