3

假设我有一个包含 GENERAL、AIR、GROUND 和 SEA 选项的组合框

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

然后是另一个组合框,它根据您选择 GENERAL、AIR、GROUND 或 SEA 来加载某些信息。

假设GROUND有 3 个选项,FedEx, USPS, DHLAIR有完全不同的选项,AIRPLANE, JET, HOT AIR BALLOON

对方的名字<g:select>应该是"commodity"

我想过创建一个 javascript 文件并将所有内容都像 HTML 一样处理,但我做了一些谷歌研究,并没有我想象的那么简单。

有谁知道这样做的最好方法是什么?提前致谢!

FG

4

3 回答 3

3

听起来你会想为此使用 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>

我确定我搞砸了一些语法,你肯定需要对它进行一些重构才能使用你的代码。但至少你已经有了大致的想法。

要使用它们,请将它们作为 s 添加到数据库中ShippingOption。这是一种方法。

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

PS:您还可以动态呈现运输方式。

另请参阅:remoteFunctiong:select模板AJAX

于 2010-09-22T16:05:56.737 回答
0

我在这里有一个使用 AngularJS 和 Grail 的工作示例:

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

(抱歉,如果这不合适所以“风格”,但我不认为发布 100 行代码和措辞是合适的)。

于 2014-08-28T10:45:45.353 回答
0

我会考虑重新设计您的 UI 并更改流程。您正在描述的下拉依赖项表明表单可能应该被拆分,并且采用“类似向导”的解决方案将产生一个更加用户友好和可靠的解决方案,该解决方案也可以在没有 JavaScript 的情况下工作。

于 2010-09-24T08:38:53.013 回答