Grails: данные нагрузки на одном ComboBox в зависимости от другого

Question

Допустим, у меня есть выпадающий с параметрами ОБЩИЙ, воздух, земля и SEA

<g:select name="group" from="${['GENERAL', 'AIR', 'GROUND', 'SEA']}" valueMessagePrefix="default.category" value="${tipoN}" /> 

, а затем другой выпадающий, который загружает определенную информацию в зависимости от того выбора вы ГЕНЕРАЛЬНЫЙ , AIR, GROUND или SEA.

Скажем GROUND имеет 3 варианта, FedEx, USPS, DHL, но AIR имеет полный разных, AIRPLANE, JET, HOT AIR BALLOON.

Имя другого <g:select> должно быть "commodity"

Я думал о создании файла JavaScript и обрабатывать все, как HTML, но я сделал некоторые исследования Google и не так просто, как я думал.

Кто-нибудь знает, что было бы лучшим способом? Заранее спасибо!

FG

Answer 1

Похоже, вы хотите использовать AJAX для этого. Один из способов, вы можете сделать это с помощью комбинации шаблонов и объекты предметной области:

// grails-app/domain/ShippingOption.groovy 

class ShippingOption = { 
    String method, // can be 'ground', 'sea', 'air', or 'general' 
      name // can be 'fedex', 'ups', etc. 

    def options = { 
     def meth = params.method ?: "general" 
     def comList = ShippingOption.findByMethod(meth) 
     render(template:"shippingList", model: [ commodityList: comList ]) 
    } 
} 

И шаблон:

<!-- grails-app/views/_shippingList.gsp --> 
<g:each var="opt" in="${commodityList}"> 
    <option value="${opt.name}">${opt.name}</option> 
</g:each> 

И в вашем GSP с полем выбора на нем:

<!-- ... other stuff is before here ... --> 
<g:select name="method" from="${['GENERAL', 'GROUND', 'SEA', 'AIR']}" 
    onchange="${remoteFunction(action:'options', update:'commodity', 
     params:''method=' + this.value')}" /> 
<select id="commodity"></select> 

Я уверен, что я испортил некоторый синтаксис, и вам определенно придется реорганизовать это немного, чтобы работать с вашим кодом. Но, по крайней мере, у вас есть общая идея.

И использовать их, добавить их в базу данных как ShippingOption s. Вот один из способов сделать это.

["fedex", "ups"].each { name -> 
    def so = new ShippingMethod(method: "ground", name: name) 
    so.save() 
} 

PS: Вы также сможете визуализировать методы доставки динамически.

Смотрите также: remoteFunction, g:select, templates и AJAX

Answer 2

Я хотел бы рассмотреть вопрос о повторном проектировании пользовательского интерфейса и изменения потока. Выпадающая зависимость, которую вы описываете, предполагает, что форма, вероятно, должна быть разделена, и принятие «волшебного» решения приведет к созданию более удобного и прочного решения, которое будет работать и без JavaScript.

Answer 3

У меня есть работающий пример использования AngularJS и Грааль здесь:

http://wordpress.transentia.com.au/wordpress/2013/12/24/keeping-up-with-the-joneses/

(извинения, если это не соответствует SO «стиль», но я не»думаю, что размещение 100s строк кода и словоблудия также подходит).