Grails GSP 循环遍历索引并对选定的行执行某些操作

Question

在 Index-gsp 中，我希望能够选择任意数量的行，然后通过单击链接将所有这些行发送到控制器进行处理，例如创建不同类型的新对象。

我不知道如何进行选择或如何在 GSP 中收集这些选定的行。如果可能的话，也许我应该在每一行上使用一个复选框？

这是使用修改后的 index.gsp 显示的产品列表。 每个产品线前面都有一个复选框。 我想要的是列出被检查的产品列表，然后将此列表传输给控制器。

这个 index.gsp 的一部分：

        <li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
        <li><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></li>
        <li><g:link class="create" action="createOffer"><g:message code="default.new.label" args="[entityName]" params="toOffer" /></g:link></li>
    </ul>
</div>
<div id="list-prodBuffer" class="content scaffold-list" role="main">
    <h1><g:message code="default.list.label" args="[entityName]" /></h1>
    <g:if test="${flash.message}">
        <div class="message" role="status">${flash.message}</div>
    </g:if>
    <table>
        <thead>
            <tr>
                <td> Välj</td>
                <td> ID</td>
            </tr>
        </thead>
    <tbody>             
        <g:each in="${prodBufferList}" status="i" var="prodBuffer">
            <tr class="${ (i % 2) == 0 ? 'even': 'odd'}">
                                        <td><g:checkBox name="toOffer" value="${prodBuffer.id}" checked="false"  /></td>
                                        <td>${prodBuffer.id}</td>

所以这不是一个普通的表格，只是一个列表，我想使用链接将其传输到控制器。

我是初学者，不知道怎么做。

Answer 1

您可以使用 javascript 从页面收集所有必要的数据，然后将所有数据发送到您的控制器进行处理。 有很多方法可以做到这一点。 例如通过 JQuery 发送：

<script>

//some code

var items = [1,2,3];

//some code

  $('#add-location').click(function () {
    $.ajax({
      type: "POST",
      url: "${g.createLink(controller:'myController', action: 'myControllerMethod')}",
      data: {items: items},
      success: function (data) {
        console.log(data)
      }
    });
  });
</script>

Answer 2

我会回答这个问题，但必须放慢速度，因为感觉就像我开始编写你的项目：

在 gsp 中，您需要有一个隐藏字段，然后在您尝试捕获的数据中添加一个复选框，该复选框应包含构建输出所需的所有数据元素。

<g:hiddenField name="userSelection" value=""/>

<g:checkBox name="myCheckBox" id='myCheckBox' value="${instance.id}"
    data-field1="${instance.field1}" data-field1="${instance.field1}"
   checked="${instance.userSelected?.contains(instance.id)?true:false}" />

在页面的 java 脚本段中，您需要添加以下内容

这将自动选择选择并添加到 javascript 数组中

// Customized collection of elements used by both selection and search form
$.fn.serializeObject = function() {
    if ($("[name='myCheckBox']:checked").size()>0) {
        var data=[]
        $("[name='myCheckBox']:checked").each(function() {
            var field1=$(this).data('field1');
            var field2=$(this).data('field2');
            data.push({id: this.value, field1:field1, field2:field2 });
    });
            return data
    }
};

最重要的是，如果您需要破解分页，您的数据是否会位于许多不同的 gsp 列表页面中：

//Modify pagination now to capture
$(".pagination a").click(function() {
    var currentUrl=$(this).attr('href');
    var parsedUrl=$(this).attr('href', currentUrl.replace(/\&userSelection=.*&/, '&').replace(/\&userSelection=\&/, '&'));
    var newUrl=parsedUrl.attr('href') + '&userSelection=' + encodeURIComponent($('#userSelection').val());
    window.location.href=newUrl
    return false;
});

然后在控制器中解析 JSON 表单字段，并在发布时将其变为您想要的内容

def u=[]
def m=[:]
if (params.userSelection) {
def item=JSON.parse(params.userSelection)
item?.each {JSONObject  i->
        // When field1 is null in JSON set it as null properly
        if (JSONObject.NULL.equals(i.field1)) {
                i.field1=null
        }

        if (resultsGroup) {
                if (!resultsGroup.contains(i.id as Long)) {
                        u << i
                }
        } else {
                u << i
        }
}
m.userSelected=item?.collect{it.id as Long}
m.results=u
}
return m