Question

我有点困境，并认为这可能是一个设计问题。我有一个联系人列表返回到我的视图（searchResults）基于一些标准（复选框等）。基本上是一种高级搜索。

每个联系人在字段集中有三个链接，允许编辑，显示详细信息或“hitThis”。 hitThis方法执行一系列任务，为联系人生成三个新值 - 年龄，大小，速度。当我点击该链接时，我想基本上只用新值更新该行（列已存在，只是空）。

我的gsp中有一个div，其中包含一个显示searchResults列表的表。在我提交搜索结果的表单期间，我返回一个联系人列表，用于更新div存在的模板。这很好。

在那个div中，我有一个这样的表格：

<td>
  <g:form>
    <fieldset class="buttons">
      <g:hiddenField name="id" value="${contactInstance?.id}" />
      <g:set var="searchResults" value="${searchResults}" /><br/>
      <g:set var="cID" value="${contactInstance?.id}" /><br/>
      <g:actionSubmit class="edit" action="edit" value="${message(code: 'Edit')}"/>
      <g:actionSubmit class="show" action="show" value="${message(code: 'Show')}"/>
      <g:remoteLink action="hitThis" value="Click Me" update="searchResultsDiv" params="[searchResults:searchResults, cID:cID]"/>
    </fieldset>
  </g:form>
</td>

当我为hitThis选择远程链接时，我想执行一个操作，该操作将更新附加到searchResults模板中该contactInstance行的三列：

点击之前：

myName  age  size  speed
Tom     empty empty empty

点击后：

myName age size speed
Tom    20   6    4.9

我认为渲染会处理它，但是对hitThis的调用不会返回最初传递给更新该表的searchResults列表（可能非常大）。我宁愿不通过列表，因为我认为这是过度的，性能严重。

我可以将用户重定向到该联系人的信息页面（显示），但我希望能够动态更新该表。

如何在我的hitThis调用之后简单地更新div甚至表行，而不必将所有内容传递回控制器，只需将其再次传回？

编辑：

所以我的结果现在根据你给我的例子类似于此（名字是Ted，大小是5，速度是4：

name     size    speed
Ted54   Ted54    Ted54

以下是我观点的一部分：

<td id="name-${contactInstance.id}"><g:render template="name" model="['contactInstance':contactInstance]"/></td>
<td id="size-${contactInstance.id}"><g:render template="size" model="['contactInstance':contactInstance]"/></td>
<td id="speed-${contactInstance.id}"><g:render template="speed" model="['contactInstance':contactInstance]"/></td>

<fieldset class="buttons">

    <g:hiddenField name="id" value="${contactInstance?.id}" />
    <g:remoteLink action="moreInfo" params="['cid':contactInstance?.id]" onSuccess="updateData(data,'${contactInstance?.id}'), updateData2(data,'${contactInstance?.id}'), updateData3(data,'${contactInstance?.id}')" >TEST</g:remoteLink>
</fieldset>

这是我的Javascript：

    <script>
        function updateData(data, id) {
            alert(data);
            $('#name-'+id).html(data);
        }

        function updateData2(data, id) {
            alert(data);
            $('#size-'+id).html(data);
        }

        function updateData3(data, id) {
            alert(data);
            $('#speed-'+id).html(data);
        }
    </script>

我的控制器方法：

def moreInfo() {
    def contactInstance = Contact.get(params.cid)

    contactInstance.name= "Ted"
    contactInstance.size= "5"
    contactInstance.speed= "4"

    if (contactInstance.save(flush: true)) {
        println(contactInstance)
    }

    render(template:'name', model:[contactInstance:contactInstance])
    render(template:'size', model:[contactInstance:contactInstance])
    render(template:'speed', model:[contactInstance:contactInstance])
}

Answer 1

远程调用返回后，您可以使用javascript操作DOM。

（我不确定为什么你需要通过远程调用传递整个searchResults。它可能是一个相当大的结构。你可以考虑将它存储在会话中并在那里操作它。当然，这是你可以做出的设计决定。）

另一种思考方法是为表单创建模板。然后使用远程调用渲染该模板（替换td中的现有模板）。

模板：_myform.gsp

  <g:form>
    <fieldset class="buttons">
      <g:hiddenField name="id" value="${contactInstance?.id}" />
      <g:set var="searchResults" value="${searchResults}" /><br/>
      <g:set var="cID" value="${contactInstance?.id}" /><br/>
      <g:actionSubmit class="edit" action="edit" value="${message(code: 'Edit')}"/>
      <g:actionSubmit class="show" action="show" value="${message(code: 'Show')}"/>
      <g:remoteLink action="hitThis" value="Click Me" update="searchResultsDiv" params="[searchResults:searchResults, cID:cID]"/>
    </fieldset>
  </g:form>

然后您的正常页面gsp可以是：

...
<tr>
  <td>
    <g:render template="myform" />
  </td>

  <td>
    <g:render template="myform" />
  </td>
</tr>
...

并在'hitThis'动作中，

def hitThis() {
    ...
    render(view: "myform")
}

最后，使用javascript替换客户端“td”中的表单

Grails - 使用AJAX调用期间已存在的数据更新表

1 个答案: