七、xadmin 編輯界面實現二級聯動

很多時候，我們會遇到這種需求，通過一個select框中選擇的值，去動態的加載另一個下拉框中的內容

 

對於前端的同學來講，這個本應該是一個很簡單的需求，獲取第一個下拉框的值然后通過ajax去動態加載即可。

在xadmin中，我們可以通過自定義一個插件來完成這個需求

1）按照我們之前說的xadmin自定義插件的步驟，首先，在xadmin--->plugins下面新建插件文件 linkageFilter.py

import xadmin
from xadmin.views import BaseAdminPlugin
from xadmin.views.detail import DetailAdminView
from xadmin.views.edit import CreateAdminView
"""
    此插件用於實現二級聯動查詢
"""

class LinkageFilter(BaseAdminPlugin):
    is_execute = False

    def init_request(self, *args, **kwargs):
        return bool(self.is_execute)

    def get_context(self, context):
        return context

    def get_media(self, media):
        path = self.request.get_full_path()
        current_uri = '{scheme}://{host}'.format(scheme=self.request.scheme, host=self.request.get_host())

        if "add" in path or "update" in path:
            media = media + self.vendor('xadmin.self.select.js')
        return media


xadmin.site.register_plugin(LinkageFilter,CreateAdminView)

 

2）將此插件名稱添加到xadmin-->plugins--->__init__.py文件中的 PLUGINS 中

3）然后在我們需要加載插件的界面Admin options中設置屬性 is_execute= True

class postsAdmin(object):
    is_execute = True
    ... ...

4）編寫js
在xadmin--->static--->xadmin--->js--->xadmin.self.select.js中：

/*自定義js, 用於xadmin edit界面二級聯動查詢*/

(function($) {
    function linkage_query() {
        $("#id_navi_f").change(function (e) {
            var val = $(this).val();
            var url = "/forum_navi/?fid=" + val;
            getSecNavi(url, "id_navi_s");
        });

        function getSecNavi(url, id) {
            $.ajax({
                type: "get",
                url: url,
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", $.getCookie("csrftoken"));
                },
                success: function (data) {
                    console.log(data);
                    $('#'+id)[0].selectize.clearOptions(); //二級select清空選項
                    for (var i = 0; i < data.length; i++) {
                        $('#'+id)[0].selectize.addOption({text: data[i].name, value: data[i].id, $order: i + 1}); //添加數據
                    }
                },
                error: function (xhr, textStatus) {
                    console.log(xhr);
                    console.log(textStatus);
                }
            })
        }
    }
    linkage_query();
})(jQuery);