Django Admin，如何根据另一个选择填充选择选项 [英] Django Admin, how to populate select options depending on another select

问题描述

我的情况：

我有三个表，类别，子类别，产品。
插入新产品时，有两个选择框

I'm having three tables, Category, Subcategory, Products. While inserting new product, there are two select boxes

1）第一个选择用于类别（其工作）

1)1st select is for Category (its working)

2）2nd用于子类别，应与第一个选择相关。需要从子类别表中获取数据。

2) 2nd is for Subcategory, which should be relevant to the 1st select. Needs to fetch the data from subcategory table.

子类别表具有类别ID作为外键。
我是初学者，请帮助。

Subcategory table has category id as a foreign key. I am a beginner, please somebody help.

推荐答案

您将不得不使用我更喜欢的一些JS库 JQuery 。

要填充此子类别字段，您必须创建一个将以json数据作为响应的视图。

For filling this subcategory field, you have to create a view which will respond with json data.

from django.http import HttpResponse
import json

def get_subcategory(request): 
    id = request.GET.get('id','') 
    result = list(Subcategory.objects.filter(category_id=int(id)).values('id', 'name')) 
    return HttpResponse(json.dumps(result), content_type="application/json") 

在网址处。 py，您需要添加模式才能到达视图：

At urls.py you need to add a pattern to reach the view:

url(r'^/getSubcategory/$', views.get_subcategory) 

现在，您必须覆盖django adm的 change_from.html

Now you have to override change_from.html of django admin for your product app to add some JS code to do the magic.

your_project
     |-- your_project/
     |-- myapp/
     |-- templates/
          |-- admin/
              |-- myapp/
                  |-- change_form.html  # do not misspell this

注意：此文件的位置并不重要。您可以将
放到您的应用程序中，并且仍然可以使用。只要它的位置可以被django发现
。更重要的是HTML
文件的名称必须与
django提供的原始HTML文件名相同。

Note: The location of this file is not important. You can put it inside your app and it will still work. As long as its location can be discovered by django. What's more important is the name of the HTML file has to be the same as the original HTML file name provided by django.

在您的 change_form.html 中，输入以下内容：

In your change_form.html, write somethings like this:

{% extends "admin/change_form.html" %} 

{% block extrahead %}
    {{ block.super }} 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
        $(function(){ 
            // inspect html to check id of category select dropdown.
            $(document).on('change', "select#id_category", function(){ 
                $.getJSON("/getSubcategory/",{id: $(this).val()}, function(j){ 
                     var options = '<option value="">---------</option>'; 
                     for (var i = 0; i < j.length; i++) { 
                         options += '<option value="' + j[i].id + '">' + j[i].name + '</option>'; 
                     } 
                     // inspect html to check id of subcategory select dropdown.
                     $("select#id_subcategory").html(options); 
                 }); 
             }); 
         }); 
    </script>
{% endblock %} 
# Create a JS file and put this second script tag in it, that way will be easier to maintain your template.

这篇关于Django Admin，如何根据另一个选择填充选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！