「Django 功能开发」在adminx实现一、二级列表的联动通用方法

今天药忘吃喽~ 2023-01-08 05:28 162阅读 0赞

全部 **Django Web** 开发文章索引目录传送门：

[【Django Web 开发】全部文章目录索引][Django Web]

### 文章目录 ###

*  内容介绍
 *  配置 models.py
 *  配置 views.py
 *  配置 urls.py
 *  创建 联动js
 *  配置 js加载
 *  效果演示

# 内容介绍 #

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

代码内容基于「Django Web框架」源码版本 3.x ，更新内容会进行标记说明对应版本。

# 配置 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 #

// __author__ = 'Mr数据杨'
    // 在你的目录下的 extra_apps/xadmin/static/js中新建一个文件
    // 比如：xadmin.widget.select-category_item.js
    // __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')
                }
            })
        })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70]

# 配置 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')

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70 1]

# 效果演示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70 3]

[Django Web]: https://blog.csdn.net/qq_20288327/article/details/113180093
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70]: /images/20221119/1fbac922e0f44e4484b1d4a109c90f6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70 1]: /images/20221119/995880c3144b4437b3c94f6c45eefd57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70 2]: /images/20221119/1bb23a77ed6a400383602c284b0242f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70 3]: /images/20221119/d1db121f46c74470ba5a0c6afc43ca2b.png