Javascript 在弹出窗口中填充groovy控制器中的数据

我有一个gsp页面，表中的每一行都有一个删除按钮。在按钮上单击我想要一个弹出窗口，告诉删除的结果。这些结果取决于行中存在的数据以及grails服务已知的一些其他约束，grails服务是从与gsp页面关联的grails控制器调用的。如果用户确认这些结果，则应从表中删除该行，否则该表将保持不变

我应该如何着手实现这种行为

目前，我的普惠制中有

<tr>
    <td>name</td>
    <td>parentName</td>
    <td>data</td>
    <td>
        <g:link action="deleteRow" params="${[name: row.name, parentName: row.parentName]}">
            <button class="deleteSnapshot">Delete</button>
        </g:link>
    </td>
</tr>

在我的控制器里

class DeleteController{
    DeleteService deleteService
    def index() {
        [list:deleteService.getTableList()]
    }
    def getDeletionDetails(string name, String parentName){
        return deleteService.getDetails(name,parentName)
    }
    def deleteRow(String name, String parentName){
        service.deleteRow(name, parentName)
        redirect controller:"DeleteController", action:"index"
    }
}

我知道删除可以很好地工作，因为它甚至可以在当前状态下使用。只是确认框询问您是否要继续，而不显示详细信息

任何关于我如何实现我所寻找的目标的帮助都将不胜感激

另外，我是stackoverflow的新手，所以如果我错过了某个大会，一定要让我知道

---

提前谢谢。

我可以想出两种方法：

第一种方法是使用ajax获取删除细节和删除行 假设deleteService.getDetails（name，parentName）返回一个字符串， 首先，您需要更改getDeletionDetails操作，以便它呈现响应：

def getDeletionDetails(String name, String parentName){
    render deleteService.getDetails(name, parentName)
}

def deleteRow(String name, String parentName){
    service.deleteRow(name, parentName)
    render "You deleted an item $name - $parentName."
}

并将g:link-s更改为gsp中的按钮：

这段代码的作用是向/delete/getDeletionDetails发送一个ajax调用，然后使用其响应（由DeleteController中的getDeletionDetails操作呈现）显示确认警报。如果用户确认了这个问题，则会发送另一个ajax调用—现在发送到DeleteController的deleteRow操作—参数取自单击按钮的数据属性。如果用户取消-除了重新启用按钮外，什么也不会发生

deleteRow只应更改return语句-它还必须呈现响应：

def getDeletionDetails(String name, String parentName){
    render deleteService.getDetails(name, parentName)
}

def deleteRow(String name, String parentName){
    service.deleteRow(name, parentName)
    render "You deleted an item $name - $parentName."
}

您不需要在这里重定向，因为由于使用了ajax，用户将永远不会离开delete/index。在成功调用ajax之后，您可以在页面上显示某种确认信息

第二个选项是将删除细节放在每行的隐藏字段或数据属性中，然后在js中检索它们： 您可以在行的域类（可能是行）中创建一个方法getDeletionDetails（），该方法返回详细信息（在域类中使用服务并不完美，但如果服务不是很复杂，它应该可以正常工作）。然后，在您的.gsp位置：

---

谢谢@Surigata。这太神奇了。它完全按照我需要的方式工作。我只是有一个疑问和一个问题。1.为什么“data parent name=“${row.parentName}”在我的gsp页面中有效，而“data parentName=“${row.parentName}”不起作用？2.删除后，该行将从数据库中删除，但不会从页面中删除。我需要刷新页面以使类似的内容消失。这是因为我们删除了重定向吗？再一次，非常感谢，不仅感谢您提供了解决方案，而且在这里输入了完整的代码并进行了详细的解释。这对我这样的傻瓜很有帮助。：-）此外，我使用了解决方案1，尽管我尝试了这两种解决方案，但效果都很好。@VaibhavKarani公元1年。恐怕我没有足够的信息来回答这个问题。你说“不在我的普惠制页面工作”是什么意思？公元2年。是的-视图没有改变，因为一切都是由ajax完成的-您可以使用jQuery在ajax调用的成功回调中手动删除该行（查找tr和.remove（），这应该不难）。我的意思是，当我使用您提到的解决方案时，它工作正常，并且正确接收名称和父名称。但是，当我在gsp页面中使用data parentName=“${row.parentName}”而不是data parentName=“${row.parentName}”时，.js捕获的值为空。为什么会这样呢？@VaibhavKarani我认为现在数据属性应该是小写的：，所以可能使用

.data（'parentName'））

也行。另外，如果解决方案行得通，您介意接受答案吗？

def deleteRow(String name, String parentName){
    service.deleteRow(name, parentName)
    render "You deleted an item $name - $parentName."
}

<td>
    <g:link action="deleteRow" params="${[name: row.name, parentName: row.parentName]}">
        <button class="deleteSnapshot" data-details="${row.deletionDetails}">Delete</button>
    </g:link>
</td>

var deletionDetails = btn.data('details');