Grails的阿贾克斯表 - 如何实现?如何实现、Grails、阿贾克斯表

2023-09-10 21:58:10 作者:angel(天使)

我已经输入:

<g:form role="search" class="navbar-form-custom" method="post"
        controller="simple" action="addEntry">
   <div class="form-group">
      <input type="text" placeholder="Put your data HERE"
             class="form-control" name="InputData" id="top-search">
   </div>
</g:form>

和表:

<table class="table table-striped table-bordered table-hover " id="editable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Created</th>
        </tr>
    </thead>
    <tbody>
        <g:render template="/shared/entry" var="entry"
                  collection="${entries}" />
    </tbody>

</table>

控制器:

@Secured(['ROLE_USER', 'ROLE_ADMIN'])
class SimpleController {

def springSecurityService
def user

def index() {

    user =  springSecurityService.principal.username
    def entries = Entry.findAllByCreatedBy(user)
    [entries: entries]
}


def addEntry(){

        def entries = Entry.findAllByCreatedBy(user)
        render(entries: entries)
    }
}

我只是想动态地与输入字符串数据更新表。 什么是最好的方法是什么? 会很感激的例子/解决方案

I just want to dynamically update the table with data from input string. What is the best way? Will be grateful for examples/solutions

推荐答案

您可以更新使用AJAX与圣杯的formRemote标签表。

You can update the table using AJAX with Grail's formRemote tag.

<g:formRemote 
    name="entryForm" 
    url="[controller: 'entry', action: 'add']"
    update="entry">

    <input type="text" name="name" placeholder="Your name" />
    <input type="submit" value="Add" />
</g:formRemote>

HTML表格

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Created</th>
        </tr>
    </thead>
    <tbody id="entry">
        <g:render
            template="/entry/entry" 
            var="entry"
            collection="${entries}" />
    </tbody>
</table>

输入模板

<tr>
    <td>${entry.name}</td>
    <td>${entry.dateCreated}</td>
</tr>

控制器

import org.springframework.transaction.annotation.Transactional

class EntryController {

    def index() {
        [entries: Entry.list(readOnly: true)]
    }

    @Transactional
    def add(String name) {
        def entry = new Entry(name: name).save()

        render(template: '/entry/entry', collection: Entry.list(), var: 'entry')
    }
}

工作原理

在添加按钮是pressed中的添加的控制方法被调用。该控制器方法创建域实例和呈现的 _entry.gsp 的模板。代替刷新浏览器页面,但是,模板呈现给一个AJAX响应。在客户端,呈现的模板被插入到DOM的内部的 TBODY 的id为元素的输入的,如在 formRemote 的标记定义中的更新的属性。

How it works

When the add button is pressed the add controller method is called. The controller method creates the domain instance and renders the _entry.gsp template. But instead of refreshing the browser page, the template is rendered to an AJAX response. On the client side, the rendered template is inserted into the DOM inside of the tbody element with id entry, as defined in the formRemote tag by the update attribute.

请注意,与该方法中的所有条目的重新呈现时,不只是新的。渲染只有新的是有点麻烦。

Note that with this approach all of the entries are re-rendered, not just the new one. Rendering only the new one is a bit trickier.

完整源$ C ​​$ C我的回答 Grails的AJAX Complete source code for my answer Grails AJAX