最近，我有一個UI要求，客戶希望從兩個單獨的下拉列表中選擇值。 第一個下拉列表的值實質上過濾了第二個下拉列表的值。 鑒于我們支持的財務項目對UI的要求并不嚴格，因此我不得不進行一些初步的學習和實驗，以實現良好的實施。 這篇博客條目詳細介紹了如何在Ajax和最少JavaScript的Grails中實現動態下拉菜單。

示例問題

人為的動態下拉菜單可以在下面描述：

用戶想選擇一個城市的運動隊。 用戶首先為下拉菜單選擇一個值以選擇城市。 第二個下拉列表與該城市的運動隊一起過濾。 一個例子來澄清：

• 用戶在第一個下拉列表中選擇達拉斯作為城市。 第二個下拉列表現在顯示值：小牛，牛仔和游騎兵。
• 用戶在第一個下拉列表中選擇匹茲堡作為城市。 現在，第二個下拉列表顯示“鋼人”，“海盜”和“企鵝”的值。

Grails中的高級設計

在進入細節之前，我們可以退后一步，描述如何在grails框架中完成動態下拉菜單。

• 在gsp頁面上，使用城市列表創建選擇下拉列表。
• 在更改城市下拉列表時，將ajax調用與選定城市的參數一起發送到服務器。
• 服務器上的控制器將接收該參數，并根據所選城市尋找球隊。
• 返回帶有新選擇團隊下拉列表的模板，為模型提供帶有已過濾團隊列表的模型。

我們將在下面繼續介紹代碼片段。 該代碼使用Grails 2.0進行了演示。

域對象

此示例的域對象非常簡單：帶有名稱的City對象和Team對象。

package dropdownclass City {String namestatic hasMany = [teams: Team]static constraints = {} }package dropdownclass Team {String namestatic belongsTo = [city: City]static constraints = {}String toString() {name} }

Gsp頁面

一個gsp頁面包含直接來自GORM調用的城市列表。 這通常由默認生成的grails gsp頁面執行和演示。 注意remoteFunction的使用。 這是一個grails gsp實用程序，它對服務器進行ajax調用，并為要返回的dom部分提供“ update”。

對于團隊下拉菜單，我們將從一個空的選擇標簽開始。 下面是一個片段。

<g:select name="city.id" from="${City.list()}" optionKey="id" optionValue="name"noSelection="['':'Choose City']"onchange="${remoteFunction (controller: 'city',action: 'findTeamsForCity',params: ''city.id=' + this.value',update: 'teamSelection')}" />....<td id="teamSelection" valign="top"><select><option>Choose Team</option></select></td>

用于過濾的控制器

控制器將具有一個封閉區，該封閉區將輸入城市ID，然后使用它來提供與城市相關的團隊。 該關閉是通過ajax調用的。 閉合呈現模板和模型。

def dynamicDropdown閉合僅用于導航。 按照約定，它會呈現相同名稱的gsp。

package dropdownclass CityController {static scaffold = City// just navigation to the gspdef dynamicDropdown = {}def findTeamsForCity = {def city = City.get(params.city.id)render(template: 'teamSelection', model: [teams: city.teams])} }

模板

該模板用于替換gsp中dom的一部分。 它接受提供的任何模型。

<!-- This template renders a drop down after a city is selected --><g:select name="team.id" from="${teams}" optionValue="name"optionKey="id"/>

結論

有多種方法可以完成動態下拉列表。 可以使用本機jQuery，甚至可以使用本機JavaScript。 我選擇利用grails的內置功能并減少對客戶端編程的依賴。 事實證明，這是干凈，快速且非常簡單的！

參考： Assar Java Consulting博客中來自JCG合作伙伴 Nirav Assar的Grails Dynamic Dropdown 。

翻譯自: https://www.javacodegeeks.com/2012/06/grails-dynamic-dropdown.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Grails动态下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。