Question

我输入了：

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

我只想用输入字符串中的数据动态更新表。什么是最好的方法？将不胜感激的例子/解决方案

Answer 1

您可以使用带有Grail的formRemote标记的AJAX更新表格。

输入表格

<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')
    }
}

如何运作

按下添加按钮后，将调用 add 控制器方法。控制器方法创建域实例并呈现 _entry.gsp 模板。但是，不是刷新浏览器页面，而是将模板呈现为AJAX响应。在客户端，渲染的模板将插入 tbody 元素内的DOM，其中包含id entry ，如 formRemote 标记中所定义更新属性。

请注意，使用此方法会重新呈现所有条目，而不仅仅是新条目。只渲染新的有点棘手。

资源

Answer 2

只是为了给你指示（你没有显示任何控制器和js代码。）：

通过传递/shared/entry集合，为您的控制器（负责控制器）创建一个动作，以呈现模板entries。
在提交表单时，对上面定义的操作进行ajax调用，然后用返回的视图片段（模板）替换tbody html。

Grails Ajax表 - 如何实现？

2 个答案:

输入表格

HTML表格

条目模板

控制器

如何运作

资源