django xadmin 二级联动_x-admin 2.2绑定change-优快云博客

本文链接：https://blog.youkuaiyun.com/u014633966/article/details/79932630

本文介绍了一种在xadmin中实现二级联动选择的功能方法。通过监听一级选择项变化触发Ajax请求，动态更新二级选择项的内容，并确保使用selectize插件进行选项管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

xadmin的二级联动，这个问题困扰很久了，在网上也一直找不到任何文档。

偶然机会想到了一个思路：

1. 绑定1级select的change事件，获取当前选中的选项value.

2. 触发ajax去获取过滤后的二级数据.

3. 将获取到的二级数据填充到二级select的option中（必须使用selectize）

接下来分布贴代码。。。。

1. 绑定1级select的change事件，必须植入我们自己写的js代码

xadmin提供加载自定义js的方法.

adminx.py中：

class ArticleAdmin(object):
    list_display = ['title', "type", 'module', 'author', 'tag', 'visit', 'add_time']
    search_fields = ['module', "type", 'author', 'title', 'introduction', 'content', 'tag', 'visit', 'add_time']
    list_filter = ['module', "type", 'author', 'title', 'introduction', 'content', 'tag', 'visit', 'add_time']
    style_fields = {'content': 'ueditor'}
    readonly_fields = ['visit','like', ]

    def get_media(self):
        media = super(ArticleAdmin, self).get_media()
        path = self.request.get_full_path()
        if "add" in path or 'update' in path:
            media.add_js([self.static('demo/js/xadmin.js')])
        return media

xadmin.js中：

function registerDropDownSetModuleAdmin(dom_module,dom_type) { 
    function reset_course_type() {
    var module = $(dom_module).find('option:selected').val(); //获取一级选中的value
	...
    });} 
$(dom_module).change(function () { reset_course_type(); });

解释：

dom_module,dom_type 分别为1级和二级的id.

如何知道这两个id？

其实就是“id_”加上自己在model中定义的字段名

2. 触发ajax请求服务器返回过滤的数据

这部分根据自己的api实现就行

function reset_course_type() {
        var module = $(dom_module).find('option:selected').val();
        $.ajax({
            type: "get",
            url: "/api/v1/course_types/?module=" + module,
            data: '',
            async: true,
            beforeSend: function (xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
            },
            success: function (data) {
                console.log(data[0]);
               	........
            },
            error: function (xhr, textStatus) {
                console.log(xhr);
                console.log(textStatus);

            }
        });
    }

3. 填充数据到二级select的option中

这里有个坑，之前我的思路是，直接改写二级“.selectize-dropdown-content”中的数据，但是每次一点击下拉框，里面的数据又还原成之前的所有数据。

这个时候debug看，network又没有任何请求，说明之前初始化的时候，把数据存到了某个地方，等点击下拉框的时候，数据被重新填充回去。

找了半天，终于发现了原来是selectize插件干的。

阅读selectize.js源码，可以发现提供了一系列api可以使用。

直接贴代码吧。

                console.log(data);
                $(dom_type)[0].selectize.clearOptions(); //二级select清空选项
                for (var i = 0; i < data.length; i++) {
                    console.log(data[i]);
                    var item = data[i];
                    var test = {text: data[i].name, value: data[i].id, $order: i + 1}; //遍历数据,拼凑出selectize需要的格式
                    $(dom_type)[0].selectize.addOption(test); //添加数据
                } //

关键点在于，1.如何加载自己的js文件 2. ajax请求后的数据必须通过selectize更新option, 不能直接修改html