一、先看下app文件目录

二、编写models.py样例

三、确定二级数据和js内容

1.编写路由urls.py

2.views传递数据，json格式

3.定制js文件

四、在adminx.py将js文件引入

五、实现效果

我的实现方法与网上大多数稍有不一样，我自己根据网上查到的设置了，但是有会出现失效的情况，还是会混乱。刚开始还能一直使用，后来随着对xadmin的了解，自己有重新修改了相关的代码，改变了js的加载和数据的传递。

一、先看下app文件目录

二、编写models.py样例

from django.db import modelsclass FirstIndicator(models.Model):creat_time = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)update_time = models.DateTimeField(verbose_name='更新时间', auto_now=True)first_indicator = models.CharField(max_length=50, verbose_name='一级指标')state = models.CharField(max_length=5, choices={('yes', "使用"), ('no', "弃用")}, verbose_name='使用状态', default='yes')class Meta:verbose_name = u'一级指标目录'verbose_name_plural = verbose_namedef __str__(self):return self.first_indicatorclass SecondIndicator(models.Model):creat_time = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)update_time = models.DateTimeField(verbose_name='更新时间', auto_now=True)first_indicator = models.ForeignKey(FirstIndicator, verbose_name='一级指标', on_delete=models.CASCADE)second_indicator = models.CharField(max_length=50, verbose_name='二级指标')score = models.FloatField(verbose_name='分值')state = models.CharField(max_length=5, choices={('yes', "使用"), ('no', "弃用")}, verbose_name='使用状态', default='yes')class Meta:verbose_name = u'二级指标目录'verbose_name_plural = verbose_namedef __str__(self):return self.second_indicatorclass ThirdIndicator(models.Model):creat_time = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)update_time = models.DateTimeField(verbose_name='更新时间', auto_now=True)first_indicator = models.ForeignKey(FirstIndicator, verbose_name='一级指标', on_delete=models.CASCADE)second_indicator = models.ForeignKey(SecondIndicator, verbose_name='二级指标', on_delete=models.CASCADE)third_indicator = models.CharField(max_length=50, verbose_name='三级指标')minus_points = models.FloatField(verbose_name='扣分')state = models.CharField(max_length=5, choices={('yes', "使用"), ('no', "弃用")}, verbose_name='使用状态', default='yes')class Meta:verbose_name = u'三级指标目录'verbose_name_plural = verbose_namedef __str__(self):return self.third_indicatorclass Problem(models.Model):user = models.ForeignKey(UserProfile, verbose_name='上报人', on_delete=models.CASCADE, blank=True)creat_time = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)update_time = models.DateTimeField(verbose_name='更新时间', auto_now=True)first_indicator = models.ForeignKey(FirstIndicator, verbose_name='一级指标', on_delete=models.CASCADE)second_indicator = models.ForeignKey(SecondIndicator, verbose_name='二级指标', on_delete=models.CASCADE)third_indicator = models.ForeignKey(ThirdIndicator, verbose_name='三级指标', on_delete=models.CASCADE)countryside_name = models.ForeignKey(CountrySidename, verbose_name='村名称', on_delete=models.CASCADE)state = models.CharField(max_length=5, choices={('yes', "存在问题"), ('no', "已不存在")}, verbose_name='问题状态', default='yes')position = models.CharField(max_length=50, verbose_name='位置')# longitude = models.CharField(max_length=50, verbose_name='经度')# latitude = models.CharField(max_length=50, verbose_name='纬度')class Meta:verbose_name = u'检查问题'verbose_name_plural = verbose_namedef __str__(self):return str(self.id)

三、确定二级数据和js内容

1.编写路由urls.py

#项目总路由 urls
from django.urls import path,include,re_path
import xadminurlpatterns = [path('xadmin/', xadmin.site.urls),# xadmin二级菜单（农村垃圾分类一级二级三级）re_path(r'countryside/', include('countryside.urls')),
}#app的urlsfrom django.urls import path
from .views import get_indicator
urlpatterns = [path('get_indicator/', get_indicator),
]

2.views传递数据，json格式

#views.pyfrom django.core import serializers
from django.http import HttpResponse
from django.shortcuts import render# Create your views here.
from .models import SecondIndicator, ThirdIndicator# 获取二级指标
def get_indicator(request):"""二级指标"""print('二级数据')first_indicator = request.GET.get('first_indicator')# 公司当前二级岗位if first_indicator:second_indicator = SecondIndicator.objects.filter(first_indicator_id=first_indicator, state='yes')print(second_indicator)result = serializers.serialize("json", second_indicator)print(result)return HttpResponse(result)print('三级数据')second_indicator = request.GET.get('second_indicator')# 正在招聘二级岗位if second_indicator:third_indicator = ThirdIndicator.objects.filter(second_indicator_id=second_indicator, state='yes')print('二级')print(third_indicator)result = serializers.serialize("json", third_indicator)print(result)return HttpResponse(result)

3.定制js文件

#js文件$("#id_first_indicator").change(function () {let first_indicator =  $("#id_first_indicator").val();$('#id_second_indicator')[0].selectize.clearOptions();// 清空子级$.ajax({url: '/countryside/get_indicator/?first_indicator=' + first_indicator, // 根据自己需要进行填写地址type: 'get',contentType: "application/json;charset=utf-8",dataType: 'json',async: true,beforeSend: function (xhr, settings) {xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}')},success: function (data) {for (var i = 0; i < data.length; i++) {var test = {text: data[i].fields.second_indicator, value: data[i].pk, $order: i + 1}; //遍历数据,拼凑出selectize需要的格式console.log(test);$('#id_second_indicator')[0].selectize.addOption(test); //添加数据}},error: function (msg) {}})
});$("#id_second_indicator").change(function () {let second_indicator =  $("#id_second_indicator").val();$('#id_third_indicator')[0].selectize.clearOptions();// 清空子级$.ajax({url: '/countryside/get_indicator/?second_indicator=' + second_indicator, // 根据自己需要进行填写地址type: 'get',contentType: "application/json;charset=utf-8",dataType: 'json',async: true,beforeSend: function (xhr, settings) {xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}')},success: function (data) {for (var i = 0; i < data.length; i++) {var test = {text: data[i].fields.third_indicator, value: data[i].pk, $order: i + 1}; //遍历数据,拼凑出selectize需要的格式console.log(test);$('#id_third_indicator')[0].selectize.addOption(test); //添加数据}},error: function (msg) {}})
});

四、在adminx.py将js文件引入

import xadmin
from .models import FirstIndicator,SecondIndicator, ThirdIndicator, Problemclass FirstIndicatorAdmin(object):list_display = ['id', 'first_indicator', 'state', 'creat_time', 'update_time']list_per_page = 10search_fields = ['creat_time']class SecondIndicatorAdmin(object):list_display = ['id', 'first_indicator', 'second_indicator', 'score', 'state', 'creat_time', 'update_time']list_per_page = 10class ThirdIndicatorAdmin(object):list_display = ['id', 'first_indicator', 'second_indicator', 'third_indicator', 'minus_points', 'state','creat_time', 'update_time']list_per_page = 10search_fields = ['creat_time']class ProblemAdmin(object):list_display = ['id', 'creat_time', 'user', 'countryside_name', 'first_indicator', 'second_indicator', 'third_indicator','position', 'upload_img' ,'state',]list_per_page = 10search_fields = ['creat_time']def get_media(self):"""继承js并且添加我们的js文件"""media = super(ProblemAdmin, self).get_media() + self.vendor('xadmin.page.form.js')media += self.vendor('xadmin.widget.countryside.js', 'xadmin.form.css')#以下是我测试的type类型，可以拼接# media1 = Media(js=['xadmin/js/countryside.js',])# media += media1# print(type(media))# print("#### MEDIA IS {}".format(media))return media

五、实现效果

xadmin后台实现二级和三级联动下拉

参考链接：

xadmin之后台管理下拉列表实现二级联动_阿巍的笔记簿-CSDN博客
关于django2.0+Xadmin 后台页面多级联动的尝试_熊人族永不为奴的博客-CSDN博客
django xadmin后台页面实现二级联动 - 曹婷婷 - 博客园
Django实现标签联动以及xadmin中实现标签联动_time-CSDN博客_django 联动

Django实现xadmin后台二级联动、三级联动（提供另一种实现方式）相关推荐

二级联动三级联动多级联动无限级联动下拉列表或菜单专题
二级联动三级联动多级联动无限级联动下拉列表或菜单专题三维数组数据源 A - 请选择 -北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南 ...
Django中提供的6种缓存方式
由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用: 缓存,缓存将一个某个views的返回值保存至内存或者memcache中, ...
Django配置xadmin后台模板之坑（一）
环境: Python3.6 + Django2.0 + xadmin2.0 一.安装 1.首先安装就会有一个坑,很多教程的安装是直接在虚拟环境下使用 pip install xadmin 或者 pip ...
Django中提供了6种缓存方式
开发调试内存文件数据库 Memcache缓存(python-memcached模块) Memcache缓存(pylibmc模块) 1. 开发调试 1 2 3 4 5 6 7 8 9 10 11 ...
Django 省、市、区三级联动及数据库的地址添加 !!!
应用场景 `淘宝`.`京东`等需要地址的地方 Models.py模型 from django.db import models# Create your models here. class Area ...
Django扩展xadmin后台管理
python:3.7.2 django:2.1.2 githup:https://github.com/sshwsfc/xadmin 安装xadmin django版本2.0及以上一不能使用pip i ...
element级联选择器城市3级联动三级联动json数据
[{"value": "110000","label": "北京市","children": [{& ...
Django中提供了6种缓存方式，你会几种？
开发调试内存文件数据库 Memcache缓存(python-memcached模块) Memcache缓存(pylibmc模块) 1. 开发调试 # 此为开始调试用,实际内部不做任何操作# 配置 ...
极光推送经验之谈-Java后台服务器实现极光推送的两种实现方式
转载自 https://www.cnblogs.com/V1haoge/p/6439313.html 原创作品,可以转载,但是请标注出处地址http://www.cnblogs.com/V1haoge ...

Django实现xadmin后台二级联动、三级联动（提供另一种实现方式）

一、先看下app文件目录

二、编写models.py样例

三、确定二级数据和js内容

1.编写路由urls.py

2.views传递数据，json格式

3.定制js文件

四、在adminx.py将js文件引入

五、实现效果

Django实现xadmin后台二级联动、三级联动（提供另一种实现方式）相关推荐

最新文章

热门文章