时间戳

首页 > 解决方案 > Django 编辑或删除表中的选定行 - ListView

django - Django 编辑或删除表中的选定行 - ListView

问题描述

我有一个带有复选框的表，我希望能够删除或编辑表中所有选定行的特定字段值。

这是一个重新创建的示例表，但我在任何地方都没有找到如何在视图和模板中工作的示例。https://examples.bootstrap-table.com/#

我当前的视图，正在使用表格。我在哪里可以开始从基本表格飞跃到上面示例中的交互式表格？

视图.py

class EntryList(LoginRequiredMixin, ListView):
    context_object_name = 'entry_list'
    paginate_by =  100
    # paginate_by =  5
    #ordering = ['-pk']
    model = Entry
    template_name = "portfolios/entry_list.html"

    def get_queryset(self):
        return Entry.objects.filter(created_by=self.request.user).order_by('-pk')

    def post(self, request, *args, **kwargs):
        ids = self.request.POST.get('ids', "")
        # ids if string like "1,2,3,4"
        ids = ids.split(",")
        try:
            # Check ids are valid numbers
            ids = map(int, ids)
        except ValueError as e:
            return JsonResponse(status=400)
        # delete items
        self.model.objects.filter(id__in=ids).delete()
        return JsonResponse({"status": "ok"}, status=204)

entry_list.html

{% extends "dashboard/base.html" %}
{% load i18n %}
{% block content %}

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h2 class="text-gray-800">{% block title %}{% trans "Imported Entries" %}{% endblock %}</h2>
    <a role="button" class="btn btn-success" href="{% url 'import' %}"><i
            class="fas fa-plus-circle"></i> Import New Entires</a>
</div>

<!-- Content Row -->
<div class="row">

    <div class="col-md-12">
        <div class="card shadow mb-4">
            <div class="card-body">
                <div id="dataTable_wrapper" class="dataTables_wrapper dt-bootstrap4">
                    <div class="row">
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <table class="table-responsive-xl table table-hover table-striped table-bordered dataTable" id="dataTable" width="100%"
                                   cellspacing="0" role="grid" aria-describedby="dataTable_info">
                                <thead>
                                <tr role="row">
                                    <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                                        colspan="1" aria-label="" style="">
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                                        colspan="1" aria-label="" style="">ID
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                                        colspan="1" aria-label="" style="">Date
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                                        colspan="1" aria-label="" style="">Trade
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                                        colspan="1" aria-label="" style="">Type
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                                        colspan="1" aria-label="" style="">Symbol
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                                        colspan="1" aria-label="" style="">Amount
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                                        colspan="1" aria-label="" style="">Price
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                                        colspan="1" aria-label="" style="">Fee
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                                        colspan="1" aria-label="" style="">Reg Fee
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1"
                                        colspan="1" aria-label="" style="">Ref
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for entry in object_list %}
                                <tr role="row">
                                    <td class="text-center">
                                        <div class="custom-control-lg custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input form-control-lg" data-id="{{ entry.pk}}" id="check{{ entry.pk }}">
                                            <label class="custom-control-label" for="check{{ entry.pk }}"></label>
                                        </div>
                                    </td>
                                    <td><a href="{% url 'entry-update' entry.pk %}">{{ entry.pk }}</a></td>
                                    <td>{{ entry.date | date:"M d, Y h:i:s A"}}</td>
                                    <td><a href="/trade/{{ entry.trade.id }}">{{ entry.trade.id }}</a></td>
                                    <td>{{ entry.entry_type }}</td>
                                    <td>{{ entry.symbol }}</td>
                                    <td>{{ entry.amount }}</td>
                                    <td>{{ entry.price }}</td>
                                    <td>{{ entry.fee }}</td>
                                    <td>{{ entry.reg_fee }}</td>
                                    <td>{{ entry.transaction_id }}</td>
                                </tr>
                                {% endfor %}

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--Pagination-->
                    <div class="row">
                        <div class="col-12 ">


                            <div class="pagination">
                                <span class="step-links">
                                    {% if page_obj.has_previous %}
                                        <a href="?page=1">&laquo; first</a>
                                        <a href="?page={{ page_obj.previous_page_number }}">previous</a>
                                    {% endif %}

                                    <span class="current">
                                        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                                    </span>

                                    {% if page_obj.has_next %}
                                        <a href="?page={{ page_obj.next_page_number }}">next</a>
                                        <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
                                    {% endif %}
                                </span>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
{% endblock content %}

标签： djangolistviewdjango-rest-framework

解决方案

这取决于您如何实现前端，但假设您有标准的 django 模板，那么我建议您看一下datatables。它有很多内容，但它非常稳定并且具有不错的功能集，并且文档很好。您可以使用bootstrap 设置您想要的样式。

此外，您链接到 Bootstrap Table - 这应该是相同的原则。通读文档以了解其工作原理，您将不得不使用 Django 模板标签来呈现表中的数据。

请注意，该表是使用 HTML / Jquery 实现的，因此它与 Django 没有直接关系。您需要做的就是遍历模板中的 django 对象（示例）

编辑

如何删除选定的行？

假设您可以选择 N 行，然后单击一个按钮来删除所有这些行。

这可以按如下方式工作：

  • 将处理程序添加到删除按钮：
  • 识别选定的行
  • 发送 Ajax 请求以删除行
  • 处理成功响应以从表中删除已删除的行
// SIMPLIFIED CODE SAMPLE

$("#delete-btn").click(function () {
  var selectedRows = table.rows({"selected": true});

  var dataObj = {
    // parse selectedRows to get object ids
  }
  
  $.ajax({
      url: '/api/delete-rows/',
      type: 'post',
      data: dataObj,
      success: function (data, status, xhr) {
        // remove the selected rows from the view
        table.rows({"selected": true}).deselect().remove().draw();
      }
    })
}

如何选择行并快速更改所有选定行的字段？

这里的原理是一样的。选择行后，有一个处理程序来标识所选行，然后您可以使用 datatables api 更新给定字段 ( docs )。

推荐阅读