zoukankan      html  css  js  c++  java
  • 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")
      
  • 相关阅读:
    将微信小程序上传到公司的账号下
    当HBuilderX运行时打不开微信开发者工具时
    vue路径中去掉#
    初次快速使用git
    小米商城应用效果(阴影效果)
    如何使用hover点击一个元素使另一个颜色变色
    Open browser failed!! Please check if you have installed the browser correct
    vue中解决跨域问题
    vue中如何实现点击动态切换样式
    es5中数组的迭代方法 forEach,map,filter,some,every
  • 原文地址:https://www.cnblogs.com/lisicn/p/15409994.html
Copyright © 2011-2022 走看看