Django实现标签联动以及xadmin中实现标签联动
如图,即实现点击一个城市,出现对应的学校名称。开始一直以为是建立数据表的时候实现的,原来是通过ajax实现的。
思路:当get请求显示原始状态(即下拉框呈现全部内容)。当点击一个城市后,通过ajax的post方式提交,然后后端返回筛选的数据到前端,然后js先将所有的学校标签删除,创建后端传过来的学校标签
views.py
class IndexView(View):
def get(self,request):
citys = City.objects.all()
schools = School.objects.all()
return render(request,'index.html',{
'citys':citys,
'schools':schools,
}) def post(self,request):
selectCity = request.POST.get('selectVal')
schools = City.objects.get(name=selectCity).school_set.all()
schoolLists = [ obj.name for obj in schools]
schoolDict = dict(zip(schoolLists,schoolLists))
print(schoolLists)
return HttpResponse(json.dumps(schoolDict))
前端
$("#city ul li").on('click',function () { var selectVal = $(this).text();
$("#city button:first").text(selectVal);
$.ajax({
type:'POST',
url:"{% url 'index' %}",
data:{'selectVal':selectVal},
success:function(data) { var len = $("#school li a").length;
for(var i=0;i<len;i++){
$("#school li a").eq(0).remove();
}
ret = JSON.parse(data);
for (var obj in ret) {
$("#school ul").append("<li><a>"+ obj +"</a></li>");
}
}
})
});
前端的html文件直接是bootstrap的,大致是
<div id="school" class="dropdown" style="float:left;margin-left:100px">
<button id="i1" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
学校
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
{% for obj in schools %}
<li><a href="#" data-value="{{ obj.name }}">{{ obj.name }}</a></li>
{% endfor %}
</ul>
</div> </div>
这样,就能选择了。
2.下面是在xadmin中实现标签联动,全部按照https://blog.csdn.net/qq_16102629/article/details/81179250 做的
难点就是如何在注册的model中引入自定义的js文件。
models.py
class Student(models.Model):
name = models.CharField(max_length=10,verbose_name=u'姓名',null=True,blank=True)
school = models.ForeignKey(School,verbose_name=u'学生所在学校',null=True,blank=True)
city = models.ForeignKey(City,verbose_name=u'学生所在城市',null=True,blank=True) class Meta:
verbose_name = u'学生'
verbose_name_plural = verbose_name def __str__(self):
return self.name
自定义的xadmin.js(名字随便取)文件,放入extra_app/xadmin/static/xadmin/js 中,然后在extra_app/xadmin/widgets.py中添加自定义的xadmin.js文件中。js的id_city和id_school从页面中找到
$('#id_city').change(function () {
var module = $('#id_city').find('option:selected').val(); //获取父级选中值
$('#id_school')[0].selectize.clearOptions();// 清空子级
$.ajax({
type: 'get',
url: '/select/city_school/?module=' + module,
data: '',
async: true,
beforeSend: function (xhr, settings) {
xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}')
},
success: function (data) {
data = JSON.parse(data.schools)//将JSON转换
console.log(data);
for (var i = 0; i < data.length; i++) { var test = {text: data[i].fields.name, value: data[i].pk, $order: i + 1}; //遍历数据,拼凑出selectize需要的格式
console.log(test);
$('#id_school')[0].selectize.addOption(test); //添加数据
}
},
error: function (xhr, textStatus) {
console.log('error')
}
})
})
接下来,视图函数
urlpatterns = [
url(r'select/city_school/',SelectView.as_view(),name='city_school'),
]
from django.core import serializers
class SelectView(View):
def get(self,request):
print("asd")
city_id = request.GET.get('module','')
schools = serializers.serialize("json", School.objects.filter(school_city_id=int(city_id)))
print(schools)
# 判断是否存在,输出
if schools:
return JsonResponse({'schools': schools})
https://blog.csdn.net/qq_34964399/article/details/80998502
Django实现标签联动以及xadmin中实现标签联动的更多相关文章
- django中自定义标签和过滤器
想要实现自定义标签和过滤器需要进行准备工作: 准备(必需)工作: 1 在某个app下创建一个名为templatetags(必需,且包名不可变)的包.假设我们在名为polls的app下创建了一个tem ...
- Django 模板中 include 标签使用小结
include 标签允许在模板中包含其它的模板的内容. 标签的参数是所要包含的模板名称,可以是一个变量,也可以是用单/双引号硬编码的字符串. 每当在多个模板中出现相同的代码时,就应该考虑是否要使用 { ...
- 测试开发之Django——No6.Django模板中的标签语言
模板中的标签语言 1.if/else {% if %} 标签检查(evaluate)一个变量,如果这个变量为真(即:变量存在,非空,不是布尔值假),系统会显示在{% if %} 和 {% endi ...
- django—xadmin中集成富文本编辑器ueditor
一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...
- Django项目中模板标签及模板的继承与引用【网站中快速布置广告】
Django项目中模板标签及模板的继承与引用 常见模板标签 {% static %} {% for x in range(x) %}{% endfor %} 循环的序号{% forloop %} 循环 ...
- 关于django中input标签中file类型以及开路由
0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...
- django xadmin中logout页面在chrome浏览器中点击关闭页面无效
问题现象 django xadmin中logout页面在chrome浏览器中点击关闭页面无效,无法关闭相应的页面 问题原因 高版本的chrome等浏览器不支持在window.colse()的写法 问题 ...
- AngularJS中实现无限级联动菜单
多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的 ...
- Django 学习第五天——自定义过滤器及标签
代码布局:(自定义的代码放在哪?) 1.创建某个 app 特有的: 在 app 目录下,创建 templatetags python包(文件夹): 再到 templatetags 文件夹下创建pyth ...
随机推荐
- Mybatis动态查询
需要导入的jar包: 实体类User: package com.bjsxt.pojo; import java.io.Serializable; public class User implement ...
- 2019牛客全国多校训练四 I题 string (SAM+PAM)
链接:https://ac.nowcoder.com/acm/contest/884/I来源:牛客网 题目描述 We call a,ba,ba,b non-equivalent if and only ...
- docker入门-镜像管理命令篇
一.下载.上传镜像 1:下载安装centos镜像 语法:docker [参数][镜像名称] [root@host1 ~]# docker pull centos Using default tag ...
- webpack实践(一)- 先入个门
一.前言 webpack是个啥呢?看官网的这段描述. webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 在我以前做纯html.css. ...
- 【Java Web开发学习】Spring发布RMI服务
[Java 远程服务]Spring发布RMI服务 转载:https://www.cnblogs.com/yangchongxing/p/9084066.html RmiServiceExporter可 ...
- Django序列化时间报错
一.前言 当利用models模块从数据库获取数据时,当获的取数据序列化时,如果获取的数据中有关于时间类型的字段,则会报错,错误如下: TypeError: datetime.datetime(2018 ...
- CMAKE同时编译C++和CUDA文件
1. 首先是运行环境 Ubuntu 16.04 G++ 5.4.0 CUDA 8.0 2. 文件结构 cv@cv:~/myproject$ tree src src/ |-- CMakeLists.t ...
- vue项目的开发
vue项目的开发 我们已经通过命令行创建了一个vue项目,并且打开了这个项目.下面是这个文件的src文件夹,这个文件夹放了整个项目的核心代码. 一.vue文件的用处简介. 1.assets文件夹,用来 ...
- 62-Weave 网络结构分析
上一节我们安装并创建了 Weave 网络,本节将部署容器并分析网络结构. 在 host1 中运行容器 bbox1: eval $(weave env) docker run --name bbox1 ...
- 【转】CAP 定理的含义
原文链接:CAP 定理的含义 作者: 阮一峰 日期: 2018年7月16日 分布式系统(distributed system)正变得越来越重要,大型网站几乎都是分布式的. 分布式系统的最大难点,就是各 ...