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,这个钩子也可以理解成两个触发器,当出现执行语句前后是触发执行某 ...
随机推荐
- SVM的简单介绍
ng的MI-003中12 ——SVM 一.svm目标函数的由来 视频先将LR的损失函数: 在上图中,先将y等于0 和y等于1的情况集合到一起成为一个损失函数,然后分别讨论当y等于1的时候损失函数的结果 ...
- jdk1.8安装后查看Java -version出错。
最近在电脑行安装了多个jdk的版本 分别是jdk1.6,jdk1.7,jdk1.8三个版本,在配置环境变量的时候,选择的是jdk1.7; 但是奇怪的是,当我在cmd中输入java -version后, ...
- TCP/IP协议--TCP的超时和重传
TCP是可靠传输.可靠之一体现在收到数据后,返回去一个确认.但是不能完全避免的是,数据和确认都可能丢失.解决这个办法就是,提供一个发送的重传定时器:如果定时器溢出时还没收到确认,它就重传这个报文段. ...
- HDMI接口的PCB设计
1.定义 HDMI的全称是“HighDefinitionMultimedia”,即:高清多媒体接口. HDMI在引脚上和DVI兼容,只是采用了不同的封装.与DVI相比.HDMI可以传输数字音频信号,并 ...
- Spring Boot 之属性读写详解
SpringBoot 之属性读写详解 加载 property 顺序 随机属性 命令行属性 Application 属性文件 Profile 特定属性 属性中的占位符 YAML 属性 访问属性 多 pr ...
- odoo11 访问web/database/manager管理数据库页面布局混乱问题
最近在使用odoo11开发自己的模块时,在管理数据库的页面的时候,页面布局混乱,查看http加载页面的时候大量的js css文件没有加载成功,被卡了3天,现在问题找到. 问题是在加入自己的custom ...
- Ext.js Combobox 输入模糊匹配
前台页面 aspx: 数据源: <ext:Store ID="storeJF" runat="server" AutoLoad="true&qu ...
- elaticsear no [query] registered for [filtered] 错误
1.问题描述 执行语句: GET /megacorp/employee/_search { "query" : { "filtered" : { "f ...
- Java中clone的写法
Cloneable这个接口设计得十分奇葩,不符合正常人的使用习惯,然而用这个接口的人很多也很有必要,所以还是有必要了解一下这套扭曲的机制.以下内容来自于对Effective Java ed 2. it ...
- python基础学习笔记（十一）
迭代器 本节进行迭代器的讨论.只讨论一个特殊方法---- __iter__ ,这个方法是迭代器规则的基础. 迭代器规则 迭代的意思是重复做一些事很多次---就像在循环中做的那样.__iter__ 方 ...