python測試開發django-57.xadmin選項二級聯動

前言

當我們選擇項目分類的時候，一個項目下關聯多個模塊，同時有這兩個選項框的時候，需要實現選中一個項目，模塊里面自動刪除出該項目下的模塊，如下圖這種

解決基本思路：
1.寫個jqeury腳本監聽change事件
2.ajax發個請求給后端，用views試圖函數實現篩選，回傳到頁面上
3.xadmin加載js腳本

ajax請求

關於moles相關的內容就不重復寫了，打開后台頁面，查看select標簽的id值，這個id值就是id_和Fieldname的組合
使用了xadmin自帶的selectize.js中的方法

• selectize.clearOptions()清空內容
• selectize.addOption() 添加數據

$("#id_p_name").change(function (e) {
            var mid = $(this).val();
            $('#id_m_name')[0].selectize.clearOptions(); //二級select清空選項
            $.ajax({
                type: "get",
                url: "/select_module/?mid=" + mid,
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", $.getCookie("csrftoken"));
                },
                success: function (data) {
                    data = JSON.parse(data.msg)//將JSON轉換
                    for (var i = 0; i < data.length; i++) {
                        var test = {text: data[i].fields.module_name, value: data[i].pk, $order: i + 1}; //遍歷數據,拼湊出selectize需要的格式
                          $('#id_m_name')[0].selectize.addOption(test); //添加數據
                    }
                },
                error: function (xhr, textStatus) {
                    console.log(xhr);
                    console.log(textStatus);
                }
            })
})

可以先在瀏覽器上調試下，確保沒問題后，再加載js

views試圖函數和urls.py配置

views.py寫個試圖函數，刪選對應的數據，返回json

# views.py
from django.http import HttpResponse, JsonResponse
from django.core import serializers
import json
from .models import ModuleName
# Create your views here.


# 二級聯動View函數

def select_m(request):
    # 通過get得到父級選擇項
    m_id = request.GET.get('mid', '')
    # 篩選出符合父級要求的所有子級，因為輸出的是一個集合，需要將數據序列化 serializers.serialize()
    modules = serializers.serialize("json", ModuleName.objects.filter(project_info_id=int(m_id)))
    # 判斷是否存在，輸出
    if modules:
        return JsonResponse({"msg": modules})

urls.py設置一個訪問地址

from django.conf.urls import url
from django.contrib import admin
import xadmin
from hello import views


urlpatterns = [
    url(r'^xadmin/', xadmin.site.urls),   # xadmin
    url(r'^admin/', admin.site.urls),     # 原來的admin
    url(r'^select_module/', views.select_m),
]

加載js文件

xadmin加載自己寫的js文件，可以參考之前寫的這篇https://www.cnblogs.com/yoyoketang/p/10717388.html
接下來把自己寫的javascript腳本放到/xadmin/static/xadmin/js目錄下

注意前面要加個分號(😉,要不然不生效

get_media加載js

xadmin注冊的時候，重寫get_media方法，添加xadmin.add.select.js

class ApiTestAdmin(object):
    list_display = ["name", "url", "type"]


    def get_media(self):
        # media is the parent's return value (modified by any plugins)
        media = super(ApiTestAdmin, self).get_media() + self.vendor('xadmin.page.list.js', 'xadmin.page.form.js')
        # if self.list_display_links_details:
        #     media += self.vendor('xadmin.plugin.details.js', 'xadmin.form.css')

        # xadmin.list.xxx.js是自己寫的js腳本
        media += self.vendor('xadmin.add.select.js', 'xadmin.form.css')
        return media

        # media = super(ControlImage,self).get_media()
        # media.add_js(('js/content.js',))    # 這種方法行不通，會報找不到.add_js方法
        # return media


xadmin.site.register(models.ApiTest, ApiTestAdmin)

主要思路參考這篇博客 https://www.cnblogs.com/ttzz/p/10732405.html