首页 > 其他 > 详细

djang xadmin 表单二级联动

时间:2021-01-27 14:19:34      阅读:108      评论: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 版权所有
打开技术之扣,分享程序人生!