将数据表格数据传递给modal django

时间：2017-07-25 17:29:47

标签： python ajax django bootstrap-modal

我想显示从数据表到模态引导程序的数据。

示例：

Name    | prenom | id |edit
example | test   |  2 |button edit

按钮会将数据发送到模态以显示更新。

按钮代码：

<a class="btn btn-info" role="button" data-toggle="modal" data-form="{% url 'up' id=val.id }" data-target="#myEdit" >Edit</a>

模态代码：

<div class="modal fade" id="myEdit" role="dialog">
    <div class="modal-dialog">
        <form  class="well contact-form" method="post" action="{% url 
      'up'}">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <label for="usr">Name:</label>
                    <input type="text" class="form-control" required="" name="uss" value="{{ instance.name }}" id="uss">
                    <label for="pwd">Password:</label>
                    <input  type="password"  class="form-control" required="" value="{{ instance.sname }}" name="pwd" id="pwd" >
                </div>
                <div class="modal-footer">
                    <button  type="submit" class="btn btn-default">Valider</button>
                    <button  value="" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

views.py 

def posts_edit(request, id=None):
    instance = get_object_or_404(namemodel, id=id)
    context={
        'instance': instance
    }
    return render(request, '/ges/sortie/', context)

我想在模态中显示两个值Name和prenom，数据显示在数据库中。

我认为最好的解决方案是使用ajax。

3 个答案:

答案 0 :(得分：9)

你的模态代码包含一个form，但你问的是如何显示一些数据，所以这让我有点混淆你真正想做的事情。请更清楚。

我假设你想在modal上显示一些数据，并且应该使用AJAX从服务器检索数据。

有几种方法可以做到这一点。让我向您解释两个一般选项：

的 1。服务器处理HTML

在您的初始模板中，您只有一个空的div，您可以使用HTML代码进行更新。

每当你想要显示一些数据时，你会做一个AJAX请求，它会返回HTML代码（在这种情况下是modal HTML代码），你只需将它插入{{1 }}

的 2。客户处理HTML

在您的初始模板中，您可能拥有HTML代码的框架（在本例中为div HTML骨架），并且您可以通过javascript更新其中的某些值。

每当您想要显示某些数据时，您都会执行AJAX请求，这可能会返回JSON数据，并使用该信息更新HTML框架中的值。

的差异

使用第一个意味着在后端编写更多代码（在本例中为Django模板），而后者则鼓励您在前端编写更多javascript代码。

由于在服务器端渲染模板非常慢并且传输的数据也更大（所有HTML代码通常包含比原始JSON数据更多的字节），前一个选项可能会慢一些。无论如何，我认为对于这个简单的情况，这种差异是无关紧要的。

代码

由于我更喜欢​​在后端工作而不是编写太多的javascript，因此以下解决方案将是 Server Processed HTML 的实现。这是（你非常接近btw）：

您的主要模板：

modal

主模板中的Javacript：

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Prenom</th>
      <th>ID</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ val.name }}</td>
      <td>{{ val.prenom }}</td>
      <td>{{ val.id }}</td>
      <td><a class="btn btn-info" class="open-modal" data-url="{% url 'up' id=val.id }">Edit</a></td>
    </tr>
    <tr>
      ...
    </tr>
    ...
  </tbody>
</table>

<!-- Here we create this empty div for inserting modal -->
<div class="modal-div"></div>

您从未发布此代码，因此我必须弄清楚它的外观，并根据它进行一些更改。这里重要的是我们有一个按钮和一个jQuery事件，当有人点击它时会触发它。触发的函数执行AJAX调用，在var modalDiv = $("#modal-div"); $(".open-modal").on("click", function() { $.ajax({ url: $(this).attr("data-url"), success: function(data) { modalDiv.html(data); $("#myEdit").modal(); } }); }); 中设置返回的HTML，最后打开全新的模式。

您的控制器（Django视图）：

modal-div

您的模态模板def posts_edit(request, id=None): instance = get_object_or_404(namemodel, id=id) context={ 'instance': instance } return render(request, 'modal.html', context) 

modal.html

我实际上没有测试任何代码，但它不应该有更大的问题。试一试告诉我。如果您想看到客户端处理过的HTML 选项，我也可以更新我的答案。

问候。

答案 1 :(得分：0)

一个好的选择是使用Vue.js框架来构建组件并动态填充表单。

我非常喜欢Vue.js，我构建了一个应用来解决你的问题。

我会一步一步地解释我的所作所为。

1。让我们用一些数据模拟您的对象

views.js 

from django.shortcuts import render


def home(request):
    users = [dict(id=1, first_name='Megan', last_name='Fox'),
             dict(id=2, first_name='Chester', last_name='Bennington')]
    if request.POST:
        for user in users:
            if user['id'] == int(request.POST.get('id')):
                user['first_name'] = request.POST.get('firstName')
                user['last_name'] = request.POST.get('lastName')
    return render(request, 'index.html', {'users': users})

2。导入在Vue中构建的EventBus

我们将需要该事件总线来显示模态。事件总线是＆＃34;运输＆＃34;从一个组件到另一个组件的事件所以我们可以在全球范围内监听和发布事件。

VUE-bus.js 

const EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
    $bus: {
        get: function () {
            return EventBus;
        }
    }
});

3。使用Vue构建row组件以显示您的数据。

我将您的数据更改为firstName和lastName以便更好地解释。

此组件使用数据呈现您的行，并设置编辑按钮以发出从行中传递数据的事件showModal。

组件/ row.js 

Vue.component('row', {
    template: `
            <tr>
                <td>{{ firstName }}</td>
                <td>{{ lastName }}</td>
                <td>{{ id }}</td>
                <td><button @click="showModal">Edit</button></td>
            </tr>
        `,
    props: ['firstName', 'lastName', 'id'],
    methods: {
        showModal: function() {
            this.$bus.$emit('showModal', this.firstName, this.lastName, this.id);
        }
    }
});

4。使用Bootstrap构建modal组件

此组件使用 index.html 上的x-template来呈现其内容。在此组件上，您只需要监听showModal事件，因此当模态打开时，它将填充row内容。

组件/ modal.js 

Vue.component('modal', {
    template: '#modal-template',
    data: function () {
        return {
            firstName: '',
            lastName: '',
            id: 0
        }
    },
    mounted: function () {
        this.$bus.$on('showModal', function (firstName, lastName, id) {
            this.firstName = firstName;
            this.lastName = lastName;
            this.id = id;
        }.bind(this));
    }
});

5。构建您的Vue.js应用程序

如果您查看Vue.js docs，您会看到它是如何运作的。基本上，它会将您的应用程序挂载到标识为#app的元素中。

我只是在听showModal事件，所以当这个事件发出时，模态会出现。

app.js 

new Vue({
    el: '#app',
    data: {
        showModal: false
    },
    mounted: function () {
        this.$bus.$on('showModal', function () {
            this.showModal = true;
        }.bind(this));
    }
});

6。一些CSS使它漂亮

CSS / Styles.css中 

table {
    margin: 20px;
}

td {
    padding: 10px;
    border: 1px solid #ccc;
}

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
}

.modal-container {
    transition: all .3s ease;
}

.modal-enter {
    opacity: 0;
}

.modal-leave-active {
    opacity: 0;
}

7。最后，HTML

所以，我在这里做的是迭代使用用户数据填充行的用户列表。

正如我之前所说，模态模板位于x-template内。您需要对Bootstrap模式进行一些更改，以使其更像是添加类show并更改data-dismiss属性以关闭模式。

从 components / modal.js 上的侦听器填充数据。绑定是在:value上进行的。请参阅Vue网站上的v-bind文档，以更好地了解其工作原理。

的index.html 

{% load static %}

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>

<div id="app">
    <table>
        {% for user in users %}
            <tr is="row" first-name="{{ user.first_name }}" last-name="{{ user.last_name }}" :id="{{ user.id }}"></tr>
        {% endfor %}
    </table>
    <modal v-show="showModal" @close="showModal = false"></modal>
</div>

<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue"></script>
<script type="text/x-template" id="modal-template">
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-container">
                <div id="myModal" class="modal show" role="dialog">
                    <div class="modal-dialog">
                        <form method="post" action=".">
                            {% csrf_token %}
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" @click="$emit('close')">&times;</button>
                                    <h4 class="modal-title">Edit User</h4>
                                </div>
                                <div class="modal-body">
                                    <label for="name">First Name:</label>
                                    <input type="text" class="form-control" name="firstName" :value="firstName" />
                                    <label for="lastName">Last Name:</label>
                                    <input type="text" class="form-control" name="lastName" :value="lastName" />
                                    <input type="hidden" name="id" :value="id" />
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">Save</button>
                                    <button type="button" class="btn btn-default" @click="$emit('close')">Close</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</script>
<script type="text/javascript" src="{% static 'vue-bus.js' %}"></script>
<script type="text/javascript" src="{% static 'components/row.js' %}"></script>
<script type="text/javascript" src="{% static 'components/modal.js' %}"></script>
<script type="text/javascript" src="{% static 'app.js' %}"></script>
</body>
</html>

结果

enter image description here

点击Edit：

enter image description here

然后我们编辑数据：

enter image description here

并保存：

enter image description here

答案 2 :(得分：0)

当我写console.log时，我得到了这个

<div class="modal fade" id="myEdit" role="dialog">
<div class="modal-dialog">
<form   method="post" action="{% url 'up'}">
  <input type='hidden' name='csrfmiddlewaretoken' value='xDnFC1QDrIjsvNxirp2zH48bNWYzgXou' />
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <label for="usr">Name:</label>
      <input type="text" class="form-control" required="" name="uss" value="eeee" id="uss">
      <label for="pwd">Password:</label>
      <input  type="password"  class="form-control" required="" value="eee" name="pwd" id="pwd" >
    </div>
    <div class="modal-footer">
      <button  type="submit" class="btn btn-default">Valider</button>
      <button  value="" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
</form>
 </div>
</div>

但是当显示的值为空时：/ hhhh

相关问题
最新问题