前言

当我们选择项目分类的时候,一个项目下关联多个模块,同时有这两个选项框的时候,需要实现选中一个项目,模块里面自动删除出该项目下的模块,如下图这种

解决基本思路:

1.写个jqeury脚本监听change事件

2.ajax发个请求给后端,用views试图函数实现筛选,回传到页面上

3.xadmin加载js脚本

ajax请求

关于moles相关的内容就不重复写了,打开后台页面,查看select标签的id值,这个id值就是id_和Fieldname的组合

使用了xadmin自带的selectize.js中的方法

  • selectize.clearOptions()清空内容
  • selectize.addOption() 添加数据

$("#id_p_name").change(function (e) {
var mid = $(this).val();
$('#id_m_name')[0].selectize.clearOptions(); //二级select清空选项
$.ajax({
type: "get",
url: "/select_module/?mid=" + mid,
async: true,
beforeSend: function (xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", $.getCookie("csrftoken"));
},
success: function (data) {
data = JSON.parse(data.msg)//将JSON转换
for (var i = 0; i < data.length; i++) {
var test = {text: data[i].fields.module_name, value: data[i].pk, $order: i + 1}; //遍历数据,拼凑出selectize需要的格式
$('#id_m_name')[0].selectize.addOption(test); //添加数据
}
},
error: function (xhr, textStatus) {
console.log(xhr);
console.log(textStatus);
}
})
})

可以先在浏览器上调试下,确保没问题后,再加载js

views试图函数和urls.py配置

views.py写个试图函数,删选对应的数据,返回json

# views.py
from django.http import HttpResponse, JsonResponse
from django.core import serializers
import json
from .models import ModuleName
# Create your views here. # 二级联动View函数 def select_m(request):
# 通过get得到父级选择项
m_id = request.GET.get('mid', '')
# 筛选出符合父级要求的所有子级,因为输出的是一个集合,需要将数据序列化 serializers.serialize()
modules = serializers.serialize("json", ModuleName.objects.filter(project_info_id=int(m_id)))
# 判断是否存在,输出
if modules:
return JsonResponse({"msg": modules})

urls.py设置一个访问地址

from django.conf.urls import url
from django.contrib import admin
import xadmin
from hello import views urlpatterns = [
url(r'^xadmin/', xadmin.site.urls), # xadmin
url(r'^admin/', admin.site.urls), # 原来的admin
url(r'^select_module/', views.select_m),
]

加载js文件

xadmin加载自己写的js文件,可以参考之前写的这篇https://www.cnblogs.com/yoyoketang/p/10717388.html

接下来把自己写的javascript脚本放到/xadmin/static/xadmin/js目录下

注意前面要加个分号(

python测试开发django-57.xadmin选项二级联动的更多相关文章

  1. python测试开发django-36.一对一(OneToOneField)关系查询

    前言 前面一篇在xadmin后台一个页面显示2个关联表(OneToOneField)的字段,使用inlines内联显示.本篇继续学习一对一(OneToOneField)关系的查询. 上一篇list_d ...

  2. python测试开发django-41.crispy-forms设计标签式导航菜单(TabHolder)

    前言 xadmin的详情页面主要是用form_layout布局,学会了完全可以不用写html代码,也能做出很好看的页面. xadmin的html页面是用的Bootstrap3框架设计的,layout布 ...

  3. python测试开发django-16.JsonResponse返回中文编码问题

    前言 django查询到的结果,用JsonResponse返回在页面上显示类似于\u4e2d\u6587 ,注意这个不叫乱码,这个是unicode编码,python3默认返回的编码 遇到问题 接着前面 ...

  4. python测试开发django-15.查询结果转json(serializers)

    前言 django查询数据库返回的是可迭代的queryset序列,如果不太习惯这种数据的话,可以用serializers方法转成json数据,更直观 返回json数据,需要用到JsonResponse ...

  5. 2019第一期《python测试开发》课程,10月13号开学

    2019第一期<python测试开发>课程,10月13号开学! 主讲老师:上海-悠悠 上课方式:QQ群视频在线教学,方便交流 本期上课时间:10月13号-12月8号,每周六.周日晚上20: ...

  6. python测试开发django-rest-framework-63.基于函数的视图(@api_view())

    前言 上一篇讲了基于类的视图,在REST framework中,你也可以使用常规的基于函数的视图.它提供了一组简单的装饰器,用来包装你的视图函数, 以确保视图函数会收到Request(而不是Djang ...

  7. 《Python测试开发技术栈—巴哥职场进化记》—前言

    写在前面 今年从4月份开始写一本讲Python测试开发技术栈的书,主要有两个目的,第一是将自己掌握的一些内容分享给大家,第二是希望自己能系统的梳理和学习Python相关的技术栈.当时我本来打算以故事体 ...

  8. python测试开发django-197.django-celery-beat 定时任务

    前言 django-celery-beat 可以支持定时任务,把定时任务写到数据库. 接着前面这篇写python测试开发django-196.python3.8+django2+celery5.2.7 ...

  9. 【python测试开发栈】python基础语法大盘点

    周边很多同学在用python,但是偶尔会发现有人对python的基础语法还不是特别了解,所以帮大家梳理了python的基础语法(文中的介绍以python3为例).如果你已然是python大牛,可以跳过 ...

随机推荐

  1. java 环境安装

    因为现在的java安装需要点击同意许可才能安装,造成了在linux中使用wget命令下载无法正常完整下载,即便下载下来也是不完整的 安装会提示 no such file等一堆提示 我们使用参数如下的命 ...

  2. C# 之 数字格式化

    格式规范的完整形式:{index [,width][:formatstring]} index是此格式程序引用的格式字符串之后的参数,从零开始计数:width(可选) 是要设置格式的字段的宽度,wid ...

  3. scrapy笔记

    1.关于请求url状态码重定向问题: from scrapy import Request handle_httpstatus_list = [404, 403, 500, 503, 521, 522 ...

  4. Centos6.5系统压力测试过程大量TIME_WAIT

    统计tcp状态的命令: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' netstat -n | awk '/ ...

  5. flink--DateSet开发--简单入门

    开发流程 1. 获得一个execution environment, 2. 加载/创建初始数据, 3. 指定这些数据的转换, 4. 指定将计算结果放在哪里, 5. 触发程序执行 例子: object ...

  6. 通过java代码进行impala和kudu的对接

    对于impala而言,开发人员是可以通过JDBC连接impala的,有了JDBC,开发人员可以通过impala来间接操作kudu: maven导包: <!-- https://mvnreposi ...

  7. Kafka/Zookeeper集群的实现(二)

    [root@kafkazk1 ~]# wget http://mirror.bit.edu.cn/apache/zookeeper/zookeeper-3.4.12/zookeeper-3.4.12. ...

  8. 基于springboot通过自定义注解和AOP实现权限验证

    一.移入依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spri ...

  9. day5 列表的增删改查

    1,列表的增删改查,其他操作.2,元祖.3,列表的嵌套操作.4,开一点dict. 昨日内容回顾: 字符串的方法:1,find通过元素找索引,可切片,找不到返回-12,index,找不到报错.3,spl ...

  10. 找bug hhh

    http://oj.acm.zstu.edu.cn/JudgeOnline/problem.php?id=4434 没有用队列,疯狂找不到bug,后来发现很简单的判断时==n和m了,本来心花怒放,测试 ...