Django：想要删除带有复选框的项目

Question

我有一个显示项目列表的模板。它的每一项都有一个复选框。我希望能够在勾选复选框时从复选框中删除项目。所以我需要一个按钮，一旦选中复选框即可删除项目。这是我的模板。对于巨大的模板表示歉意。

{% extends "base_popup.html" %}


{% block title %}
      {{title}}
{% endblock %}

{% block script %}

                <script type="text/javascript" src="{{MEDIA_URL}}ui/ui.datepicker.min.js"></script>
                <script type="text/javascript">
                        $(function(){
                                $("#id_required_date").datepicker({dateFormat:"dd/mm/yy"});
                                $(":checkbox").css("width","auto");
                        });
                        $(function(){
                                $("#check_all").click(function(){
                                        if(this.checked ==true)
                                                        $("tbody :checkbox").each(function(){
                                                                this.checked=true;
                                                        });
                                                else
                                                        $("tbody :checkbox").each(function(){
                                                                this.checked=false;
                                                        });
                                });
                        });
                </script>
                {% endblock %}
                {% block content %}
                                <div id="location_header">{{title}}</div>
                <div id="form_container">
                <form action="." method="post">
                        <fieldset class="model">

                                <p>
                                        <span style="font-weight:bold;font-size:14px">Contact : {{order.contact}}</span>
                                </p>
                                <p>
                                        <span style="font-weight:bold;font-size:14px">Cost : {{order.cost}}</span>
                                </p>
             {{ form.as_p }}
                    </fieldset>
                    <fieldset class="model">
                            <legend>Items</legend>
                            <table id="items_table">

                                    <thead>
                                            <tr>
                                                    <td><input type="checkbox" id="check_all" checked="checked"></td>
                                                    <td>Tiptop no</td><td>Client no</td><td>Title</td><td>Item type</td>
                                                    <td>Format</td>
                                            </tr>
                                    </thead>
                                    <tbody>
                            {% for item in items %}
                                    <tr>
                                    <td><input type="checkbox" name="item" value="{{item.pk}}" checked="checked"></td>
         <td>{{item.tiptop_id}}</td><td>{{item.alternative_id}}</td><td>{{item.title}}</td>
                                <td>{{item.type}}</td><td>{{item.format}}</td>           

                                </tr>
                        {% endfor %}

                        </tbody>
                        </table>
                        <p>
                                <form method="post" action="help">
                                <table width="60%">
                                        <tr>
                                                <td>
                                                        <select name="contact_id">
                                                        {% for contact in order.contact.client.contact_set.all %}
                                                                <option value="{{contact.pk}}">{{contact}}</option>
         {% endfor %}
                                                    </select>
                                            </td>
                                            <td>
                                                    <select name="status_id">
                                                    {% for status in status_list %}
                                                            <option value="{{status.pk}}">{{status}}</option>
                                                    {% endfor %}
                                                    </select>
                                            </td>
                                            <td><input type="submit" name="save_status" value="set status for selected items"></td>
                                    </tr>
                            </table>
                    </form>
                    </p>
            </fieldset>
    <div id="form_footer">
                    <span style="font-size:10px;font-weight:bold;margin-right:10px">
                    </span>
                    <input type="submit" name="save_item" value="Save" onclick="validate_item(this.form)">
            </div>
    </form>
    </div>
    <input type="button" onclick="window.location.href='{% url tiptop.views.client_items name.pk %}'" value="add_item">

    {% endblock %}

Answer 1

我将您的问题解释为，本质上，当单击复选框时，您希望从表中删除该行。

您需要编写一个页面，获取要删除的项目的 ID，并根据删除是否成功返回 true 或 false。我还建议您在更改复选框时不要这样做。您应该添加一个按钮来确认用户是否确实希望删除该行，然后触发此功能。

我还假设您使用的是 jQuery 1.3+。

<script type="text/javascript">
$(function ()
{
    if ($( '#items_table' ).length > 0)
    {
        var table = $( '#items_table' );

        table
            .find( 'tbody input[type=checkbox]' )
            .click(function()
            {
                // Get the ID of the item to delete
                var item_id = $(this).val();

                // Post it to the server
                $.post
                (
                    '/path/to/delete/'+item_id,
                    function(data)
                    {
                        // Assuming the page will return true
                        if( data )
                        {
                            // Remove the table row
                            $(this)
                                .closest('tr')
                                .slideUp()
                                .remove()
                            .end();
                        }
                    }
                );
            })
    }
});
</script>