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脚本将绝对url替换为相对url的教程
Apr 24 Python
django 开发忘记密码通过邮箱找回功能示例
Apr 17 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
Apr 25 Python
Python列表(list)所有元素的同一操作解析
Aug 01 Python
python检测服务器端口代码实例
Aug 31 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
Oct 04 Python
Python3 无重复字符的最长子串的实现
Oct 08 Python
python 实现绘制整齐的表格
Nov 18 Python
Pandas+Matplotlib 箱式图异常值分析示例
Dec 09 Python
Python操作MySQL数据库的示例代码
Jul 13 Python
python3让print输出不换行的方法
Aug 24 Python
用 python 进行微信好友信息分析
Nov 28 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
Mysql的常用命令
2006/10/09 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
自制PHP框架之设计模式
2017/05/07 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
用js重建星际争霸
2006/12/22 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
python分布式计算dispy的使用详解
2019/12/22 Python
python对Excel的读取的示例代码
2020/02/14 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
应届生求职信范文
2014/06/30 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL