django xadmin后台页面实现二级联动

思路

1. 先找到控件id ，这样就可以监听change事件
2. 然后把自己写的js加入xadmin中
3. 添加url和view,接受ajax请求和发送数据

第一步：找到联动上下级的ID

在浏览器中通过F12查看

父级ID：id_files_category1

子级id:id_files_categoty2

 第二步：ajax请求

$('#id_files_category1').change(function () {
        var module = $('#id_files_category1').find('option:selected').val(); //获取父级选中值
        $('#id_files_category2')[0].selectize.clearOptions();// 清空子级
        $.ajax({
            type: 'get',
            url: '../../select/category1_category2/?module=' + module,
            data: '',
            async: true,
            beforeSend: function (xhr, settings) {
                xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}')
            },
            success: function (data) {
                data = JSON.parse(data.lesson)//将JSON转换
 
                for (var i = 0; i < data.length; i++) {
 
                    var test = {text: data[i].fields.category_name, value: data[i].pk, $order: i + 1}; //遍历数据,拼凑出selectize需要的格式
                    console.log(test)
                    $('#id_files_category2')[0].selectize.addOption(test); //添加数据
                }
            },
            error: function (xhr, textStatus) {
                console.log('error')
            }
        })
    })

View Code