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

須要修改的地方：

咱們使用了xadmin自帶的selectize.js中的方法

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

第三步，將js文件放入xadmin中

將js文件命名爲按照xadmin/static/xadmin/js中的js文件命名的，不然會報錯，將其放入xadmin/static/xadmin/js目錄下，

第四步，讓xadmin引用咱們的js，

找到該文件，修改其中的AdminSelectWidget類，向裏面加入咱們的js

class AdminSelectWidget(forms.Select):

    @property
    def media(self):
        return vendor('select.js', 'select.css', 'xadmin.widget.select.js','xadmin.widget.categoryselect.js')

第五步：添加URL，咱們寫的ajax請求須要後臺處理數據

views.py

# 二級聯動View函數
class SelectView(LoginRequiredMixin, View):
    def get(self, request):
        # 經過get獲得父級選擇項
        category1_id = request.GET.get('module', '')
        # 篩選出符合父級要求的全部子級，由於輸出的是一個集合，須要將數據序列化 serializers.serialize（）
        lessons = serializers.serialize("json", CategoryInfo.objects.filter(category_pid=int(category1_id)))
        # 判斷是否存在，輸出
        if lessons:
            return JsonResponse({'lesson': lessons})

urls.py

url(r'^files/select/category1_category2/', SelectView.as_view(), name='category1_category2'),

完成！

效果圖：

 參考連接：https://blog.csdn.net/qq_16102629/article/details/81179250