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

Question

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

我应该如何实现这种行为？

目前，我有我的gsp

<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>

和我的.js文件

$(document).on('click', ':button', function (e) {
        var btn = $(e.target);
        btn.attr("disabled", "disabled"); // disable button
        alert('getting deletion details');
        //var deletionDetails -->not sure how to get these
        //var deletionDetails will get data from controller action:"getDetails"
        if (confirm('/*print deletion details and ask*/ Do you want to proceed?')) {
            alert('will delete')
            return true
        }
        else {
            btn.removeAttr("disabled"); // enable button
            return false
        }
    });

并在我的控制器中

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"
    }
}

我知道删除工作正常，因为即使在当前状态下也能正常工作。只是确认框询问您是否要继续，而不显示详细信息。

任何有关如何实现我正在寻找的帮助都将受到赞赏。

P.S。我是stackoverflow的新手，所以如果我错过了某些约定，请告诉我。

提前致谢。

Answer 1

我可以想到两种方法：

第一个是使用 ajax 来获取删除详细信息并删除行

假设 deleteService.getDetails（name，parentName）返回一个String， 首先，您需要更改 getDeletionDetails 操作，以便呈现响应：

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

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

<button data-name="${row.name}" data-parent-name="${row.parentName}">
     Delete
</button>

在你的.js然后把：

$(document).on('click', ':button', function (e) {
    var btn = $(e.target);

    btn.attr("disabled", "disabled"); // disable button

    var name = btn.data('name');
    var parentName = btn.data('parentName');

    $.ajax({
        url: "/delete/getDeletionDetails",
        data: {
            name: name,
            parentName: parentName
        },
        success: function (data) {
            if (confirm(data + '\nDo you want to proceed?')) {
                $.ajax({
                    url: '/delete/deleteRow',
                    data: {
                        name: name,
                        parentName: parentName
                    },
                    success: function (d) {
                        console.log("Success: " + d);
                    }
                });
            } else {
                btn.removeAttr("disabled"); // enable button
            }
        }
    });
});

这段代码的作用是向 / delete / getDeletionDetails 发送ajax调用，然后使用其响应（由 DeleteDetroller中的 getDeletionDetails 操作呈现 DeleteController ）显示确认提醒。如果用户确认了问题，则会发送另一个ajax调用 - 现在 DeleteController 的 deleteRow 操作 - 使用从单击按钮的数据属性中获取的参数。如果用户取消 - 除了重新启用按钮外没有任何反应。

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

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

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

第二个选项是将删除详细信息放在隐藏字段或每行中的 data - 属性中，然后在 js 中检索它们：

您可以在 row 的域类（可能是 Row ）中创建一个方法 getDeletionDetails（），它返回详细信息（使用域类不完美，但如果服务不是很复杂，应该可以正常工作）。然后，在 .gsp 位置：

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

然后您应该能够在 .js 中获取详细信息：

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