Django Admin实现三级联动的示例代码(省市区)


Posted in Python onJune 22, 2018

通过自定义Admin的模板文件实现省市区的三级联动.要求创建记录时,根据省>市>区的顺序选择依次显示对应数据.

修改记录时默认显示已存在的数据.

Django Admin实现三级联动的示例代码(省市区)

Django Admin实现三级联动的示例代码(省市区)

Model

class Member(models.Model):
  name = models.CharField(max_length=100, verbose_name='姓名')
  province = models.CharField(max_length=100, null=True, blank=True, verbose_name='省份')
  city = models.CharField(max_length=100, null=True, blank=True, verbose_name='城市')
  district = models.CharField(max_length=100, null=True, blank=True, verbose_name='区/县')

  class Meta:
    verbose_name_plural = verbose_name = '人员'

  def __str__(self):
    return self.name

View和url

# views
LOCATION = {'吉林省': {'长春市': ['南关区', '朝阳区', '二道区', '绿园区']}}


def choose_province(request):
  province = list(LOCATION.keys())
  return JsonResponse(province, safe=False)


def choose_city(request):
  province = request.GET.get('p')
  cities = list(LOCATION[province].keys())
  return JsonResponse(cities, safe=False)


def choose_district(request):
  province = request.GET.get('p')
  city = request.GET.get('c')
  districts = LOCATION[province][city]
  return JsonResponse(districts, safe=False)
  
# urls
from person.views import choose_province, choose_city, choose_district

urlpatterns = [
  path('province/', choose_province),
  path('city/', choose_city),
  path('district/', choose_district),
  path('admin/', admin.site.urls),
]

Admin

class MemberForm(forms.ModelForm):
  class Meta:
    widgets = {
      'province': forms.Select(),
      'city': forms.Select(),
      'district': forms.Select()
    }

@admin.register(Member)
class MemberAdmin(admin.ModelAdmin):
  form = MemberForm
  fields = ('name', ('province', 'city', 'district'))
  list_display = ('name', 'province', 'city', 'district')
  change_form_template = 'area.html'

这里需要写一个form将省市区这三个字段显示为单选框.

模板文件

找到django源码中的change_form.html(django/contrib/admin/templates/admin/)文件,复制到app下templates目录中.

在admin中指定自定义的模板文件 change_form_template = 'area.html'

{% block admin_change_form_document_ready %}
  <script type="text/javascript"
      id="django-admin-form-add-constants"
      src="{% static 'admin/js/change_form.js' %}"
      {% if adminform and add %}
        data-model-name="{{ opts.model_name }}"
      {% endif %}>
  </script>

  <script type="text/javascript">
    (function($) {
      $('#id_city').change(function() {
        let p_id = $('#id_province').val();
        let c_id = $('#id_city').val();
        $.get('/district/', {"p": p_id, "c": c_id }, function(a_info) {
          var area_info = $('#id_district').empty().append('<option value>' + '---------' + '</option>');
          $.each(a_info, function(i, area) {
            area_info.append('<option value="' + area + '">' + area + '</option>')
          });
          {% if change %}
            $("#id_district").find("option:contains({{ original.district }})").attr('selected', true);
          {% endif %}
        });
      });

      $('#id_province').change(function() {
        let p_id = $('#id_province').val();
        $.get('/city/', { 'p': p_id }, function(c_info) {
          var city_info = $('#id_city').empty().append('<option value>' + '---------' + '</option>');
          $.each(c_info, function(i, city) {
            city_info.append('<option value="' + city + '">' + city + '</option>')
          });
          {% if change %}
            $("#id_city").find("option:contains({{ original.city }})").attr('selected', true);
            $("#id_city").trigger("change");
          {% endif %}
        });
      });

      $.get('/province/', function(p_info) {
        var province_info = $('#id_province').empty().append('<option value>' + '---------' + '</option>');
        $.each(p_info, function(i, province) {
          province_info.append('<option value="' + province + '">' + province + '</option>')
        });
        {% if change %}
          $("#id_province").find("option:contains({{ original.province }})").attr('selected', true);
          $("#id_province").trigger("change");
        {% endif %}
      });
    })(django.jQuery);
  </script>

参考: https://3water.com/article/142409.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
低版本中Python除法运算小技巧
Apr 05 Python
详解python的几种标准输出重定向方式
Aug 15 Python
python 捕获 shell/bash 脚本的输出结果实例
Jan 04 Python
Python列表和元组的定义与使用操作示例
Jul 26 Python
pandas 对每一列数据进行标准化的方法
Jun 09 Python
selenium+python自动化测试之多窗口切换
Jan 23 Python
浅谈Python大神都是这样处理XML文件的
May 31 Python
Python跳出多重循环的方法示例
Jul 03 Python
Python 矩阵转置的几种方法小结
Dec 02 Python
python实现飞机大战项目
Mar 11 Python
Python SQLAlchemy库的使用方法
Oct 13 Python
Python数据类型最全知识总结
May 31 Python
详解python中的json和字典dict
Jun 22 #Python
python实现雨滴下落到地面效果
Jun 21 #Python
使用python读取csv文件快速插入数据库的实例
Jun 21 #Python
详解python3中tkinter知识点
Jun 21 #Python
Python3用tkinter和PIL实现看图工具
Jun 21 #Python
Python3.4 tkinter,PIL图片转换
Jun 21 #Python
Python3实现转换Image图片格式
Jun 21 #Python
You might like
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php集成动态口令认证
2016/07/21 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
六个一活动实施方案
2014/03/21 职场文书
小学英语课后反思
2014/04/26 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
汇报材料怎么写
2014/12/30 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
家访教师心得体会
2016/01/23 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js