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