• Django admin select二级联动效果


    实现原理:

    1. 继承admin/change_form.html新添加一段js监听对应id的select变化,将新得页面通过admin.py change_form_template = 'apt_data/record_change_form.html' 参数指定新得页面
    2. 请求url进行查询,返回查询结果,json形式
    3. js拿到结果,重新渲染select option

    缺点:
    目前不太灵活,如果可以通过admin.py指定一个select参数就好了

    代码参考:

    • admin.py

      @admin.register(AptReport)
      class AptReportAdmin(ExportCsvMixin,admin.ModelAdmin):
      	actions = ["export_as_csv"]
      
      	change_form_template = 'apt_data/record_change_form.html'
      	list_per_page = 10
      	list_display = ["id", "report_name", ...]
      
    • apt_data/record_change_form.html

    {% extends "admin/change_form.html" %}
    {% load i18n admin_urls static admin_modify %}
    
    {% block extrahead %}{{ block.super }}
    <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
        <script>
            django.jQuery(function() {
                var select = django.jQuery("#id_attack_method_class");
                select.change(function(){
                    console.log("value change"+django.jQuery(this).val());
                    var url = "/apt_main/form_ttp/?fid="+django.jQuery(this).val();
                    django.jQuery.get(
                        url,
                        function(data){
                            var target = django.jQuery("#id_attack_method_ttp");
                            target.empty();
                            data.forEach(function(e){
                                target.append("<option value='"+e.id+"'>"+e.attack_method_ttp+"<option>");
                                target.eq(0).attr('selected', 'true');
                            });
                    });
            })
            });
        </script>
    {% endblock %}
    
    • url.py

      app_name="apt_main"
      urlpatterns = [
      	path('form_ttp/', views.SelectView.as_view()),
      ]
      
    • view.py

      class SelectView(LoginRequiredMixin, View):
      	'''
      	处理attack二级联动数据请求
      	'''
      
      	def get(self, request):
      		# 通过get得到父级选择项
      		attack_method_class = request.GET.get('fid', '')
      		# 筛选出符合父级要求的所有子级,因为输出的是一个集合,需要将数据序列化 serializers.serialize()
      		result = AptAttackMethodTTP.objects.filter(attack_method_class=attack_method_class).values("id","attack_method_ttp")
      		data = [x for x in result]
      		return HttpResponse(json.dumps(data),content_type="application/json")
      
  • 相关阅读:
    location.href使用方法总结
    Ubuntu 12.04 安装JDK 8和Eclipse
    【一】仿微信飞机大战cocos2d-x3.0rc1
    QTP的基本功能介绍
    Spring+Ibatis集成开发实例
    Java NIO与IO的差别和比較
    嵌入式Linux常见问题
    递归和迭代之间的差
    大约sources.list和apt-get [转载]
    JVM学习笔记(一)------的基本结构
  • 原文地址:https://www.cnblogs.com/lisicn/p/15409994.html
Copyright © 2020-2023  润新知