django xadmin后台页面实现二级联动
思路
- 先找到控件id ,这样就可以监听change事件
- 然后把自己写的js加入xadmin中
- 添加url和view,接受ajax请求和发送数据
第一步:找到联动上下级的ID
在浏览器中通过F12查看
父级ID:id_files_category1
子级id:id_files_categoty2
第二步:ajax请求
$('#id_files_category1').change(function () {
var module = $('#id_files_category1').find('option:selected').val(); //获取父级选中值
$('#id_files_category2')[0].selectize.clearOptions();// 清空子级
$.ajax({
type: 'get',
url: '../../select/category1_category2/?module=' + module,
data: '',
async: true,
beforeSend: function (xhr, settings) {
xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}')
},
success: function (data) {
data = JSON.parse(data.lesson)//将JSON转换 for (var i = 0; i < data.length; i++) { var test = {text: data[i].fields.category_name, value: data[i].pk, $order: i + 1}; //遍历数据,拼凑出selectize需要的格式
console.log(test)
$('#id_files_category2')[0].selectize.addOption(test); //添加数据
}
},
error: function (xhr, textStatus) {
console.log('error')
}
})
})
需要修改的地方:
我们使用了xadmin自带的selectize.js中的方法
- selectize.clearOptions()清空内容
- selectize.addOption() 添加数据
第三步,将js文件放入xadmin中
将js文件命名为按照xadmin/static/xadmin/js中的js文件命名的,否则会报错,将其放入xadmin/static/xadmin/js目录下,
第四步,让xadmin引用我们的js,
找到该文件,修改其中的AdminSelectWidget类,向里面加入我们的js
class AdminSelectWidget(forms.Select): @property
def media(self):
return vendor('select.js', 'select.css', 'xadmin.widget.select.js','xadmin.widget.categoryselect.js')
第五步:添加URL,我们写的ajax请求需要后台处理数据
views.py
# 二级联动View函数
class SelectView(LoginRequiredMixin, View):
def get(self, request):
# 通过get得到父级选择项
category1_id = request.GET.get('module', '')
# 筛选出符合父级要求的所有子级,因为输出的是一个集合,需要将数据序列化 serializers.serialize()
lessons = serializers.serialize("json", CategoryInfo.objects.filter(category_pid=int(category1_id)))
# 判断是否存在,输出
if lessons:
return JsonResponse({'lesson': lessons})
urls.py
url(r'^files/select/category1_category2/', SelectView.as_view(), name='category1_category2'),
完成!
效果图:
参考链接:https://blog.csdn.net/qq_16102629/article/details/81179250
django xadmin后台页面实现二级联动的更多相关文章
- xadmin后台页面的自定制
01-自定制页面 注:最近找到了更好的解决办法:重写钩子函数版 https://www.cnblogs.com/pgxpython/p/10593507.html 需求背景:根据要实现的功能需求,x ...
- 解决了好几天的关于django xadmin后台增加链接并执行函数的问题
由于xadmin后台封装的完整性,想要在后台做一些改动对于新手来说还是有点困难,目前解决的第一个问题: 在admin后台增加链接,使其改变上级签收状态 如图 点击签收按钮之后,改变其状态 代码展示: ...
- 七、xadmin 编辑界面实现二级联动
很多时候,我们会遇到这种需求,通过一个select框中选择的值,去动态的加载另一个下拉框中的内容 对于前端的同学来讲,这个本应该是一个很简单的需求,获取第一个下拉框的值然后通过ajax去动态加载即可. ...
- xadmin后台页面定制和添加服务器监控组件
xadmin定制 项目需要添加服务器监控页面,碍于xadmin不是很好自定义页面,之前写过插件,太麻烦了,还是直接改源码 原理其实很简单,因为xadmin的处理流程和django类似,都是通过拦截UR ...
- xadmin后台页面的自定制(2)重写钩子函数版
由于项目有通过自定义页面来实现功能的需求,百度也查了很多资料,也没找到合适的方法,所以决定分析源码,通过对源码的分析,找到了此方法. 01-需求 首先,如果要在xadmin中展示一个数据管理页面,首先 ...
- Django xadmin后台添加富文本编辑器UEditor的用法
效果图: 步骤: 1.利用命令:pip install DjangoUeditor,安装DjangoUeditor,但由于DjangoUeditor没有python3版本的,从的Github上把修改好 ...
- [py][mx]django xadmin后台配置
xadmin配置 - 安装 pip install -r https://github.com/sshwsfc/xadmin/blob/django2/requirements.txt 以下被我测试通 ...
- django:下拉框二级联动实现
注意:只列举核心部分代码 前台模板: 第一级下拉菜单: <div class="col-sm-4"> <select data-placeholder=" ...
- python测试开发django-54.xadmin添加自定义页面
前言 xadmin后台如何添加一个自己写的页面呢?如果仅仅是在GlobalSettings添加url地址的话,会丢失左侧的导航菜单和顶部的页面,和整体的样式不协调. 新增页面后希望能保留原来的样式,只 ...
随机推荐
- 【读后感】读《漫谈“大学生的四个learn”》之后有感
在看完<许纪霖教授在上海财经大学演讲——漫谈“大学生的四个Learn”>(下问简称<四l>)之后突然有点话想说.其实我对这篇文章有感的,所以想写这篇文章来说说看,我对四个lea ...
- bzoj4025二分图(线段树分治 并查集)
/* 思维难度几乎没有, 就是线段树分治check二分图 判断是否为二分图可以通过维护lct看看是否链接出奇环 然后发现不用lct, 并查集维护奇偶性即可 但是复杂度明明一样哈 */ #include ...
- 彻底搞懂Scrapy的中间件(三)
在前面两篇文章介绍了下载器中间件的使用,这篇文章将会介绍爬虫中间件(Spider Middleware)的使用. 爬虫中间件 爬虫中间件的用法与下载器中间件非常相似,只是它们的作用对象不同.下载器中间 ...
- 以time.py为文件名时,调用time包
以time.py为文件名时,调用time包,会报有什么问题呢,思考一下
- Android APK反编译(二)
参考:APK反编译 工具介绍 apktool 作用:资源文件获取,可以提取出图片文件和布局文件进行使用查看 dex2jar 作用:将apk反编译成java源码(classes.dex转化成jar文件) ...
- 嵌入式linux——S3C2440介绍(二)
一.关于S3C2440要知道的事情 (唉,刚才按错了键,弹出了网页的代码,关闭之后,白屏,什么都没有,网页返回,就没保存上,在敲一边...) 1. S3C244三星公司的芯片 2. S3C2440的构 ...
- JAVA的第二次作业
1.编写“人”类及其测试类.1.1 “人”类: 类名:Person 属性:姓名.性别.年龄.身份证号码 方法:在控制台输出各个信息1.2 测试类 类名:TestPerson 方法:main ...
- 一个PHP session的误区,自己留着长记性看看
最近在研究PHP session相关的东西,销毁session根据手册使用session_destroy()就可以了,但是天真的以为销毁了会话就可以把会话内容也销毁,但是实际上会话的内容还保存在内存里 ...
- kinect 深度图与彩色图对齐程序
//#include "duiqi.hpp" #include "kinect.h" #include <iostream> #include &q ...
- linux 之网络命令
write 给用户发消息,用户必须在线,以ctrl+d保存结束 语法: write 用户 wall发广播信息(write all) 语法:wall 信息 mail 查看发送电子邮件 发送语法 : m ...