脚本之家
你与百万开发者在一起
作者 | 二赛君
出品 | 脚本之家(ID:jb51net)
1 问题引出
我们在开发网站的时候可能会遇到这种情况,多个字段之间有一定的关联性,比如省市县,选择省,之后下一个选择框的值则为该省的市集合,选择市之后下一个选择框的值为该市的县集合。
一种实现方式是,建立三个模型表,用外键一对多方式,显然这样是不太合理的。Django提供了自关联的实现,模型自身关联,即一条数据关联另一条数据。
本文以省市县为案例介绍其具体实现方法。
2 具体实现
2.1 建立数据表Model
在model.py中建立数据表
class AdressInfo(models.Model):
address = models.CharField(max_length = 200, null = True, blank = True, verbose_name = ‘地址’)
pid = models.ForeignKey(‘self’ , null = True, blank = True, verbose_name = ‘自关联’)
def __str__(self):
return self.adress
说明:
address :省市县的名字
pid:外键,self自关联,这里也可以使用 AdressInfo
null:为True表示可以为空,因为省级行政单位没有父级
blank:为True表示admin后台数据写入的时候可以允许为空
然后迁移数据库
python manage.py makemigrations
python manage.py migrate
这时可以在后台数据表中添加数据
2.2 后端url和view函数
将前端网页地址映射为对应函数,用正则表达式获取前端传输的pid
url.py 文件
urlpatterns = [
url(r'^addr/(d+)$', Address.addrAPI, name = 'Addr)
]
view.py 文件
def addrAPI(request,addr_id): # 接收一个参数的id,指model中的pid属性对应的字段
if (int(addr_id) == 0): # 为0表示查询省,省的pid_id为null
address_data = AddressInfo.objects.filter(pid__isnull = True).values('id','address')
else: # 查询市或其他县
address_data = AddressInfo.objects.filter(pid_id = int(addr_id)).values('id','address')
area_list = []
for a in address_data:
area_list.append({'id':a['id'], 'address':a['address']})
return JsonResponse(area_list, safe = False)
2.3 前端template
前端主要是显示和执行操作相应,具体实现是通过下拉框值的改变触动相应函数。这里只写关键的地方。
address.html 文件
id = 'pro'>
value=''>请选择省
id = 'city'>
value=''>请选择市
id = 'dis'>
value=''>请选择县
address = function(a, b)
{
$.get('/addr/'+a, function (dic){
$.each(dic, function(index, item){
b.append('+ item.id + '">' + item.address + '')
})
})
}
$(function (){
// 获取省市县元素
pro = $('#pro')
city = $('#city')
dis = $('#dis')
// 查询省信息
address(0, pro)
// 根据省查询市信息
pro.change(function(){
city.empty().append('请选择市');
dis.empty().append('请选择县');
adress(this.value, city)
})
// 根据市查询县信息
city.change(function(){
dis.empty().append('请选择县');
adress(this.value, dis)
})
})
3 效果
作者简介:二赛君,初入职场小白,业余时间喜欢折腾,某985高校机械出身的代码搬砖工。
声明:本文为 脚本之家专栏作者 投稿,未经允许请勿转载。
-END-
觉得不错,请把这篇文章分享给你的朋友
转载 / 投稿请联系:Panda-nian
更多精彩,点击菜单栏“文章”进行查看
● 中国锦鲤信小呆为兑奖曾刷爆信用卡、陷入焦虑?网友:但我仍想做锦鲤
● 脚本之家粉丝福利,请查看!
● 中国互联网公司亏损能力排行榜
● 微软劝你别再使用 IE 浏览器
● 最具潜力的编程语言GO有新书啦!
小贴士返回 上一级 搜索“Java 女程序员 大数据 留言送书 运维 算法 Chrome 黑客 Python JavaScript 人工智能 女朋友 MySQL 书籍 等关键词获取相关文章推荐。