Django：仅更新已检查的项目

Question

我想构建一个包含多个带有复选框的项目的表格，如果选中了这些复选框，我想通过单击按钮来更新这些项目。

我已经有一个更新视图可以做到这一点，但仅适用于一个项目，并且只有当该项目的保存按钮被按下时（每个表项目都有它自己的按钮）。我的代码如下所示：

<table>
  <thead>
    <tr>
      <th colspan="4">
        <button type "submit">My Submit Button</button>
      </th>
    </tr>
    <tr>
      <th colspan="2">My Title</th>
      <th>Movie title</th>
      <th>Movie description</th>
      <th>And so on</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <input type="checkbox" class="custom-control-input">
      </th>
      <th>Data</th>
      <th>Data</th>
      <th>Data</th>
      <th>Data</th>
      <th>
        <button>Button to edit this row item</button>
      </th>
      <th>
        <button type="submit" form="movie{{ forloop.counter }}">Button to save the changes</button>
      </th>
    </tr>
    <tr>
      <th>
        <input type="checkbox" class="custom-control-input">
      </th>
      <th>Data</th>
      <th>Data</th>
      <th>Data</th>
      <th>Data</th>
      <th>
        <button>Button to edit this row item</button>
      </th>
      <th>
        <button type="submit" form="movie{{ forloop.counter }}">Button to save the changes</button>
      </th>
    </tr>
  </tbody>
 <!-- the form for saving exactly one movie -->

 <form class="hide" id="movie{{ forloop.counter }}" action="{% url 'myapp:movieDataUpdate' pk=movie.pk %}" method="post">
 {% csrf_token %}
 </form>
</table>

这是我现有的每行保存按钮的视图/网址/表单：

urls.py

 from django.conf.urls import url
 from . import views

 app_name = "myapp"
 urlpatterns = [
      url(r'^$', views.AllMovies.as_view(), name="index"), views.UpdateMovieDataView.as_view(), name='movieDataUpdate'),
 ]

views.py

 class UpdateMovieDataView(UpdateView):
     model = Movie
     form_class = UpdateMovieDataForm
     success_url = reverse_lazy('myapp:index')

     def form_valid(self, form):
         self.object.slug = slugify(form.cleaned_data['title'])
         return super(UpdateMovieDataView, self).form_valid(form)

forms.py

 class UpdateMovieDataForm(forms.ModelForm):
      class Meta:
           model = Movie
           fields = ['title', 'date', 'director', 'runtime', 'genre', 'status']

我希望有人可以在这里帮助我，试图弄清楚，但还没有成功。也许有更多经验的人可以提供帮助:)

Answer 1

你可以在上面添加javascript（jQuery很容易上手）。

您首先将 jQuery 添加到您的 html 页面 (download here)。

然后在复选框中添加一个 id（示例如下）：

<input id="my_checkbox1" type="checkbox" class="custom-control-input">

然后，添加检测复选框更改的 javascript 代码（在 html 中），并为您的服务器创建 AJAX。

<script>
$("#my_checkbox1").change(function() {
    if(this.checked) {
        $.post("{% url 'myapp:movieDataUpdate' pk=movie.pk %}", {},
        function(data, status){
            console.log("Data: " + data + "\nStatus: " + status);
        });
    }
    # If you want, make an else
});
</script>

这里使用的一些来源：

jQuery checkbox checked state changed event

https://www.w3schools.com/jquery/jquery_ajax_get_post.asp