在django中使用带有jquery的复选框删除多行？

Question

---

在django中使用带有jquery的复选框删除多行???

---

def lead_delete(request, id): 
    success_dict = {} 
    task_del =Lead.objects.filter(id=id) 

    if request.method== "GET": 
     task_del.delete() 

     success_dict['success_msg'] = "Successfully Deleted lead" 
     return redirect('sales_manager_dashboard') 

---

url(r'^lead/delete/(?P<id>\d+)/$','lead_delete',name='lead_delete'), 

---

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     {% if request.user|has_group:"sales rep" or request.user|has_group:"sales manager" %} 
      <div class="col-md-11"> 
      <h4>Leads/Enquiries</h4> 
      </div> 
      <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-url="{% url 'ImportWorkItem' %}" data-title="CSV Import" data-target=".bs-example-modal-lg" style="color: ">CSV</button> --> 


      <button type="button" class="btn btn-primary" data-toggle="modal" data-url="{% url 'export_leads_form' %}" data-list-div-url="{% url 'export_leads_form' %}" data-title="Add Enquiry" data-target=".bs-example-modal-lg">Export</button> 

      <button type="button" class="btn btn-primary" data-toggle="modal" data-url="{% url 'lead_add' %}" data-list-div-url="{% url 'leads_list' %}" data-title="Add Enquiry" data-target=".bs-example-modal-lg">New</button> 


     {% else %} 
      <div class="col-md-11"> 
      <h4>Leads/Enquiries</h4> 
      </div> 
      <button type="button" class="btn btn-primary" data-toggle="modal" data-url="{% url 'export_leads_form' %}" data-list-div-url="{% url 'export_leads_form' %}" data-title="Add Enquiry" data-target=".bs-example-modal-lg">Export</button> 

     {% endif %} 
    </div> 

    <div class="panel-body " style="overflow:scroll"> 
    <form> 
     <table id="lead_list_table" class="table table-bordered hover" data-url="{% url 'leads_list' %}" cellspacing="0" width="100%"> 
      <thead> 
       <tr class="headings"> 
        <th><input type="checkbox" id="selectall"/></th> 
        <th>Company</th> 
        <th>Contact Person</th> 
        <th>Email</th> 
        <th>Phone</th> 
        <th>Country</th> 
        <th>Lead Date</th> 
        <th>Next Followup</th> 
        <th>Lead Status</th> 

        <th class="no-link last"><span class="nobr"></span> 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       {% for lead in leads %} 
        <tr class=""> 
         <td class=""><input type="checkbox" class="checkbxcolor" id="lead"></td> 
         <td class=" "><a data-url="{% url 'leads_view' lead.id%}" id="lead" data-toggle="modal" data-title="View Enquiry" data-target=".bs-example-modal-lg">{{ lead.title }}</a></td> 
         <td class=" ">{{ lead.contact_name }} </td> 
         <td class=" ">{{ lead.email }}</td> 
         <td class=" ">{{ lead.phone }}</td> 
         <td class=" ">{{ lead.country }}</td> 
         <td >{{ lead.lead_date}}</td> 
         <td class="">{{lead.latest_followup_date}}</td> 
         <td style="text-align: center;padding: 10px;">{{ lead.latest_lead_status}} 
         <td class="last"> 

          {% if request.user|has_group:"sales rep" or request.user|has_group:"sales manager" %} 
           <button type="button" class="btn btn-secondary" data-toggle="modal" data-url="{% url 'lead_edit' lead.id %}"data-list-div="lead_list_div" data-list-div-url="{% url 'leads_list' %}" data-title="Edit Enquiry" data-target=".bs-example-modal-lg">Edit</button> 
          {% endif %}   
          <a href="{% url 'lead_delete' id=lead.id %}"<button type="delete_button" id="remove" class="btn btn-danger remove" >Delete </button></a> 

         </td> 
        </tr> 

       {% endfor %} 
      </tbody> 
      <tfoot> 
       <tr> 
        <th colspan="6"><a href="javascript:;" class="deleteall" title="dtable" >Delete Selected</a> 

        </th> 
       </tr> 
      </tfoot> 
     </table> 
    </form> 
    </div> 

</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 
      $('#lead_list_table').DataTable({ 
       "responsive": true, 
       "bFilter": false, 
       "searching": true, 
       "ordering": false, 


       "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
        if(aData[7] == "PROSPECTING") 
        { 
         $('td:eq(7)', nRow).css('background-color', 'rgb(129,164,216, 0.90)'); 
        } 
        else if(aData[7] == "TRIAL") 
        { 
         $('td:eq(7)', nRow).css('background-color', 'rgb(0,128,0, 0.58)'); 
        } 
        else if(aData[7] == "NEGOTIATING") 
        { 
         $('td:eq(7)', nRow).css('background-color', 'rgb(243,156,18,0.6)'); 
        } 
        else if(aData[7] == "WON") 
        { 
         $('td:eq(7)', nRow).css('background-color', 'rgb(0,250,154)'); 
        } 
        else if(aData[7] == "LOST") 
        { 
         $('td:eq(7)', nRow).css('background-color', 'rgb(250,128,114'); 
        } 

       } 
      }); 


}); 

</script> 



<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#selectall").click(function() { 
       $('.case').attr('checked', this.checked); 
     }); 

     $('a.deleteall').on('click', function(e){ 
      e.preventDefault(); 
      var $this = $(this), 
       $trows = $this.closest('table').children('tbody').find('tr.selected'), 
       sel = !!$trows.length; 

      // Don't confirm delete if no rows selected. 
      if(!sel){ 
       alert('No rows selected'); 
       return false; 
      } 
      var c = confirm('Are you sure you want to delete the slected rows?'); 
      if(!c) { return false; } 
      $trows.fadeOut(function(){ 
      $trows.remove(); 
     }); 

     }); 
}); 


</script> 

---

Answer 1

添加到下面Ĵ查询我COAD

---

views.py

高清lead_miltiple_delete（请求）：

success_dict = {} 

if request.is_ajax(): 
    selected_leads=request.POST['lead_list_ids'] 
    selected_leads=json.loads(selected_leads) 
    for i,lead in enumerate(selected_leads): 
     if lead!='': 
      print '**********', lead 

      task_del =Lead.objects.filter(id=lead).delete() 
      success_dict['success_msg'] = "Successfully Deleted lead" 

HttpResponse('success_dict') 

$（'＃ btn_delete_selected'）。点击（函数（）{

var selected_rows=[]; 

$('#lead_list_table').find('tr').each(function(){ 
    var row=$(this); 
    if (row.find('input[type="checkbox"]').is(':checked')) { 
     selected_rows.push(row.find('span').text()) 
     }; 
    }); 
    // slected_values=stringify 
    var selected_rows = JSON.stringify(selected_rows); 
    $.ajax({ 
     url: "{% url 'lead_miltiple_delete' %}", 
     type: 'POST', 
     data: {'lead_list_ids': selected_rows}, 
     success:function(response) 
     { 
      alert(response) 
     } 
    }) 


}); 

Answer 2

你必须通过ID在TR。 <tr data-id="{{ lead.id }}">

您需要使用id进行GET调用服务器。要做到这一点，你需要对象的id。我认为在$trows之后你可以得到所有的id。

$trows = $this.closest('table').children('tbody').find('tr.selected'), 

// Written in javascript please convert this to jQuery for you need. 
$trows.forEach(function(element) { 
    // Get Id from data-id 
    const elementId = element.dataset.id 
    fetch("/lead/delete/" + elementId) 
})