Django编辑或删除表中的选定行-ListView [英] Django Edit Or Delete Selected Rows In A Table - ListView
问题描述
我有一个带有复选框的表，我希望能够删除或编辑表中所有选定行的特定字段值.
I have a table with checkboxes and I would like to be able to delete or edit a specific field value for all the selected rows in the table.
这是一个很棒的示例表，可重新创建，但我在任何地方都找不到示例，它在视图和模板中如何工作. https://examples.bootstrap-table.com/#
Here's an example table that would be awesome to recreate but I have not found examples anywhere how this may work in the view and template. https://examples.bootstrap-table.com/#
我当前的视图正在使用表格.像上面的示例一样，我从哪里开始从基本表跃升为交互式表?
My current view, which is working with a table. Where can I start to make the leap from a basic table to an interactive one like in the example above?
Views.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
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">« 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 »</a>
{% endif %}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
推荐答案
这取决于您实现前端的方式，但是假设您具有标准的django模板，那么我建议您看一下 bootstrap 随意设置样式.
It depends on how you've implemented your frontend, but assuming you have standard django templates, then I would suggest taking a look at datatables. There's quite a lot to it, but it is very stable and has a decent feature set, and the documentation is good. You can style it how you want using bootstrap.
此外，您链接到Bootstrap Table-应该是相同的原理.通读文档以了解其工作原理，然后您将不得不使用Django模板标签在表中呈现数据.
Also, you link to Bootstrap Table - that should be the same principle. Read through the docs to understand how it works, and you will have to use Django template tags to render the data in the table.
请注意，该表是使用HTML/Jquery实现的，因此它与Django没有直接关系.您需要做的就是遍历模板中的django对象(示例)
Note that the table is implemented using HTML / Jquery, so it is not directly related to Django. All you need to do is to iterate over the django objects in your template (example)
编辑
如何删除选定的行?
How to delete a selected row?
假设您可以选择N行，然后单击一个按钮以删除所有这些行.
Suppose you could select N rows, and then click a button to delete all of these rows.
这可能如下:
- 将处理程序添加到删除按钮:
- 识别选定的行
- 发送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();
}
})
}
如何选择行并快速更改所有选定行的字段?
How to select rows and quickly change a field for all of the selected rows?
这里的原理相同.选定行后，请有一个标识选定行的处理程序，然后您可以使用datatables api更新给定的字段(
The same principle here. Once rows are selected, have a handler which identifies the selected rows, then you can use the datatables api to update given fields (docs).
这篇关于Django编辑或删除表中的选定行-ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
