Пример задачи
Придуманный для динамических выпадающих может быть описан ниже:
Пользователь хотел бы выбрать спортивную команду для города. Пользователь сначала выбирает значение для выпадающего списка, чтобы выбрать город. Второй выпадающий список фильтруется со спортивными командами в этом городе. Пример для уточнения:
- Пользователь выбирает Даллас в качестве города в первом раскрывающемся списке. Второй выпадающий список теперь отображает значения: Mavericks, Cowboys и Rangers.
- Пользователь выбирает Питтсбург в качестве города в первом раскрывающемся списке. Второй выпадающий список теперь отображает значения Стилерс, Пираты и Пингвины.
Дизайн высокого уровня в Grails
Прежде чем мы углубимся в детали, мы можем сделать шаг назад и описать, как мы можем выполнить динамическое раскрытие в структуре Grails.
- На странице gsp создайте выпадающий список со списком городов.
- При изменении выпадающего списка городов отправьте вызов ajax на сервер с выбранным параметром города.
- Контроллер на сервере получает параметр и ищет команды в зависимости от выбранного города.
- Верните шаблон с новым выпадающим списком для команд, предоставив модель с отфильтрованным списком команд.
Мы продолжим ниже с фрагментами кода. Код был продемонстрирован в Grails 2.0.
Доменные объекты
Объекты домена для этого примера довольно просты: объект City с именем и объект Team.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
package dropdown class City { String name static hasMany = [teams: Team] static constraints = { } } package dropdown class Team { String name static belongsTo = [city: City] static constraints = { } String toString() { name } } |
Gsp Page
Страница gsp содержит список городов непосредственно из вызова GORM. Это обычно выполняется и демонстрируется сгенерированными по умолчанию страницами Grails GSP. Обратите внимание на использование функции remoteFunction. Это утилита Grails GSP, которая выполняет ajax-вызов на сервер и предоставляет «update» для раздела dom, который будет обновляться по возвращении.
Для выпадающего списка команды мы начнем с пустого тега выбора. Ниже приведен фрагмент.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<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> |
Контроллер используется для фильтрации
Контроллер будет иметь замыкание, которое принимает идентификатор города, а затем использует его для предоставления групп, связанных с городом. Это закрытие вызывается через ajax. Закрытие отображает шаблон и модель.
Закрытие def dynamicDropdown используется только для навигации. По соглашению он делает GSP с тем же именем.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
package dropdown class CityController { static scaffold = City // just navigation to the gsp def dynamicDropdown = { } def findTeamsForCity = { def city = City.get(params.city.id) render(template: 'teamSelection' , model: [teams: city.teams]) } } |
шаблон
Шаблон используется для замены раздела DOM в GSP. Он принимает любую модель, которая предоставляется.
1
2
3
4
|
<!-- 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 и уменьшить свою зависимость от программирования на стороне клиента. Это оказалось чистым, быстрым и довольно простым!
Ссылка: Grails Dynamic Dropdown от нашего партнера JCG Нирава Ассара в блоге Assar Java Consulting .