首页 > 其他 > 详细

djang xadmin 表单二级联动

时间:2021-01-27 14:19:34      阅读:113      评论:0      收藏:0      [点我收藏+]

需求


技术分享图片

版本信息


python: 3.8

django: 2.2.17

django xadmin:  django2   github: https://github.com/sshwsfc/xadmin/tree/django2

技术分享图片


思路

通过自定义插件引入自己的 js 文件,在js文件中请求数据,修改表单值

1. 自定义插件:

admin.py

class ProductPlugin(BaseAdminPlugin):
    def init_request(self, *args, **kwargs):
        path = self.request.get_full_path()
        # 只在添加或修改时启动插件
        if ‘products/add‘ in path or ‘products/update‘ in path:
            return True
        return False

    def get_media(self, media):
        # 引入自定义的js文件,列表中可以添加多个资源文件,一般是js和css
        media._js_lists.append([‘/static/product/admin.js‘])
        
        return media


# 注册插件
site.register_plugin(ProductPlugin, CreateAdminView)
site.register_plugin(ProductPlugin, UpdateAdminView)


2. views.py中定义获取产品属性的接口

def ProductAttrsList(request, cid):
    if not cid:
        return JsonResponse([])
    attrs = ProductAttr.objects.filter(category_id=cid).values()
    print(attrs)
    return JsonResponse(list(attrs), safe=False)


3. urls.py中添加路由

urlpatterns = [
    path(‘attrs/<int:cid>/‘, ProductAttrsList, name=‘attrslist‘),
]


4. js 文件 /static/products/admin.js

$(‘#id_category‘).change(function(){
        var cid = $(this).val();
        console.log(‘/products/attrs/‘ + cid + ‘/‘);
        $.get(‘/products/attrs/‘ + cid + ‘/‘, function(res){
            console.log(res);
            var html = ‘‘;
            res.forEach(function(item, index){
                html += ‘<option value="‘+ item.id +‘">‘+ item.name +‘</option>‘
            })
            
            $(‘#id_product_attr_form‘).html(html);
        })
    })


5. 运行看效果

技术分享图片

技术分享图片

djang xadmin 表单二级联动

原文:https://www.cnblogs.com/huangxm/p/14334264.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!