Grails动态下拉菜单

最新推荐文章于 2022-05-11 10:06:14 发布

dnc8371

最新推荐文章于 2022-05-11 10:06:14 发布

阅读量170

点赞数

文章标签： java python vue spring django ViewUI

最近，我有一个UI要求，客户希望从两个单独的下拉列表中选择值。第一个下拉列表的值实质上过滤了第二个下拉列表的值。鉴于我们支持的财务项目对UI的要求并不严格，因此我不得不进行一些初步的学习和实验，以实现良好的实施。这篇博客条目详细介绍了如何在Ajax和最少JavaScript的Grails中实现动态下拉菜单。

示例问题

人为的动态下拉菜单可以在下面描述：

用户想选择一个城市的运动队。用户首先为下拉菜单选择一个值以选择城市。第二个下拉列表与该城市的运动队一起过滤。一个例子来澄清：

用户在第一个下拉列表中选择达拉斯作为城市。第二个下拉列表现在显示值：小牛，牛仔和游骑兵。
用户在第一个下拉列表中选择匹兹堡作为城市。现在，第二个下拉列表显示“钢人”，“海盗”和“企鹅”的值。

Grails中的高级设计

在进入细节之前，我们可以退后一步，描述如何在grails框架中完成动态下拉菜单。

在gsp页面上，使用城市列表创建选择下拉列表。
在更改城市下拉列表时，将ajax调用与选定城市的参数一起发送到服务器。
服务器上的控制器将接收该参数，并根据所选城市寻找球队。
返回带有新选择团队下拉列表的模板，为模型提供带有已过滤团队列表的模型。

我们将在下面继续介绍代码片段。该代码使用Grails 2.0进行了演示。

域对象

此示例的域对象非常简单：带有名称的City对象和Team对象。

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页面

一个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 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])
  }
}

模板

该模板用于替换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 。