如何在勾选时删除复选框?

0 投票
3 回答
3817 浏览
提问于 2025-04-16 11:09

我有一个模板,用来显示物品的列表。每个物品旁边都有一个复选框。我想要实现的是,当选中一个复选框时,可以把对应的物品删除。所以我需要一个按钮,能够在选中复选框后删除这个物品。以下是我的模板。

    {% 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 %}

我想我可能还需要知道在我的视图中该写些什么。

编辑:

我不太明白为什么还是不能删除。看看我的视图吧。我的编辑订单表单很大。我原以为删除功能可以解决这个问题。不管怎样,看看吧。

def edit_order(request, order_no):
# Alot of code here
     if request.method == 'POST':
            form = forms.OrderForm(request.POST, instance = order)
            if form.is_valid() and save_item is not None:
                form.save(True)
                request.user.message_set.create(message = "The order has been updated successfully.")
                return HttpResponse("<script language=\"javascript\" type=\"text/javascript\">window.opener.location = window.opener.location; window.close();</script>")

        if status is not None and contact is not None and save_status is not None and delete_item is not None:
            try:
                for id in status_items:
                    item = models.StorageItem.objects.get(pk = id)
                    delete_item = item
                    delete_item.delete()
                    current_status = models.ItemStatusHistory(item = item, contact = contact, status = status,
                                                    user = request.user)
                    current_status.save()
            except:
                pass
            request.user.message_set.create(message = "Status successfully changed for {0} items".format(len(status_items)))

3 个回答

0

[编辑]: 真正的问题是如何在提交表单时从数据库中删除项目,而不是从HTML表格中移除行。请查看本页上的“简单表单处理示例”Django中的表单提交教程。 [/编辑]

这里有一个示例,你可以把它复制到电脑上的一个.html文件中,然后在网页浏览器中打开。这个示例使用了简单的JavaScript。对于这种情况,我更喜欢使用jQuery,但根据你的使用情况,它可能会比你想要的更复杂。不过,如果你需要做很多客户端编程,我强烈推荐使用jQuery。

注意:我觉得使用parentNode.parentNode.parentNode有点麻烦,但这个示例故意使用了原帖中提到的表格/复选框配置。

最好是给表格的每一行分配一个ID,这样和每个复选框对应,方便访问。

我还添加了一个<input type="button">,因为原帖中提到需要这个。你可能想考虑给每个复选框分配onclick=事件,这样用户一点击就能删除项目。不过这只是个人偏好。

<html>
<head>
<script>

function hideCheckedRows() {
    var checkboxes = document.getElementsByName("item");
    var checkboxes_to_remove = new Array();
    var count = 0;
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked == true) {
            checkboxes_to_remove[count++] = checkboxes[i];
        }
    }
    for (var i = 0; i < checkboxes_to_remove.length; i++) {
        cbx = checkboxes_to_remove[i];
        // parentNode.parentNode.parentNode is the <tr>
        // parentNode.parentNode is the <td> containing the checkbox
        cbx.parentNode.parentNode.parentNode.removeChild(
                                          cbx.parentNode.parentNode);
    }
}
</script>
</head>
<body>

<table>
    <tr name="table_row">
        <td><input type="checkbox" name="item" value="Check1"></td>
        <td>Id1</td><td>Alt_Id1</td><td>Title1</td>
          <td>Type1</td><td>Format1</td>
    </tr>
    <tr name="table_row">
        <td><input type="checkbox" name="item" value="Check2"></td>
        <td>Id2</td><td>Alt_Id2</td><td>Title2</td>
          <td>Type2</td><td>Format2</td>
    </tr>
    <tr name="table_row">
        <td><input type="checkbox" name="item" value="Check3"></td>
        <td>Id3</td><td>Alt_Id3</td><td>Title3</td>
          <td>Type3</td><td>Format3</td>
    </tr>
</table>

<input type="button" value="Click to remove checkboxes!" 
       onclick="hideCheckedRows();"/>

</body>
</html>

编辑:

如果你想从数据库中删除项目,我们需要更多信息。我们需要知道使用的是什么类型的数据库,以及处理提交按钮“POST”的服务器端代码是什么样的。这个示例会在用户的网页浏览器中删除复选框,但对数据库中的内容没有任何影响。

0

你这样做不对哦 :) 应该创建一个专门用于删除的视图。通过POST或GET请求发送要删除的元素的ID(可以放在网址里),然后从数据库中删除这个元素,最后返回一个不包含已删除元素的列表作为响应。

大概是这样的:

def delete_element(request, id): 
    el = get_object_or_404(Element, id=id)

    if el:
        el.delete()

    html = render_list(request)

    if request.is_ajax():
        result = simplejson.dumps({
            "html": "html",
        }, cls=LazyEncoder)
        return HttpResponse(result, mimetype='application/javascript') 

def render_list(request):
    elements = Element.objects.all()
    return render_to_string(template_name, RequestContext(request, {
        "element" : elements, })

然后在你的模板中,先用JavaScript调用删除功能的网址,成功后再用数据中的['html']更新你的模板。

你可以问这个人: http://twitter.com/sasklacz,他在写关于Django中ajax的教程,可以给你提供需要的具体代码。

1

你需要写一个视图,用来获取POST数据,找出哪些复选框被选中了,然后根据ID从数据库中删除对应的项目。

你可能还想把这个视图放在一个装饰器里,这样可以确保用户有权限去删除东西,或者检查登录的用户是否和要删除的项目的拥有者是同一个人,这样做也是可以的。

另外,你也可以使用Django的表单框架来处理一些繁琐的工作。

从数据库中删除对象的具体方法可以在数据库模型的文档中找到。

这些事情并不是特别简单,所以不要在这里等太久才能找到完整的解决方案——赶紧动手吧!

撰写回答