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>