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

urls.py

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

models.py

  1. from django.db import models
  2.  
  3. # Create your models here.
  4. # class Foo(models.Model):
  5. #     name = models.CharField(max_length=1)
  6.  
  7. class Business(models.Model):
  8.     # id
  9.     caption = models.CharField(max_length=32)
  10.     code = models.CharField(max_length=32,null=True,default="SA")
  11.     # fk = models.ForeignKey('Foo')
  12.  
  13. class Host(models.Model):
  14.     nid = models.AutoField(primary_key=True)
  15.     hostname = models.CharField(max_length=32,db_index=True)
  16.     ip = models.GenericIPAddressField(protocol="ipv4",db_index=True)
  17.     port = models.IntegerField()
  18.     b = models.ForeignKey(to="Business", to_field='id')

views.py

  1. def host(request):
  2.     if request.method == "GET":
  3.         v1 = models.Host.objects.filter(nid__gt=0)
  4.         v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
  5.         v3 = models.Host.objects.filter(nid__gt=0).values_list('nid','hostname','b_id','b__caption')
  6.  
  7.         b_list = models.Business.objects.all()
  8.  
  9.         return render(request, 'host.html', {'v1': v1,'v2': v2,'v3': v3,'b_list':b_list})
  10.  
  11.     elif request.method == "POST":
  12.  
  13.         h = request.POST.get('hostname')
  14.         i = request.POST.get('ip')
  15.         p = request.POST.get('port')
  16.         b = request.POST.get('b_id')
  17.         # models.Host.objects.create(hostname=h,
  18.         #                            ip=i,
  19.         #                            port=p,
  20.         #                            b=models.Business.objects.get(id=b)
  21.         #                            )
  22.         models.Host.objects.create(hostname=h,
  23.                                    ip=i,
  24.                                    port=p,
  25.                                    b_id=b
  26.                                    )
  27.         return redirect('/host')

html文件（需要修改，带有其他代码）：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .shade{
  11.             position: fixed;
  12.             top: 0;
  13.             right: 0;
  14.             left: 0;
  15.             bottom: 0;
  16.             background: black;
  17.             opacity: 0.6;
  18.             z-index: 100;
  19.         }
  20.         .add-modal,.edit-modal{
  21.             position: fixed;
  22.             height: 300px;
  23.             width: 400px;
  24.             top:100px;
  25.             left: 50%;
  26.             z-index: 101;
  27.             border: 1px solid red;
  28.             background: white;
  29.             margin-left: -200px;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <h1>主机列表(对象)</h1>
  35.     <div>
  36.         <input id="add_host" type="button" value="添加" />
  37.     </div>
  38.     <table border="1">
  39.         <thead>
  40.             <tr>
  41.                 <th>序号</th>
  42.                 <th>主机名</th>
  43.                 <th>IP</th>
  44.                 <th>端口</th>
  45.                 <th>业务线名称</th>
  46.                 <th>操作</th>
  47.             </tr>
  48.         </thead>
  49.         <tbody>
  50.  
  51.                 {% for row in v1 %}
  52.                     <tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
  53.                         <td>{{ forloop.counter }}</td>
  54.                         <td>{{ row.hostname }}</td>
  55.                         <td>{{ row.ip }}</td>
  56.                         <td>{{ row.port }}</td>
  57.                         <td>{{ row.b.caption }}</td>
  58.                         <td>
  59.                             <a class="edit">编辑</a>|<a class="delete">删除</a>
  60.                         </td>
  61.                     </tr>
  62.                 {% endfor %}
  63.  
  64.         </tbody>
  65.     </table>
  66.  
  67.     <h1>主机列表(字典)</h1>
  68.     <table border="1">
  69.         <thead>
  70.             <tr>
  71.                 <th>主机名</th>
  72.                 <th>业务线名称</th>
  73.             </tr>
  74.         </thead>
  75.         <tbody>
  76.             {% for row in v2 %}
  77.                 <tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
  78.                     <td>{{ row.hostname }}</td>
  79.                     <td>{{ row.b__caption }}</td>
  80.                 </tr>
  81.             {% endfor %}
  82.  
  83.         </tbody>
  84.     </table>
  85.     <h1>主机列表(元组)</h1>
  86.     <table border="1">
  87.         <thead>
  88.             <tr>
  89.                 <th>主机名</th>
  90.                 <th>业务线名称</th>
  91.             </tr>
  92.         </thead>
  93.         <tbody>
  94.             {% for row in v3 %}
  95.                 <tr hid="{{ row.0 }}" bid="{{ row.2 }}">
  96.                     <td>{{ row.1 }}</td>
  97.                     <td>{{ row.3 }}</td>
  98.                 </tr>
  99.             {% endfor %}
  100.  
  101.         </tbody>
  102.     </table>
  103.  
  104.     <div class="shade hide"></div>
  105.     <div class="add-modal hide">
  106.         <form id="add_form" method="POST" action="/host">
  107.             <div class="group">
  108.                 <input id="host" type="text" placeholder="主机名" name="hostname" />
  109.             </div>
  110.  
  111.             <div class="group">
  112.                 <input id="ip" type="text" placeholder="IP" name="ip" />
  113.             </div>
  114.  
  115.             <div class="group">
  116.                 <input id="port" type="text" placeholder="端口" name="port" />
  117.             </div>
  118.  
  119.             <div class="group">
  120.                 <select id="sel" name="b_id">
  121.                     {% for op in b_list %}
  122.                     <option value="{{ op.id }}">{{ op.caption }}</option>
  123.                     {% endfor %}
  124.                 </select>
  125.             </div>
  126.  
  127.             <input type="submit" value="提交" />
  128.             <a id="ajax_submit" >悄悄提交</a>
  129.             <input id="cancel" type="button" value="取消" />
  130.             <span id="erro_msg" style="color: red"></span>
  131.         </form>
  132.  
  133.     </div>
  134.  
  135.     <div class="edit-modal hide">
  136.         <form id="edit_form" method="POST" action="/host">
  137.                 <input type="text" name="nid" style="display:none" />
  138.                 <input type="text" placeholder="主机名" name="hostname" />
  139.                 <input type="text" placeholder="IP" name="ip" />
  140.                 <input  type="text" placeholder="端口" name="port" />
  141.                 <select name="b_id">
  142.                     {% for op in b_list %}
  143.                     <option value="{{ op.id }}">{{ op.caption }}</option>
  144.                     {% endfor %}
  145.                 </select>
  146.             <a id="ajax_submit_edit" >确认编辑</a>
  147.         </form>
  148.  
  149.     </div>
  150.  
  151.     <script src="/static/jquery-1.12.4.js"></script>
  152.     <script>
  153.         $(function(){
  154.  
  155.             $('#add_host').click(function(){
  156.                 $('.shade,.add-modal').removeClass('hide');
  157.             });
  158.  
  159.             $('#cancel').click(function(){
  160.                 $('.shade,.add-modal').addClass('hide');
  161.             });
  162.  
  163.             $('#ajax_submit').click(function(){
  164.                 $.ajax({
  165.                     url: "/test_ajax",
  166.                     type: 'POST',
  167.                     //data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val()},
  168.                     data: $('#add_form').serialize(),
  169.                     success: function(data){
  170.                         var obj = JSON.parse(data);
  171.                         if(obj.status){
  172.                             location.reload();
  173.                         }else{
  174.                             $('#erro_msg').text(obj.error);
  175.                         }
  176.                     }
  177.                 })
  178.             });
  179.  
  180.             $('.edit').click(function(){
  181.                 $('.shade,.edit-modal').removeClass('hide');
  182.  
  183.                 var bid = $(this).parent().parent().attr('bid');
  184.                 var nid = $(this).parent().parent().attr('hid');
  185.  
  186.                 $('#edit_form').find('select').val(bid);
  187.                 $('#edit_form').find('input[name="nid"]').val(nid);
  188.  
  189.                 // 修改
  190.                 /*
  191.                 $.ajax({
  192.                     data: $('#edit_form').serialize()
  193.                 });
  194.                 */
  195.                 // models.Host.objects.filter(nid=nid).update()
  196.             })
  197.         })
  198.  
  199.     </script>
  200. </body>
  201. </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. PAT Advanced 1097 Deduplication on a Linked List (25) [链表]

    题目 Given a singly linked list L with integer keys, you are supposed to remove the nodes with duplica ...

  2. LUA函数闭包

    词法定界:当一个函数内嵌套另一个函数的时候,内函数可以访问外部函数的局部变量,这种特征叫做词法定界 table.sort(names,functin (n1,n2) return grades[n1] ...

  3. CocoaPods-Alcatraz插件

    Alcatraz:Xcode的插件管理工具,可通过它添加CocoaPods插件 下载地址:https://github.com/alcatraz/Alcatraz 建议: 不提倡通过终端命令下载Alc ...

  4. 基于redis实现锁控制

    多数据源 数据源1为锁控制,数据源2自定义,可用于存储. 锁:当出现并发的时候为了保证数据的一致性,不会出现并发问题,假设,用户1修改一条信息,用户2也同时修改,会按照顺序覆盖自修改的值,为了避免这种

  5. springCloud eureka服务治理集群增加安全认证

    做为SpringCloud Netflix服务套件中的一部分,springCloud eureka基于Netflix Eureka做了二次封装,默认提供WEB管理页面及服务治理. 为了确保在生产环境中 ...

  6. Django专题-AJAX

    AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JS ...

  7. linux 笔记本

    命令 作用 tail -f 日志文件名 将日志同步输出 echo "">文件名 清空文件内容

  8. bzoj3218 a+b Problem（最小割+主席树优化建边）

    由于6.22博主要学测,大半时间学文化课,近期刷题量&写题解的数量会急剧下降. 这题出得挺经典的,首先一眼最小割,考虑朴素的做法:与S联通表示白色,与T联通表示黑色,S向i连流量为w[i]的边 ...

  9. 13.docker 网络 docker NameSpace (networkNamespace)

    一. 案例 1.创建一个 container docker run -d --name test1 busybox /bin/sh -c "while true; do sleep 3600 ...

  10. Oracle之纵向数据转换横向数据

    资源二  来源  http://www.cnblogs.com/gkl0818/archive/2009/02/25/1398078.html 1.固定列数的行列转换如student subject ...