2

したがって、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>

そのテーブルの下にボタンまたはリンクを追加して、これまでにフォームに入力したすべてのデータを保持しながら、さらに5つの行を追加できるようにします。

「純粋な」JavaScriptでそれがどのように可能であるかはわかりますが、基本的には、JavaScriptファイルで_myTable.gspHTMLを繰り返す必要があります。それは避けたい（DRYなど）。

どうやってやるの？

編集 だから、私はグレッグの解決策（下記）を試しました。これが私が思いついたものです。

コントローラには次のアクションがあります。

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 *は、これらのパラメーターを行テンプレートに渡し、上記のコントローラーアクションを呼び出すためのリンクを作成します。また、推奨されるjavascriptGreggがあります。

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

現在、[行を追加]リンクをクリックすると、新しいページが表示され、1行しか表示されません。

4

1 に答える 1

1

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]"
}

また、テーブル内のすべてのデータを毎回サーバーに送信してページ全体を更新し、可変数の行をループするロジックを追加することもできます。ただし、サーバー上のすべてのデータを収集し、それがリクエストに戻されることを確認する必要があります。

これを行うにはおそらく12の方法があるので、多くの回答が得られても驚かないでください。：o）

于 2012-07-20T17:49:04.953 に答える