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字符串和字典
Jul 07 Python
Pandas 对Dataframe结构排序的实现方法
Apr 10 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
Feb 21 Python
pandas.cut具体使用总结
Jun 24 Python
python使用writerows写csv文件产生多余空行的处理方法
Aug 01 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
Jan 20 Python
简单了解django文件下载方式
Feb 10 Python
解决pytorch-yolov3 train 报错的问题
Feb 18 Python
django中嵌套的try-except实例
May 21 Python
详解python 内存优化
Aug 17 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
Jan 05 Python
python编程项目中线上问题排查与解决
Nov 01 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
php实现用户在线时间统计详解
2011/10/08 PHP
解析isset与is_null的区别
2013/08/09 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
卫生院健康教育实施方案
2014/06/07 职场文书
收费员岗位职责
2015/02/14 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
国庆节新闻稿
2015/07/17 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
干部理论学习心得体会
2016/01/21 职场文书