在Django中切换Checkbox并写入数据库

时间:2015-09-28 15:28:34

标签: django twitter-bootstrap checkbox

我有一些模特

from django.db import models

class Model1(models.Model):
     title = models.CharField(max_length=300)
     boolean1 = models.BooleanField(default=False)
     boolean2 = models.BooleanField(default=False)

我正在通过以下引导表显示模板中的所有数据库条目:

<div class = 'table-responsive'>
<table class='table table-striped'>
    <thead>
        <th>Title</th>
        <th>Boolean 1</th>
        <th>Boolean 2</th>
    </thead>
    {% if model1_list %}
    {% for Model1 in model1_list %}
    <tbody>
        <tr>
        <td>{{ Model1.title }}</td>
        <td>{{ Model1.boolean1 }}</td>
        <td>{{ Model1.boolean2 }}</td>
        </tr>
    {% endif %}
    {% endfor %}
    </tbody>
 </table>
 </div>

我想将布尔值显示为复选框而不是文本,并且能够检查和取消选中值并将其反映在数据库中(即,如果选中数据库,则值应为True )。

实现这个的方法是什么?

1 个答案:

答案 0 :(得分:0)

只需使用IF:

<div class = 'table-responsive'>
<table class='table table-striped'>
    <thead>
        <th>Title</th>
        <th>Boolean 1</th>
        <th>Boolean 2</th>
    </thead>
    {% if model1_list %}
    {% for Model1 in model1_list %}
    <tbody>
        <tr>
        <td>{{ Model1.title }}</td>
        <td>
            <div class="checkbox">
                <label><input type="checkbox" {% if Model1.boolean1 %} checked {% endif %}>Boolean 1</label>
            </div>
        </td>
        <td>
            <div class="checkbox">
                <label><input type="checkbox" {% if Model1.boolean2 %} checked {% endif %}>Boolean 2</label>
            </div>
        </td>
        </tr>
    {% endif %}
    {% endfor %}
    </tbody>
 </table>
 </div>

当用户点击时,您想要在不刷新页面的情况下将此信息发送到数据库吗?如果是,您需要执行ajax请求以使用JSON将此信息设置为DB。这样的事情:

$.ajaxFunction = function(){

    var boolean1 = $("#boolean1").val(),
        boolean2 = $("#boolean2").val(),
        csrf_token = $("#csrf_token").val();

    data_send = {
                "boolean1": boolean1,
                "boolean2": boolean2,
                "csrfmiddlewaretoken": csrf_token
            };

    //jquery
    $.ajax({
            type: "post",
            url: $("/url/ajax/").val(),
            data: data_send,
            success: function(data_receive){
                if(data['boolean1']==true){
                    ...
                }
                ...
            }
    });
}

如果不是,您只需执行此操作即可发布此信息并刷新页面!