Question

我试图在我的编辑表单中添加一个删除按钮但是没有找到任何有用的东西。我见过的建议是使用AJAX，但我不知道如何制作它。

我不想在现有的表格下面制作另一张表格，用于＆＃34;更新＆＃34;但看起来不可能在更新按钮右侧有删除按钮。任何人有想法......？

我测试了这个：

            $( document ).ready( function() {
                $('#delete_prod').on('click',function(event) {
                    alert('DELETE!!!');
                    var id=$(this).data('id');
                    var url="${createLink(controller: 'prodBuffer',action:'delete')}/"+id
                    $.ajax({
                        type: 'POST',
                        url: url,
                        success: function(data){
                            $('#results').html(data);
                        }
                    });
                });
            });
        </script> 

<span id="delete_prod" data-id="1">Delete<span>

但警报不会被发现。

Answer 1

现有表单中的按钮将作为提交按钮，您可以查看<g:actionSubmit并将其作为删除操作提交，然后您可以在控制器中控制或使用类似的内容 - 将某些内容表现为按钮然后使用ajax

动作

<span id="deleteButton" data-id="${instance.id}">Delete<span>

<script>
$('#deleteButton').on('click',function() {
   var id=$(this).attr('data-id');
  var url="${createLink(controller: 'controller',action:'delete')}/"+id
        $.ajax({
            type: 'POST',
            url: url,
            success: function(data){
                $('#results').html(data);
            }
        });
})
<script>

Answer 2

您可以使用按钮组（bootstrap）和单个javascript ajax调用来处理这两个按钮。我们使用按钮的ID来区分要调用的操作。

您的表单在存在的数据方面会有所不同，我刚才使用隐藏的ID字段作为示例。

<script type="text/javascript">
    $( document ).ready( function() {
        $( '.itemAction' ).click(function (event) {
            if ( confirm( 'Are you sure?' )) {
                $.ajax({
                    url: "/prodBuffer/" + this.id,
                    type: "POST",
                    data: $( '#myForm' ).serialize(),
                    success: function ( data ) {
                        $( '#resultdiv' ).html( 'Success' );
                        window.setTimeout( function(){ location = '/prodBuffer/index' }, 2000 )
                    },
                    error: function(j, status, eThrown) { console.log( 'Error ' + eThrown ) },
                    complete: function() { console.log( 'Complete' ) }
                });
            }
        });
    });
</script>

<div id="resultdiv"></div>

<g:form name="myForm">

    <g:hiddenField name="id" value="1" />

    <div class="btn-group" role="group">
        <button type="button" name="myUpdate" id="myUpdate" value="Update" class="itemAction btn btn-primary">Update</button>
        <button type="button" name="myDelete" id="myDelete" value="Delete" class="itemAction btn btn-danger">Delete</button>
    </div>

</g:form>

控制器：

def myUpdate() {
    myService.update( params )
    render (['success'] as JSON )
}

def myDelete() {
    myService.delete( params )
    render (['success'] as JSON )
}

Answer 3

您可以执行以下操作。

将您的范围更改为<a>标记。它可能更容易处理它有不同的状态，如果你使用bootstrap或更容易风格类似的框架。

现在代码：

<form id="myForm">
    <!-- your form fields here-->

    <div>
        <button type="submit">My update button</button> <!-- The normal buttons you´d use-->
        <a href="${createLink(controller: 'prodBuffer', action: 'delete', id: yourDomainId)}" class="button delete-button">Delete button</a>  <!-- your actual delete button -->
    </div>

</form>

<div id="results"></div>

html非常简单，与你的版本非常相似。不同之处在于我更愿意通过类而不是ID引用我的<a>。使用<a>代替<span>可能会使您的代码更易于管理。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>

        $(document).ready(function(){
            $('.delete-button').on('click', function(event){                
                event.preventDefault();  //1
                var deleteTarget = $(this).prop('href'); //2            

                if(confirm("Are you sure?")){ //3
                    $.post( //4
                        deleteTarget, 
                        function successhandler(responseData){
                            $('#results').html(responseData);
                        }
                    );
                }
            });
        });

</script>

对于javascript，以下适用：

阻止<a>
获取所点击链接的href
添加确认信息，以防万一
发送您的数据并管理您的回复

Answer 4

我认为你不需要使用Ajax进行删除，你可以在你的Domain的显示页面和控制器（用于显示）上创建一个删除按钮和代码，如下所示，它也会给你一个确认警报。这称为删除方法。看看。

显示页面代码（show.gsp）

        <g:form>
            <fieldset class="buttons">
                <g:hiddenField name="id" value="${prodBufferInstance?.id}" />
                <g:link class="edit" action="edit" id="${prodBufferInstance?.id}"><g:message code="default.button.edit.label" default="Edit" /></g:link>
                <g:actionSubmit class="delete" action="delete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" />
            </fieldset>
        </g:form>

控制器代码（显示页面）

    def show(Long id) {
      def prodBufferIns = ProdBuffer.get(id)
       if (!prodBufferIns) {
         flash.message = message(code: 'default.not.found.message', args: [message(code: 'prodBufferIns.label', default: 'CustMeterReadingTemp'), id])
         redirect(action: "list")
        return
    }

    [prodBufferInstance: prodBufferIns]
}

控制器代码（删除方法）

def delete(Long id) {
    def prodBufferIns= ProdBuffer.get(id)
    if (!prodBufferIns) {
        flash.message = message(code: 'default.not.found.message', args: [message(code: 'prodBuffer.label', default: 'prodBuffer'), id])
        redirect(action: "list")
        return
    }

    try {
        prodBufferIns.delete(flush: true)

        flash.message = message(code: 'default.deleted.message', args: [message(code: 'prodBuffer.label', default: 'prodBuffer'), id])
        redirect(action: "list")
    }
    catch (DataIntegrityViolationException e) {
        flash.message = message(code: 'default.not.deleted.message', args: [message(code: 'prodBuffer.label', default: 'prodBuffer'), id])
        redirect(action: "show", id: id)
    }
}

Grails，与编辑视图中的更新相同的表单上的删除按钮

4 个答案:

显示页面代码（show.gsp）

控制器代码（显示页面）

控制器代码（删除方法）