在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

你必须在 tr 中传递 id。 <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)
})

Answer 2

在我的代码中添加到下面的 j 查询

---

views.py

deflead_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').click(function() {

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)
        }
    })


});