Django：想通过复选框删除项目
我有一个模板，用来显示一系列的项目。每个项目旁边都有一个复选框。我想要在选中复选框的时候，可以把对应的项目删除。所以我需要一个按钮，能够在选中复选框后删除这个项目。下面是我的模板。抱歉模板有点大。
{% 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 %}
1 个回答
1
我理解你的问题是，当你点击一个复选框时，你想要把那一行从表格中删除。
你需要写一个页面，这个页面会接收要删除的项目的ID，然后根据删除是否成功返回真或假。我还建议你不要在复选框状态改变的时候就执行这个操作。你应该添加一个按钮，确认用户是否真的想要删除这一行，然后再触发这个功能。
我还假设你正在使用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>