一个不错的选择是使用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
我们将需要那个事件总线来显示模式。事件总线是将事件从一个组件“传输”到另一个组件的组件。所以我们可以在全局范围内监听和发出事件。
vue-bus.js
const EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus;
}
}
});
3。使用 Vue 构建一个 row 组件来显示您的数据。
我将您的数据更改为 firstName 和 lastName 以便更好地解释。
此组件使用数据呈现您的行并设置编辑按钮以发出事件showModal 传递行中的数据。
components/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 内容。
components/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，您将了解它是如何工作的。基本上，它会将您的应用程序安装在 id 为 #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')">×</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>
结果
当我们点击Edit:
然后我们编辑数据：
然后保存：