Django-website 程序案例系列-7 创建多对多关系表
创建多对多关系表：
方式一：一共三张表其中有一张中间表需要手工建立（建议使用第一种方式自定制程度高）
class Host(models.Model):
hostname = models.CharField(max_length=32, db_index=True)
ip = models.GenericIPAddressField(db_index=True,protocol="ipv4")
port = models.IntegerField()
b = models.ForeignKey('Business', to_field='id') class Application(models.Model):
name = models.CharField(max_length=32) class HostToApp(models.Model): #多对多关系的中间表
hobj = models.ForeignKey(to='Host', to_field='id')
aobj = models.ForeignKey(to='Application', to_field='id')
方式二：一共两张表没有中间表，中间表又django自动生成（默认只能生成3列数据，如果需要更多数据就需要使用方式一来建立多对多关系）
class Host(models.Model):
hostname = models.CharField(max_length=32, db_index=True)
ip = models.GenericIPAddressField(db_index=True,protocol="ipv4")
port = models.IntegerField()
b = models.ForeignKey('Business', to_field='id') class Application(models.Model):
name = models.CharField(max_length=32)
r = models.ManyToManyField("Host") #建立多对多的关系，django自动生成中间表 #操作第三章表
obj = Application.objects.get(id=1)
obj.r.add(1) #增加第三张表的关系
obj.r.add(2,3)
obj.r.add(*[1,2,3,4]) obj.r.remove(1) #删除
obj.r.remove(2,3)
obj.r.remove(*[1,2,3])
obj.r.clear() #清空
obj.r.set([3,5,7]) #修改
obj.r.all() #获取所有相关host对象列表（QuerySet）
views.py
#传统模式使用GET和POST方式来接收表单数据
def app(request):
if request.method == "GET":
app_list = models.Application.objects.all()
host_list = models.Host.objects.all()
return render(request, 'app.html',{'app_list': app_list, 'host_list': host_list})
elif request.method == "POST":
app_name = request.POST.get('app_name') #拿到前端传来的增加app的名字
host_list = request.POST.getlist('host_list') #拿到前端传来的增加host关联的数据，使用getlist()获取列表
obj = models.Application.objects.create(name=app_name) #Application表中创建新的appname
obj.r.add(*host_list) #创建第三章表中的关系数据
return redirect('/app') #刷新页面
#使用aja来实现表单数据的接收
def ajax_add_app(request):
ret = {'status': True, 'error': None, 'data': None} #设置一个json格式的字符串
app_name = request.POST.get('app_name')
host_list = request.POST.getlist('host_list')
obj = models.Application.objects.create(name=app_name)
obj.r.add(*host_list)
return HttpResponse(json.dumps(ret)) #返回一个json格式的字符串
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.host-tag{ #显示主机关系标签的样式
display: inline-block;
padding: 3px;
border: 1px solid red;
background-color: #0169eb;
}
.hide{
display: none;
}
.shade{
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: black;
opacity: 0.6;
z-index: 100;
}
.add-modal,.edit-modal{
position: fixed;
height: 300px;
width: 400px;
top: 100px;
left: 50%;
z-index: 101;
border: 1px solid black;
background: white;
margin-left: -200px;
}
</style>
</head>
<body> <h1>应用列表</h1>
<div>
<input type="button" id="add_host" value="添加"/>
</div>
<table border="1">
<thead>
<tr>
<td>应用名称</td>
<td>应用主机列表</td>
</tr>
</thead>
<tbady>
{% for app in app_list %} #添加页面中显示Application表的相关信息
<tr aid="{{ app.id }}">
<td>{{ app.name }}</td>
<td>
{% for host in app.r.all %} #通过中间表拿到主机表信息
<span class="host-tag" hid="{{ host.id }}">{{ host.hostname }}</span>
{% endfor %}
</td>
<td>
<a class="edit">编辑</a>
</td>
</tr>
{% endfor %}
</tbady>
</table>
<div class="shade hide"></div>
<div class="add-modal hide">
<form action="/app" method="POST" id="add_form">
<div class="group">
<input type="text" id="host" placeholder="应用名称" name="app_name"/>
</div>
<div class="group">
<select id="host_list" name="host_list" multiple>
{% for op in host_list %}
<option value="{{ op.id }}">{{ op.hostname }}</option>
{% endfor %}
</select>
</div>
<input type="submit" value="提交"/>
<input type="button" id="cancel" value="取消"/>
<input type="button" id="add_submit_ajax" value="ajax提交"/> </form>
</div>
<div class="edit-modal hide"> #编辑Application表页面（修改）
<form action="/host" method="POST" id="edit_form" >
<input type="text" name="hid" style="display: none;"/>
<input type="text" placeholder="应用名称" name="app"/>
<select name="host_list" multiple>
{% for op in host_list %}
<option value="{{ op.id }}">{{ op.hostname }}</option>
{% endfor %}
</select>
<a id="ajax_submit_edit">确认编辑</a>
</form>
</div> </body> <script src="static/js/jquery.min.js"></script>
<script>
$(function() {
$('#add_host').click(function () {
$('.shade,.add-modal').removeClass('hide');
});
$('#cancel').click(function () {
$('.shade,.add-modal').addClass('hide');
}); $('#add_submit_ajax').click(function () { #增加Application表操作的JS
$.ajax({
url: '/ajax_add_app', #对应的url
//data: {'user': 123, 'host_list': [1,2,3,4]}, #使用传统方式传数据
data: $('#add_form').serialize(), #使用简单的方式，直接使用<form>表单的ID然后serialize()直接自动形成键值方式提交
type: "POST", #使用POST方式提交
dataType: 'JSON', #使用JSON格式
traditional: true, #开启列表接收，如‘host_List’: [1,2,3,4]这样后台就能拿到列表
success: function (obj) {
console.log(obj); #前端调试台打印响应的数据
},
error: function () { }
})
}); $('.edit').click(function () {
$('.edit-modal,.shade').removeClass('hide'); hid_list = []; #设置一个空列表
$(this).parent().prev().children().each(function () { #信息表中找到主机关系对应的每一个对象标签做循环
var text = $(this).text(); #拿到appname
var hid = $(this).attr('hid'); #拿到主机ID
hid_list.push(hid); #将主机ID放入空列表
console.log(hid,text);
})
//console.log(hid_list)
$('#edit_form').find('select').val(hid_list); #将主机列表放到多选框中得到默认选中的选项 });
})
</script>
</html>
Django-website 程序案例系列-7 创建多对多关系表的更多相关文章
- 多对多关系表的创建方式、forms组件
目录 多对多关系表的三种创建方式 1.全自动,Django自动创建 2.纯手撸 3.半自动(推荐使用) forms组件 小例子 forms组件 校验器 钩子函数 局部钩子 全局钩子 forms组件常用 ...
- 用SQLAlchemy创建一对多，多对多关系表
多对多关系表的创建: 如果建立好多对多关系后,我们就可以通过关系名进行循环查找,比如laowang = Teacher.query.filter(Teacher.name=='laowang').fi ...
- Django-website 程序案例系列-18 多表跨表操作优化
详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化 在数据库有外键的时候,使用 select_related() 和 pref ...
- EF架构~关于多对多关系表无法更新与插入的问题
回到目录 在EF里,我们设计模型时,会设计到多对多关系,在EF里会把这种关系会转成两个一对多的关系表,这是比较友好的,因为多对多来说,对于业务本身没什么意思,所以隐藏了,没什么坏处,但对于这个隐藏来说 ...
- 基于.net mvc的校友录（七、文件上传以及多对多关系表的LINQ查询实现）
图片的上传与调用 图片的上传就是文件的上传,在前台使用的是type="file"的input,但是,要将表单声明为multipart/form-data模式,方法是在BeginFo ...
- 多对一关系表 java类描述
少的一方把它查询出来,多的一方看需求把它查出来 涉及java对象涉及到多个对象相互引用,要尽量避免使用一对多,或多对多关系,而应使用多对一描述对象之间的关系(或使用延迟加载的方式). 下个例子empl ...
- Django-website 程序案例系列-17 forms表单验证的字段解释
1.Django内置字段如下: Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial ...
- Django-website 程序案例系列-16 modle.form(表单验证)
案例程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Django-website 程序案例系列-15 singnal分析
在django框架中singnal的应用相当于在你执行某些重要函数语句时在这条语句的前后放置两个预留的钩子,这两个钩子就是singnal,这个钩子也可以理解成两个触发器,当出现执行语句前后是触发执行某 ...
随机推荐
- centos 6.X下建立arduino开发环境
一.安装arduino IDE 1.下载linux下arduino IDE安装包,从网址:http://arduino.cc/en/Main/Software下载,如果这个网址打不开,可从网盘下载:h ...
- excel保存为制表符分隔的文本文件 js无法完整读取
excel保存为制表符分隔的文本文件 js无法完整读取 excel另存为文本有两个选项,一个是制表符分隔的文本文件,一个是unicode文本.生成的文件Unicode更大一些.但是这里需要注意的是[制 ...
- C# 获取电脑MAC地址，IP地址，物理内存，CPU序列号，硬盘ID..........................
上班很忙,自己做个记录 代码如下: 需要引入:System.Management 代码如下: using System; using System.Collections.Generic; using ...
- [2019校招] - Java多线程面试题总结
Object 的 wait()和notify() 方法 下图为线程状态的图: Object 对象中的 wait()和notify()是用来实现实现等待 / 通知模式.其中等待状态和阻塞状态是不同的.等 ...
- slurmdbd.conf系统初始配置
# Archive info ArchiveJobs=yes ArchiveDir=/usr/local/globle/softs/slurm/16.05.3/archive/ ArchiveStep ...
- RabbitMQ --- Hello Mr.Tua
目录 RabbitMQ --- Work Queues(工作队列) RabbitMQ --- Publish/Subscribe(发布/订阅) RabbitMQ --- Routing(路由) 安装环 ...
- CrackMe-005全破详解（图文+源码）--上篇
逆向破解 | 逆向 | 逆向分析 | CrackMe | Crack | CrackMe5 | CrackMe05 前言 CrackMe005,都说比较变态,很多人给放过去了,但是我还是决定上了它,既 ...
- 对PS的评价
Photoshop(简称:PS)是电脑上的图像处理软件:对于广大Photoshop爱好者而言,PS亦用来形容通过该类图形处理软件处理过的图片,即非原始.非未处理的图片:多数人对于这软件的了解仅限于“一 ...
- M1阶段个人总结
经过4周的开发,我们团队的第一阶段已经结束了. 这一个月来我由于其他事情较多,所以开发的工作主要交给了另外的三名同学. 我主要负责制定代码规范和工程结构,通过github来跟进项目进度,提供一些技术支 ...
- 【CV】ICCV2015_Unsupervised Learning of Spatiotemporally Coherent Metrics
Unsupervised Learning of Spatiotemporally Coherent Metrics Note here: it's a learning note on the to ...