python下拉框⼆级联动_djangoxadmin后台页⾯实现⼆级联动思路
先到控件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 = ('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'),
完成！
效果图：
xadmin后台页⾯的⾃定制
解决了好⼏天的关于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后台配置
django：下拉框⼆级联动实现
注意：只列举核⼼部分代码 前台模板: 第⼀级下拉菜单:
python测试开发django-54.xadmin添加⾃定义页⾯
前⾔ xadmin后台如何添加⼀个⾃⼰写的页⾯呢?如果仅仅是在GlobalSettings添加url地址的话，会丢失左侧的导航菜单和顶部的页⾯，和整体的样式不协调. 新增页⾯后希望能保留原来的样式，只 ...
随机推荐
nodejs模块——fs模块
fs模块⽤于对系统⽂件及⽬录进⾏读写操作. ⼀.同步和异步 使⽤require('fs')载⼊fs模块，模块中所有⽅法都有同步和异步两种形式. 异步⽅法中回调函数的第⼀个参数总是留给异常参数(exce ...
微软职位内部推荐-UX Designer II
微软近期Open的职位: Search Technology Center Asia (STCA) Position: UX Designer Location: Beijing, China Sea ...
django admin 自定义页面
Html - Iframe
⽗页⾯调⽤⼦页⾯ //⽤这个对象调⽤⼦页⾯的函数或者dom var myiframe = $("#right_iframe")[0].contentWindow; ⼦页⾯调⽤⽗页⾯ ...
linux常⽤头⽂件及说明
linux常⽤头⽂件及说明 1. Linux中⼀些头⽂件的作⽤: :ANSI C.提供断⾔,assert(表达式):GCC.GTK,GNOM ...
[COGS 2258][HZOI 2015&rsqb；复仇的序幕曲
Description 你还梦不梦痛不痛，回忆这么重你怎么背得动 ----序⾔ 当年的战⽕硝烟已经渐渐远去，可仇恨却在阿凯蒂王⼦的⼼中越来越深 他的叔⽗三年前谋权篡位，逼宫杀死了他的⽗王,⽤铁⾎⼿腕平 ...
[Leetcode]237. Delete Node in a Linked List -David_Lin
Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...
myeclipse 10配置jboss 7.1.1⽆法启动Error: Could not create the Java Virtual Machine
myeclipse 10中配置jboss 7.1.1，多写了个server name，结果死活启动不了.后来，发现了这个细节. 错误显⽰: 错误源头: 删掉Server name 后，可以完美启动 ⼩问 ...
Robot Framework分层、开发系统关键字
mysql中参数--init-file的作⽤是什么呢？
需求描述: 今天在修改测试环境mysql数据库中root⽤户密码的时候,⽤到了--init-file参数, 所以，就在这⾥说下该参数的作⽤. 概念解释: 参数:--init-file=file_nam ...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。