如何在Django的布尔类型字段中使用开关切换？

Question

我有一个工作经验模型（work_experience），包含一个“is_working”字段，当用户仍在公司工作时为true。

在前端，我使用了一个切换开关（toggle switch），我想在点击时更改布尔字段值“is_working”。那应该使用怎样的逻辑在Django中实现切换开关？

切换开关

HTML：

<div style="display:inline-block">
    <label>Currently working here?</label>
    <label class="switch">
        <input type="checkbox">
        <span class="slider round"></span>
    </label>
</div>

模型

class Work_Experience(models.Model):
    job_title       = models.CharField(max_length=100, null=True, blank=True)
    company         = models.CharField(max_length=100, null=True, blank=True)
    description     = models.CharField(max_length=300, null=True, blank=True)
    exp_start_date  = models.DateField(null=True, blank=True)
    exp_end_date    = models.DateField(null=True, blank=True)
    is_working      = models.BooleanField(default=False)

- Ahsaan-566

Answer 1

将null=True参数赋给CharField是个不好的主意。

如果你想在点击时更改布尔字段值is_working，你需要使用Jquery。

我创建了一个名为toggle的应用程序，所以你需要将其替换为你的应用程序名称。

以下是完整代码：

urls.py::

from django.urls import path
from toggle.views import home, toggle

urlpatterns = [
    path('', home),
    path('toggle/', toggle),
]

views.py:

from django.shortcuts import render
def home(request):
    w, created = Work_Experience.objects.get_or_create(id=1)
    return render(request,'home.html', {'workexperiance': w})

from django.http import HttpResponse
from toggle.models import Work_Experience
def toggle(request):
    w = Work_Experience.objects.get(id=request.POST['id'])
    w.is_working = request.POST['isworking'] == 'true'
    w.save()
    return HttpResponse('success')

home.html:

<div style="display:inline-block">
    <label>Currently working here?</label>
    <label class="switch">
        <input type="checkbox" id="checkbox" value="{{workexperiance.is_working}}">
        <span class="slider round"></span>
    </label>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <!-- Import Jquery Here-->
<script type="text/javascript">
$(document).ready(function() {
    $('#checkbox').change(function() {
        $.post("/toggle/", {
            id: '{{workexperiance.id}}', 
            isworking: this.checked, 
            csrfmiddlewaretoken: '{{ csrf_token }}' 
        });
    });
}); 
</script>

运行：./manage.py runserver，并访问：http://localhost:8000

当您点击目前在这里工作？复选框时，将立即更改布尔字段值“is_working”。

- suhailvs

Answer 2

如果您不介意页面被刷新，这是我将要做的：

views.py:

from django.urls import reverse_lazy
from .models import Work_Experience
from django.shortcuts import redirect

def toggle_status(request,pk):
    status = Work_Experience.objects.get(id=pk)
    status.is_working^=True
    status.save()
    return redirect(reverse_lazy('HTML.html'))

urls.py

from django.urls import path
from .views import toggle_status

urlpatterns = [
    ...
    ...
    ...
    path('toggle-status/<int:pk>/', toggle_status, name='toggle-status'),
]

HTML.html

<div style="display:inline-block">
  <label>Currently working here?</label>
  <a href="{% url 'toggle-status' task.id %}">
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
    </label>
  </a>
</div>

- Mohammed Alhussaini