【Django3.0功能开发】apps篇：adminx编辑页面选项间的联动实现通用方法

内容介绍

很多时候，我们会遇到这种需求，通过一个select框中选择的值，去动态的加载另一个下拉框中的内容

实现代码

models.py

# 内容大类类别模型
class ArticleCategory(models.Model):
    category_name = models.CharField(max_length=20, verbose_name='文章类别名称', help_text="文章类别名称")
	......
    class Meta:
        verbose_name = '文章类别管理'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.category_name


# 内容二级分类类别模型
class ArticleItem(models.Model):
    item_category = models.ForeignKey(
        ArticleCategory, on_delete=models.CASCADE, related_name='ArticleItemCategory',
        verbose_name="文章类别", help_text="文章类别"
    )
    item_name = models.CharField(max_length=20, verbose_name="栏目名称", help_text="栏目名称")
	......
    class Meta:
        verbose_name = '文章栏目管理'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.item_name

views.py

# 大类和二级栏目的二级联动
class LoginRequiredMixin(object):
    @classmethod
    def as_view(cls, **initkwargs):
        view = super(LoginRequiredMixin, cls).as_view(**initkwargs)
        return login_required(view)


class SelectCategoryItemView(LoginRequiredMixin, View):
    def get(self, request):
        # 通过get得到父级选择项
        category_id = request.GET.get('module', '')
        # 筛选出符合父级要求的所有子级，因为输出的是一个集合，需要将数据序列化 serializers.serialize（）
        item = core_serializers.serialize("json", ArticleItem.objects.filter(item_category_id=int(category_id)))
        # 判断是否存在，输出
        if item:
            return JsonResponse({
    
    'item': item})

urls.py

urlpatterns = [
	# 添加需要执行js的url
    url(r'SelectCategoryItem/', SelectCategoryItemView.as_view(), name='SelectCategoryItem'),
]
urlpatterns += router.urls

创建js文件

在你的目录下的 extra_apps/xadmin/static/js中新建一个文件
比如：xadmin.widget.select-category_item.js

// __author__ = 'Mr数据杨'
// __explain__ = 'category和item进行二级联动的js'

$('#id_article_category').change(function () {
    
    
        var module = $('#id_article_category').find('option:selected').val(); //获取父级选中值
        $('#id_article_item')[0].selectize.clearOptions();// 清空子级
        $.ajax({
    
    
            type: 'get',
            url: 'SelectCategoryItem/?module=' + module,
            data: '',
            async: true,
            beforeSend: function (xhr, settings) {
    
    
                xhr.setRequestHeader('X-CSRFToken', '{
    
    { csrf_token }}')
            },
            success: function (data) {
    
    
                data = JSON.parse(data.item)//将JSON转换

                for (var i = 0; i < data.length; i++) {
    
    

                    var test = {
    
    text: data[i].fields.item_name, value: data[i].pk, $order: i + 1}; //遍历数据,拼凑出selectize需要的格式
                    console.log(test)
                    $('#id_article_item')[0].selectize.addOption(test); //添加数据
                }
            },
            error: function (xhr, textStatus) {
    
    
                console.log('error')
            }
        })
    })

js加载

在你的目录下的 extra_apps/xadmin/widgets.py中
红色为添加部分

class AdminSelectWidget(forms.Select):

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

效果演示