在按钮上单击从Grails模板添加表格行 [英] Adding table rows from a Grails Template on Button Click

问题描述

因此，与我的create.gsp关联的_form.gsp模板将为该行创建一个初始表格，如下所示： $ c>< table id =myTable>
<！ - 在此处定义表格标题 - >
< g：每个var =iin =$ {1..5}>
< / g：每个>
< / table>

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

我可以看到纯javascript中可能有这种情况，但我会基本上必须在我的JavaScript文件中重复_myTable.gsp HTML。我想避免这种情况（干等）。

我该怎么做？

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

控制器有一个动作：

  def addMoreRows（）{
 println params 
 def i = params.rowNumber + 1 
 def j = i + 5 
 printlni设置为+ 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> 
 ... 
 < / table> 
   
 * _tableRow.gsp *开头和结尾为：
 < g：每个var =iin =$ {rowStart..rowEnd}> 
< tr> 
 ... 
< / tr> 
< / g：每个> 
  
从以前的尝试中，我在包含的JavaScript文件中使用了该函数：
 函数addRows（tableId，rowCode，status）{
 $（tableId +'tr：last'）。 
} 
  
现在，当我点击添加更多行链接时，我仍然进入一个新的页面，它只有一行。
解决方案
一种可能的解决方案。您需要更改您的模板，以便进行循环： 
 
 
 GSP：
 < table id =myTable> 
< tbody> 
< g：render template =tableRowsmodel =[loopCount：loopCount，moreData：moreData]/> 
< / tbody> 
< / table> 
  
模板： 
 
 < g：each in =$ {loopCount}var =idx> 
< tr> 
< td> .....< / td> 
 ...... 
< / tr> 
< / g：每个> 
  
 JavaScript： 
 
 
 < $（'＃someButtonId'）。on（click，function（e）{
 e.preventDefault（）; 
 $ .get（/ controller / someAction，function （html）{
 $（＃myTable> tbody）。append（html）; 
}）; 
}）; 
  
控制器：
  def someAction = {
 //逻辑
渲染模板：tableRows，model =[loopCount：5，moreData：moreData]
} 
  
您也可以每次将表中的所有数据提交给服务器，并刷新整个页面，将逻辑添加到循环中在一些可变数量的行上。但您需要收集服务器上的所有数据，并确保将其放回请求中。
 
 
 
可能有十几种方法可以做到这一点，所以不要如果你得到那么多答案会感到惊讶。 ：o） 
So, the _form.gsp template associated with my create.gsp creates an initial table from a template for the row as follows:
<table id="myTable">
<!-- define table headers here -->
<g:each var="i" in="${1..5}">
    <g:render template="tableRow" model="['i': i]" />
</g:each>
</table>
What I'd like to do is add a button or a link underneath that table that let's you add five more rows, while keeping all the data you've entered in the form so far.

I can see how that's possible in "pure" javascript, but I'd basically have to repeat the _myTable.gsp HTML in my javascript file. I'd like to avoid that (DRY, etc.). 

How can I do that?

Edit
So, I tried Gregg's solution (below). Here's what I came up with.

The Controller has an 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])
    }
The create.gsp page calls the _form.gsp as normal, adding a rowStart and a rowEnd to the model.

create.gsp
<g:render template="form" model="['userId':userId, 'rowStart':1, 'rowEnd':5]"/>
*_form.gsp*, in turn, passes those parameters on to the row template, and creates a link to call the above controller action. It also has the javascript Gregg recommended:
<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>
The *_tableRow.gsp* begins and ends with:
<g:each var="i" in="${rowStart..rowEnd}">
    <tr>
    ...
    </tr>
</g:each>
From a previous attempt, I have this function in my included javascript file:
function addRows(tableId, rowCode, status) {
    $(tableId + ' tr:last').after(rowCode);
}
Right now, when I click the "Add More Rows" link, I still get taken to a new page, and it only has one row on it.
解决方案
One possible solution.  You're going to need to change your template so it does the looping:

GSP:
<table id="myTable">
<tbody>
    <g:render template="tableRows" model="[loopCount:loopCount, moreData:moreData]" />
</tbody>
</table>
Template:
<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]"
}
You could also submit all the data in your table to the server every time and refresh the entire page, adding logic to loop over some variable number of rows.  But you would need to collect all that data on the server and make sure it gets put back in the request.

There's probably a dozen ways to do this so don't be surprised if you get that many answers. :o)

                        
这篇关于在按钮上单击从Grails模板添加表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！