七、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);