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有一个动作：

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 *将这些参数传递给行模板，并创建一个链接来调用上面的控制器动作。它也有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

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

GSP：

<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）

在Button Click上的Grails模板中添加表行

1 个答案: