当前位置：首页 > 编程日记 > 正文

select三级联动怎么删除前一个的_python测试开发django57.xadmin选项二级联动

编程日记 2024-06-20 08:10:00

前言

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

解决基本思路：
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目录下

注意前面要加个分号(;),要不然不生效

get_media加载js

xadmin注册的时候，重写get_media方法，添加xadmin.add.select.js

class ApiTestAdmin(object):
    list_display = ["name", "url", "type"]

    def get_media(self):
        # media is the parent's return value (modified by any plugins)
        media = super(ApiTestAdmin, self).get_media() + self.vendor('xadmin.page.list.js', 'xadmin.page.form.js')
        # if self.list_display_links_details:
        #     media += self.vendor('xadmin.plugin.details.js', 'xadmin.form.css')

        # xadmin.list.xxx.js是自己写的js脚本
        media += self.vendor('xadmin.add.select.js', 'xadmin.form.css')
        return media

        # media = super(ControlImage,self).get_media()
        # media.add_js(('js/content.js',))    # 这种方法行不通，会报找不到.add_js方法
        # return media

xadmin.site.register(models.ApiTest, ApiTestAdmin)

主要思路参考这篇博客 https://www.cnblogs.com/ttzz/p/10732405.html

2019年《python3自动化UI+接口》课程5月25-7月27开课主讲老师：上海-悠悠
上课方式：QQ群视频在线教学
上课时间：每周六、周日晚上20:30-22:30
报名费：2000
联系QQ：283340479
课表详情：5月25号开学!第13期《python3自动化测试selenium+接口》课程

https://www.dkcj.cn/info/11512.html

select三级联动怎么删除前一个的_python测试开发django57.xadmin选项二级联动

前言

ajax请求

views试图函数和urls.py配置

加载js文件

get_media加载js

相关文章：

安装wdcp的方法和bug

第七周读书笔记

是什么限制了区块链技术的应用？

软件包管理（rpmyum）

python yield理解_对Python中Yield的理解

Linux下文件的三种时间戳

比特币和以太坊本质有什么区别？

HDU1402（FFT入门）

python怎么读_如何用Python读写文件

什么是区块链智能合约？

python数据分析基础余本国_Python数据分析基础

stm32F042 (二) 按键触发中断

区块链和智能合约的关系

repo同步代码_iTOP-4412开发板android4.0代码下载和编译

vue项目构建实战基础知识：SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除...

神奇的输入 while（cin....）如何在遇见换行之后进入下一层循环读入

区块链中的“智能合约”有何应用？

米勒罗宾素性测试（Miller–Rabin primality test）

Linux Linux程序练习十一（网络编程大文件发送UDP版）

iic通信原理_电子知识之IIC通信原理和协议分享

以太坊核心概念

使用rest_framework写api接口的一些注意事项(axios发送ajax请求)

iir数字滤波器_手把手教系列之一阶数字滤波器设计实现（附代码)

正则表达式中$1,$2 ===算是什么意思

为什么以太坊能成为区块链2.0的代表之作？

(转)搭建企业内部yum仓库(centos6+centos7+epel源)

vs按f5没反应_《死神vs火影》中最受欢迎的游戏角色，仙鸣当之无愧上榜

IEC61850笔记--IEC61850应用入门（二）

区块链赚钱的9种方式

7、在对象内部尽量直接访问实例变量