实现:点击添加实现模态对话框,添加数据并显示。

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^host$', views.host),

models.py

from django.db import models

# Create your models here.
# class Foo(models.Model):
# name = models.CharField(max_length=1) class Business(models.Model):
# id
caption = models.CharField(max_length=32)
code = models.CharField(max_length=32,null=True,default="SA")
# fk = models.ForeignKey('Foo') class Host(models.Model):
nid = models.AutoField(primary_key=True)
hostname = models.CharField(max_length=32,db_index=True)
ip = models.GenericIPAddressField(protocol="ipv4",db_index=True)
port = models.IntegerField()
b = models.ForeignKey(to="Business", to_field='id')

views.py

def host(request):
if request.method == "GET":
v1 = models.Host.objects.filter(nid__gt=0)
v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
v3 = models.Host.objects.filter(nid__gt=0).values_list('nid','hostname','b_id','b__caption') b_list = models.Business.objects.all() return render(request, 'host.html', {'v1': v1,'v2': v2,'v3': v3,'b_list':b_list}) elif request.method == "POST": h = request.POST.get('hostname')
i = request.POST.get('ip')
p = request.POST.get('port')
b = request.POST.get('b_id')
# models.Host.objects.create(hostname=h,
# ip=i,
# port=p,
# b=models.Business.objects.get(id=b)
# )
models.Host.objects.create(hostname=h,
ip=i,
port=p,
b_id=b
)
return redirect('/host')

html文件(需要修改,带有其他代码):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.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 red;
background: white;
margin-left: -200px;
}
</style>
</head>
<body>
<h1>主机列表(对象)</h1>
<div>
<input id="add_host" type="button" value="添加" />
</div>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>主机名</th>
<th>IP</th>
<th>端口</th>
<th>业务线名称</th>
<th>操作</th>
</tr>
</thead>
<tbody> {% for row in v1 %}
<tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
<td>{{ forloop.counter }}</td>
<td>{{ row.hostname }}</td>
<td>{{ row.ip }}</td>
<td>{{ row.port }}</td>
<td>{{ row.b.caption }}</td>
<td>
<a class="edit">编辑</a>|<a class="delete">删除</a>
</td>
</tr>
{% endfor %} </tbody>
</table> <h1>主机列表(字典)</h1>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>业务线名称</th>
</tr>
</thead>
<tbody>
{% for row in v2 %}
<tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
<td>{{ row.hostname }}</td>
<td>{{ row.b__caption }}</td>
</tr>
{% endfor %} </tbody>
</table>
<h1>主机列表(元组)</h1>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>业务线名称</th>
</tr>
</thead>
<tbody>
{% for row in v3 %}
<tr hid="{{ row.0 }}" bid="{{ row.2 }}">
<td>{{ row.1 }}</td>
<td>{{ row.3 }}</td>
</tr>
{% endfor %} </tbody>
</table> <div class="shade hide"></div>
<div class="add-modal hide">
<form id="add_form" method="POST" action="/host">
<div class="group">
<input id="host" type="text" placeholder="主机名" name="hostname" />
</div> <div class="group">
<input id="ip" type="text" placeholder="IP" name="ip" />
</div> <div class="group">
<input id="port" type="text" placeholder="端口" name="port" />
</div> <div class="group">
<select id="sel" name="b_id">
{% for op in b_list %}
<option value="{{ op.id }}">{{ op.caption }}</option>
{% endfor %}
</select>
</div> <input type="submit" value="提交" />
<a id="ajax_submit" >悄悄提交</a>
<input id="cancel" type="button" value="取消" />
<span id="erro_msg" style="color: red"></span>
</form> </div> <div class="edit-modal hide">
<form id="edit_form" method="POST" action="/host">
<input type="text" name="nid" style="display:none" />
<input type="text" placeholder="主机名" name="hostname" />
<input type="text" placeholder="IP" name="ip" />
<input type="text" placeholder="端口" name="port" />
<select name="b_id">
{% for op in b_list %}
<option value="{{ op.id }}">{{ op.caption }}</option>
{% endfor %}
</select>
<a id="ajax_submit_edit" >确认编辑</a>
</form> </div> <script src="/static/jquery-1.12.4.js"></script>
<script>
$(function(){ $('#add_host').click(function(){
$('.shade,.add-modal').removeClass('hide');
}); $('#cancel').click(function(){
$('.shade,.add-modal').addClass('hide');
}); $('#ajax_submit').click(function(){
$.ajax({
url: "/test_ajax",
type: 'POST',
//data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val()},
data: $('#add_form').serialize(),
success: function(data){
var obj = JSON.parse(data);
if(obj.status){
location.reload();
}else{
$('#erro_msg').text(obj.error);
}
}
})
}); $('.edit').click(function(){
$('.shade,.edit-modal').removeClass('hide'); var bid = $(this).parent().parent().attr('bid');
var nid = $(this).parent().parent().attr('hid'); $('#edit_form').find('select').val(bid);
$('#edit_form').find('input[name="nid"]').val(nid); // 修改
/*
$.ajax({
data: $('#edit_form').serialize()
});
*/
// models.Host.objects.filter(nid=nid).update()
})
}) </script>
</body>
</html>

  

python djangjo完整的实现添加的实例的更多相关文章

  1. Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验

    Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...

  2. Python导出Excel为Lua/Json/Xml实例教程(一):初识Python

    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...

  3. 一个完整的Installshield安装程序实例—艾泽拉斯之海洋女神出品(四) --高级设置二

    原文:一个完整的Installshield安装程序实例-艾泽拉斯之海洋女神出品(四) --高级设置二 上一篇:一个完整的安装程序实例—艾泽拉斯之海洋女神出品(三) --高级设置一4. 根据用户选择的组 ...

  4. 一个完整的Installshield安装程序实例-转

    一个完整的Installshield安装程序实例—艾泽拉斯之海洋女神出品(一)---基本设置一 前言 Installshield可以说是最好的做安装程序的商业软件之一,不过因为功能的太过于强大,以至于 ...

  5. Python导出Excel为Lua/Json/Xml实例教程(三):终极需求

    相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 Python导出E ...

  6. python操作mysql数据库的相关操作实例

    python操作mysql数据库的相关操作实例 # -*- coding: utf-8 -*- #python operate mysql database import MySQLdb #数据库名称 ...

  7. asp.net中生成缩略图并添加版权实例代码

    这篇文章介绍了asp.net中生成缩略图并添加版权实例代码,有需要的朋友可以参考一下 复制代码代码如下: //定义image类的对象 Drawing.Image image,newimage; //图 ...

  8. python基础——类名称空间与对象(实例)名称空间

    python基础--类名称空间与对象(实例)名称空间 1 类名称空间 创建一个类就会创建一个类的名称空间,用来存储类中定义的所有名字,这些名字称为类的属性 而类的良好总属性:数据属性和函数属性 其中类 ...

  9. Python NLP完整项目实战教程(1)

    一.前言 打算写一个系列的关于自然语言处理技术的文章<Python NLP完整项目实战>,本文算是系列文章的起始篇,为了能够有效集合实际应用场景,避免为了学习而学习,考虑结合一个具体的项目 ...

随机推荐

  1. Ubuntu---gedit 打开windows 下 .txt 文件乱码的解决方法

    问题出现情况:在windows 下编辑的 .txt 文件复制到 Ubuntu 下打开,默认打开方式为 gedit 软件打开,出现如下乱码: 出现原因:在 windows 系统下,.txt 文件默认编码 ...

  2. PAT Basic 1007 素数对猜想 (20) [数学问题-素数]

    题目 让我们定义 dn 为:dn = pn+1 – pn,其中 pi 是第i个素数.显然有 d1=1 且对于n>1有 dn 是偶数."素数对猜想"认为"存在⽆穷多对 ...

  3. oracle 学习(三)pl/sql语言函数

    系统内置函数 数学运算函数 字符串函数 统计函数 日期函数 用户定义函数:存储在数据库中的代码块,可以把值返回到调用程序.调用时如同系统函数一样 参数模式 IN模式:表示该参数时输入给函数的参数 OU ...

  4. HDU-4004 The Frog's Games (分治)

    http://acm.hdu.edu.cn/showproblem.php?pid=4004 Problem Description The annual Games in frogs' kingdo ...

  5. 4.windows-oracle实战第四课 -表的查询

    所有语句均为安装oracle数据库后scott的默认表emp,dept等表 1.自己插入自己:insert into 表名 (字段)select *from 表名 2.去除重复行: select di ...

  6. tesseract系列(4) -- tesseract训练问题总结

    1. 每次训练模型删除目录下,上述重复的名字 2. 生成inttemp.pffmtable文件的时候,如果下述命令(1)不行的话,或者报错,使用命令(2) (1)mftraining -F font_ ...

  7. 【Java杂货铺】用Security做权限极简入门

    原来大多数单体项目都是用的shiro,随着分布式的逐渐普及以及与Spring的天生自然的结合.Spring Security安全框架越受大家的青睐.本文会教你用SpringSecurity设计单项目的 ...

  8. 分层结构与MVC模式

    一.分层结构1.所谓分层结构.把不同的功能代码封装成类,把相同功能的类封装在一个个的包中,也叫层.功能归类如下:实体类:封装数据,是数据的载体,在层与层之间进行传递,数据也就传递了.比如说要传递学生信 ...

  9. 1088. Rational Arithmetic (20)

    1.注意在数字和string转化过程中,需要考虑数字不是只有一位的,如300转为"300",一开始卡在里这里, 测试用例: 24/8 100/10 24/11 300/11 2.该 ...

  10. 阿里巴巴IconFont的使用方式

    一.解释一下为什么要使用IconFont? IconFont顾名思义就是把图标用字体的方式呈现. 其优点在于以下几个方面: 1.可以通过css的样式改变其颜色:(最霸气的理由) 2.相对于图片来说,具 ...