Question

在GSP中，我编写了这样的代码，它将显示文件列表：

       <g:each in="${fileList}" var="file">
            <div>
                <a href="#" onclick="remove('${file.attachmentId}')"> 
                <span class="glyphicon glyphicon-remove"></span></a> 
                <a href="/forms/landing/attachment/${file.attachmentId}" >${file.name}</a> 
                </br>
            </div>
        </g:each>

我的javaScript代码是：

function remove(attachmentId) {
$(document).ready(function(){
        $('.glyphicon-remove').click ( function(e){
            e.preventDefault();
            $(this).parent().parent().remove();

            $.ajax({
                       url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
                        data: {
                                attachmentId: attachmentId
                        },
                        success: function(data){
                                alert("Success");
                        }

                   });

             });
        });

    }

我调用onclick remove（）函数传递选定的attachmentId作为参数。仅在双击其删除文件后才第一次。

为什么只有在双击第一次删除文件后？

提前感谢您的帮助。

注意：应用程序正在IE中运行。

Answer 1

自此标签

<div id="remove">

存在于g：each标记内，您在同一页面中创建多个ID。当调用函数remove（）时，它将删除它找到的所有div＆＃34;删除＆＃34;作为身份证。使每个id唯一，这将解决问题

由于您使用的是jQuery，请尝试使用此代码。这将消除使用唯一ID。

<script>
        $(document).ready(function(){
            $('.glyphicon-remove').click ( function(e){
                e.preventDefault();
                $(this).parent().parent().remove();
            });
        });
    </script>

Answer 2

具有重复的ID值将导致任何DOM（文档对象模型）操作出现问题。您的问题是如何通过浏览器界面从服务器中正确删除文件。 Groovy可以利用Apache Ant进行文件操作，通过使用AntBuilder类，您可以简化与文件操作相关的各种任务。

请阅读this entry in the Groovy docs有关使用AntBuilder的信息。并查看Grails文档中的服务层以了解如何使用服务。面向服务的体系结构将帮助您保持控制器和域类非常传统，并允许您创建可由多个控制器调用的服务，以实现更具体的功能。如果您遵循Grails的约定，您的控制器将具有delete功能。不要在该控制器中添加deleteFile方法，而是调用定义deleteFile。

的服务

您要删除的代码如下所示：

Create a service for file manipulation（例如项目服务部分下的FileService.groovy）。在这里，您可以放置类和函数来删除，添加，压缩文本文件。通过调用AntBuilder实用程序来利用groovy对ApacheAnt的内置支持。

//This is to instantiate an instance of the AntBuilder class.
import groovy.util.AntBuilder

class FileRemover {
    def ant = new AntBuilder() 


    //Define the file, which you will want to pass a value from the page. 
    //You may need to tweak the file path to match your project structure. 

    def file = new File(ant.project.baseDir,
                    "/forms/landing/attachment/${file.attachmentId}")
    def fileName = file.name.toString()
    assert file.exists()

    //Function to remove file
    def fileRemover = file.delete()

    //Provide messaging to let the user know the file has been removed
    println 'File ' + {fileName} + ' has been removed.'
}

此代码需要进行一些个性化更改才能在您的项目中工作，但通过阅读答案中链接的文档并遵循代码的基本概念，您应该能够创建一个删除文件并可以调用的操作来自GSP页面。

<强>更新

要查看使用Grails编写的文件管理器的简单示例，请阅读Thomas Lin的this blog post。

Answer 3

在GSP中：

<g:each in="${fileList}" var="file">
            <div>
                <a href="#" onclick="remove('${file.attachmentId}', this)">
                <span class="glyphicon glyphicon-remove"></span></a> 
                <a href="/forms/landing/attachment/${file.attachmentId}" >${file.name}</a> 
                </br>
            </div>
        </g:each>

在JavaScript中：

function remove(attachmentId, elem) {
    $(elem).parent().remove();
    $.ajax({
       url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
       data: {attachmentId: attachmentId},
        success: function(data){
            alert("Success");
        }

   });
}

这将完美地解决问题。

Onclick删除GSP中的功能问题

3 个答案: