javascript - 单击按钮时从 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。我想避免这种情况(DRY 等)。

我该怎么做？

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

Controller 有一个 Action :

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。

创建.gsp

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

*_form.gsp* 依次将这些参数传递给行模板，并创建一个链接来调用上述 Controller 操作。它还具有 Gregg 推荐的 javascript:

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

Controller :

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

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

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