python djangjo完整的实现添加的实例

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

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完整的实现添加的实例

最新文章

热门文章