g：グレーの2つのコンボボックスを使用して選択してください

Question

こんにちは私は2つのドロップダウンコンボボックスを使用して店をリストしようとしています。国や都市を選択していない場合は、すべてのお店を一覧表示します。他の方法は、都市の国またはその両方によるリストです。ところで、コントローラを作成しなかったので、generate-allを使ってtehmを生成します。 ここは私の見解です。ここ

<g:form action="index" method="POST"> 
      <div class="fieldcontain"> 
       <g:select name="ddlCountry" noSelection="[null:message(code:'default.select.label',default:'Seçiniz...')]" 
       from="['UK', 'NL', 'DE']" 
       value="${params.ddlCountry}"/> 
       <g:select name="ddlCity" 
          from="['AMSTERDAM', 'Erfurt', 'Manchester','London']" 
          value="${params.ddlCity}"/> 

       <input class="btn btn-danger" type="submit" value="Listele" /> 
       <g:each in="${shopList}" status="i" var="shopInstance"> 
        <tr class="${(i % 2) == 0 ? 'even' : 'odd'}"> 
         <td> 
          <g:link controller="shop" action="show" params="[id:shopInstance.id]"> 
           ${fieldValue(bean: shopInstance, field: "shopName")} 
          </g:link> 
         </td> 
         <td>${fieldValue(bean: shopInstance, field: "shopAdress1")}</td> 
         <td>${fieldValue(bean: shopInstance, field: "shopPostcode")}</td> 
         <td>${fieldValue(bean: shopInstance, field: "shopCity")}</td> 
         <td>${fieldValue(bean: shopInstance, field: "shopCountry")}</td> 
         <td>${fieldValue(bean: shopInstance, field: "shopDateEdited")}</td> 

        </tr> 
       </g:each> 
      </div> 
     </g:form> 

と

は、それはすべてのお店ごとにリストされています

def index(Integer max) { 
    params.max = Math.min(max ?: 10, 100) 
    if(params.ddlCountry || params.ddlCity) { 
     def shops = Shop.withCriteria { 
      if (params.ddlCountry) { 
       like('shopCountry', '%${params.ddlCountry}%') 
      } 
      if (params.ddlCity) { 
       like('shopCity', '%${params.ddlCity}%') 
      } 

     } 
     [shopList:shops] 
    } 
    else{ 
     respond Shop.list(params), model:[shopCount: Shop.count()] 
    } 


} 

ショップコントローラインデックスです。私は、ページが爽やかですが、何も学ぶことがたくさんありますように

Answer 1

はそう起こっていないボタンをクリックすると：

を、それは、このビットを置くの内側_index.gsp 呼ばmyControllerフォルダ内に新しいテンプレート/ファイルを作成しますが

<g:each in="${shopList}" status="i" var="shopInstance"> 
         <tr class="${(i % 2) == 0 ? 'even' : 'odd'}"> 
          <td> 
           <g:link controller="shop" action="show" params="[id:shopInstance.id]"> 
            ${fieldValue(bean: shopInstance, field: "shopName")} 
           </g:link> 
          </td> 
          <td>${fieldValue(bean: shopInstance, field: "shopAdress1")}</td> 
          <td>${fieldValue(bean: shopInstance, field: "shopPostcode")}</td> 
          <td>${fieldValue(bean: shopInstance, field: "shopCity")}</td> 
          <td>${fieldValue(bean: shopInstance, field: "shopCountry")}</td> 
          <td>${fieldValue(bean: shopInstance, field: "shopDateEdited")}</td> 

         </tr> 
        </g:each> 

：に変更し

  <!-- add onChange function to select you could look up item on change through jquery instead--> 
      <g:select name="ddlCity" 
         from="['AMSTERDAM', 'Erfurt', 'Manchester','London']" 
         value="${params.ddlCity}" onChange="verifyCity(this.value)"/> 

      <input class="btn btn-danger" type="submit" value="Listele" /> 
      <!-- put a wrapper div ID around actual results --> 
      <div id="results"> 
      <!-- make it render template now the controller action renders same content for this bit --> 
      <g:render template="/myController/index" /> 
      </div> 
      <!-- END Wrapper --> 
     </div> 


     <script> 
     //Write some java script to handle the actions clicked 

     //VerifyCity will work on city click 
     //Hopefully this should be all it needs it gets a value builds a data array passes it to load results 
     function verifyCity(value) { 
     // 
      var data={ddlCity:value} 
      loadResults(data); 
     } 

     //Same as above for country 
     function verifyCountry(value) { 
      var data={ddlCountry:value} 
      loadResults(data); 
     } 

     //This runs a jquery post to the CONTROLLERNAME - define this and your action 
     //when it has a success it updates results DIV with the content 
     function loadResults(data) { 
      $.ajax({timeout:1000,cache:true,type: 'post',url: "${g.createLink(controller: 'CONTROLLERNAME', action: 'index')}", 
      data:data, 
      success: function(output) { 
       $('#results').html(output); 
      } 
     }); 
     </script>    

結果を表示するセグメントは、通常はテンプレートを呼び出してレンダリングするときに、独自のテンプレートに表示されます。 ajax呼び出しが行われると、その特定のテンプレートがレンダリングされます。それは、通常、これはAJAX呼び出しは、テンプレート_index.gspではなく、インデックスをレンダリングしている場合、コントローラに伝えますif (request.xhr)場合を除いて行ったよう

今すぐあなたのコントローラにいくつかの変更

def index(Integer max) { 
    params.max = Math.min(max ?: 10, 100) 

    if(params.ddlCountry || params.ddlCity) { 
     def shops = Shop.withCriteria { 
      if (params.ddlCountry) { 
       like('shopCountry', '%${params.ddlCountry}%') 
      } 
      if (params.ddlCity) { 
       like('shopCity', '%${params.ddlCity}%') 
      } 

     } 
     //If request is coming in via ajax load in a template of the actual results so the bit that is within div id='results' should be actually a template.  
     if (request.xhr) { 
      render (template: 'myController/index', model:[shopList:shops]) 
      return 
     } 
     //This will handle non ajax calls and will load in the index.gsp which includes the site mesh 
     [shopList:shops] 
     return 
    } 

    //no need for else just use return to stop a if statement in a controller 
    respond Shop.list(params), model:[shopCount: Shop.count()] 
    return 
} 

は、コントローラが動作します。 gsp

これらの2つの違いは、index.gspのlayout = "main"です。これは、サイトのスタイルで読み込まれるサイトメッシュです。テンプレートはプレーンであり、レンダリングされた既存のノーマルページのセグメントにオーバーロードすることができます。