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>