mysql - g :select using two combobox in grails

Question

您好，我正在尝试使用两个下拉组合框列出商店。如果您没有选择国家或城市，请列出所有商店。根据城市国家或两者的其他方式列表。顺便说一句，我没有创建 Controller ，而是使用 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>

这是商店 Controller 索引

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 调用时，它会呈现该特定模板。

现在对您的 Controller 进行一些更改

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
}

除了 if if (request.xhr) 告诉 Controller 这是一个 ajax 调用呈现模板 _index.gsp 而不是 index.gsp

这两者之间的区别在于 index.gsp 有 layout="main"这是加载站点样式的站点网格。该模板是普通的，可以重载呈现的现有普通页面的一部分。