Grails：根据另一个组合框加载数据

Posted 2023-05-07

【中文标题】Grails：根据另一个组合框加载数据

【英文标题】：Grails: Load data on one ComboBox depending on another

【发布时间】：2011-04-15 19:21:49

【问题描述】：

假设我有一个包含 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, DHL，但AIR 有完全不同的选项AIRPLANE, JET, HOT AIR BALLOON。

另一个<g:select>的名字应该是"commodity"

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

有谁知道最好的方法是什么？提前致谢！

FG

【参考方案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>

我确定我弄乱了一些语法，您肯定需要对其进行一些重构才能使用您的代码。但至少你已经大致了解了。

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

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

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

另请参阅：remoteFunction、g:select、templates 和 AJAX

【讨论】：

但是我在哪里给每个“方法”选项？我明白了一般的想法，我只是有点迷茫。比如我在哪里给每个人选择？

最后一段代码应该去哪里？？在控制器中？？

另外，g:select 的代码似乎是第一个，第二个发生了什么？对不起，我有点迷路了：/

最后一段代码可以随心所欲。也许在 BootStrap.groovy 文件中？如果您不想通过代码添加它们，您可以随时使用脚手架并手动添加它们。第二个选择是 id 为“commodity”的选择。由于您是通过 AJAX 更新它，因此您不需要它是 g:select。

好吧，我有点迷路了。第二个盒子没有加载，但第一个盒子是。通用、地面、空中、海上。应该是第一个盒子。然后根据每一个，在第二个下拉框中应该可以选择不同的东西。在你给我的代码中，我应该在哪里声明这些不同的选项？最后一段代码？？

【参考方案2】：

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

【讨论】：

解释一下，我不明白你想说什么。我愿意接受任何建议。但我需要用户选择一个选项，然后根据该选项有某些选项。

我假设这两个下拉菜单位于同一页面上，因此存在问题。我建议您也许可以重新设计界面并通过 UI 创建一个替代流程，这样不需要依赖选择下拉菜单..

【参考方案3】：

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

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

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

【讨论】：

在这里找到了一个简单的链式选择教程grails.asia/…