Fatal编程技术网
  • python/
  • Python 将数据表单datatable传递给modal django

Python 将数据表单datatable传递给modal django

python ajax django

Python 将数据表单datatable传递给modal django,python,ajax,django,bootstrap-modal,Python,Ajax,Django,Bootstrap Modal,我想将数据表中的数据显示到模式引导 例如： Name | prenom | id |edit example | test | 2 |button edit 按钮将数据发送到modal以显示更新 按钮代码： <a class="btn btn-info" role="button" data-toggle="modal" data-form="{% url 'up' id=val.id }" data-target="#myEdit" >Edit</a>

我想将数据表中的数据显示到模式引导

例如：

Name    | prenom | id |edit
example | test   |  2 |button edit
按钮将数据发送到modal以显示更新

按钮代码：

<a class="btn btn-info" role="button" data-toggle="modal" data-form="{% url 'up' id=val.id }" data-target="#myEdit" >Edit</a>
我想在模式中显示两个值
Name
和
prenom
，数据从数据库中显示

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

您的模式代码包含一个
表单
，但您询问如何显示一些数据，因此这让我有点困惑您真正想做什么。请说清楚一点

我假设您希望在
模式上显示一些数据，并且应该使用AJAX从服务器检索这些数据

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

1。服务器处理的HTML
在初始模板中，只有一个空的
div
，可以用HTML代码更新它

每次您想要显示一些数据时，您都会执行一个AJAX请求，该请求将返回HTML代码（在本例中为
模式
HTML代码），您只需将其插入
div

2。客户端处理的HTML
在初始模板中，您可能有一个HTML代码的框架（在本例中为
modal
HTML框架），并且可以通过javascript更新其中的一些值

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



分歧
使用第一种方法意味着在后端（本例中为Django模板）编写更多代码，而使用第二种方法则鼓励您在前端编写更多javascript代码

由于在服务器端呈现模板的速度非常慢，并且传输的数据也比较大（所有HTML代码通常包含比原始JSON数据更多的字节），因此前一个选项可能会稍微慢一点。无论如何，我相信对于这个简单的案例来说，这种差异是不相关的



代码
由于我更喜欢在后端工作，而不是编写太多javascript，下面的解决方案将是服务器处理HTML的实现。在这里（顺便说一句，你很接近）：

您的主模板：



名称
普勒农
身份证件
编辑
{{val.name}}
{{val.prenom}}
{{val.id}
编辑
...
...


主模板中的JavaScript：


var modalDiv=$（“#modal div”）；
$（“.open model”）。在（“单击”，函数（）{
$.ajax({
url:$（this.attr（“数据url”），
成功：功能（数据）{
html（数据）；
$（“#myEdit”）.modal（）；
}
});
});


这里重要的是我们有一个按钮和一个jQuery事件，当有人点击它时会触发它。触发的函数执行AJAX调用，在
modal div
中设置返回的HTML，最后打开全新的modal

您的控制器（Django视图）：


def posts\u edit（请求，id=None）：
实例=获取对象或404（namemodel，id=id）
上下文={
“实例”：实例
}
返回呈现（请求'modal.html'，上下文）


您的模式模板
modal.html



{%csrf_令牌%}
&时代；
模态头
姓名：
密码：
瓦利德
接近

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

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

我会一步一步地解释我做了什么

1.让我们用一些数据来模拟对象
views.js

2.导入Vue中内置的EventBus
我们需要那个事件总线来显示模态。事件总线是将事件从一个组件“传输”到另一个组件的组件。因此，我们可以在全球范围内监听和发送事件

vue-bus.js

3.使用Vue构建一个
行
组件以显示数据。
为了更好地解释，我将您的数据更改为
firstName
和
lastName

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

组件/row.js

5.构建你的Vue.js应用程序
如果你看一看，你就会知道它是如何工作的。基本上，它会将您的应用程序装载到id为
#app
的元素中

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

app.js

6.一些CSS使它变得漂亮
css/styles.css

7.最后是HTML
所以，我在这里做的是迭代用户列表，用用户数据填充行

如我前面所说，模态模板位于
x-template
中。您需要对Bootstrap模式进行一些更改，以使其正常工作，例如添加类
show
，并更改
data disclesh
属性以关闭模式

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

index.html


{%load static%}
{users%%中的用户为%s}
{%endfor%}
{%csrf_令牌%}
&时代；
编辑用户
名字：
姓氏：

<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>



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



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})



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



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);
        }
    }
});



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));
    }
});



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



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;
}



{% 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>