在按钮单击时从 Grails 模板添加表行

Question

因此，与我的 create.gsp 关联的 _form.gsp 模板从模板为该行创建一个初始表，如下所示：

<table id="myTable">
<!-- define table headers here -->
<g:each var="i" in="${1..5}">
    <g:render template="tableRow" model="['i': i]" />
</g:each>
</table>

我想做的是在该表下方添加一个按钮或一个链接，让您可以再添加五行，同时保留您迄今为止在表单中输入的所有数据。

我可以看到这在“纯”javascript 中是如何实现的，但我基本上必须在我的 javascript 文件中重复 _myTable.gsp HTML。我想避免这种情况（干燥等）。

我该怎么做？

编辑 所以，我尝试了 Gregg 的解决方案（如下）。这是我想出的。

控制器有一个动作：

def addMoreRows() {
    println params
    def i = params.rowNumber + 1
    def j = i+5
    println "i is set to " + i
    render(template: "foapRow", bean:i, var:i, model: ['rowStart': i, 'rowEnd': j])
    }

create.gsp 页面照常调用 _form.gsp，将 rowStart 和 rowEnd 添加到模型中。

create.gsp

<g:render template="form" model="['userId':userId, 'rowStart':1, 'rowEnd':5]"/>

*_form.gsp* 反过来将这些参数传递给行模板，并创建一个链接来调用上述控制器操作。它也有 javascript Gregg 推荐：

<script type="text/javascript">
    $("#addRowsLink").on("click", function(e) {
        e.preventDefault();
            $.get("/Controller/addMoreRows", function(html) {
                $("#theTableInQuestion>tbody").append(html);
            });
        });
    </script>
    <table>
    ...
        <g:render template="tableRow" model="['rowStart':1, 'rowEnd':5]"/>
    </table>
    <g:remoteLink id="addRowsLink" action="addMoreRows" update="theTableInQuestion" onSuccess="addRows(#theTableInQuestion, data, textStatus)" params="['rowNumber':data]">Add More Rows</g:remoteLink>

*_tableRow.gsp* 的开头和结尾为：

<g:each var="i" in="${rowStart..rowEnd}">
    <tr>
    ...
    </tr>
</g:each>

在之前的尝试中，我在包含的 javascript 文件中有这个函数：

function addRows(tableId, rowCode, status) {
    $(tableId + ' tr:last').after(rowCode);
}

现在，当我点击“添加更多行”链接时，我仍然会被带到一个新页面，并且它只有一行。

Answer 1

一种可能的解决方案。您将需要更改您的模板，以便它执行循环：

普惠制：

<table id="myTable">
<tbody>
    <g:render template="tableRows" model="[loopCount:loopCount, moreData:moreData]" />
</tbody>
</table>

模板：

<g:each in="${loopCount}" var="idx">
  <tr>
     <td>.....</td>
     ......
  </tr>
</g:each>

JavaScript：

$("#someButtonId").on("click", function(e) {
  e.preventDefault();
  $.get("/controller/someAction", function(html) {
    $("#myTable>tbody").append(html);
  });
});

控制器：

def someAction = {
  // logic here
  render template: "tableRows", model="[loopCount: 5, moreData:moreData]"
}

您还可以每次将表中的所有数据提交到服务器并刷新整个页面，添加逻辑以遍历可变数量的行。但是您需要在服务器上收集所有数据并确保将其放回请求中。

可能有十几种方法可以做到这一点，所以如果你得到这么多答案，不要感到惊讶。 :o)