Django-如何根据下拉菜单中的选定值动态显示表格/数据行

时间:2018-08-22 13:09:30

标签: python django django-models django-forms django-views

再次是我,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 %}

form-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'),
]

请帮助。

任何帮助,技巧和建议都将非常有用。 谢谢!

1 个答案:

答案 0 :(得分:0)

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

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

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