Grails动态下拉菜单
示例问题
人为的动态下拉菜单可以在下面描述:
用户想选择一个城市的运动队。 用户首先为下拉菜单选择一个值以选择城市。 第二个下拉列表与该城市的运动队一起过滤。 一个例子来澄清:
- 用户在第一个下拉列表中选择达拉斯作为城市。 第二个下拉列表现在显示值:小牛,牛仔和游骑兵。
- 用户在第一个下拉列表中选择匹兹堡作为城市。 现在,第二个下拉列表显示“钢人”,“海盗”和“企鹅”的值。
Grails中的高级设计
在进入细节之前,我们可以退后一步,描述如何在grails框架中完成动态下拉菜单。
- 在gsp页面上,使用城市列表创建选择下拉列表。
- 在更改城市下拉列表时,将ajax调用与选定城市的参数一起发送到服务器。
- 服务器上的控制器将接收该参数,并根据所选城市寻找球队。
- 返回带有新选择团队下拉列表的模板,为模型提供带有已过滤团队列表的模型。
我们将在下面继续介绍代码片段。 该代码使用Grails 2.0进行了演示。
域对象
此示例的域对象非常简单:带有名称的City对象和Team对象。
package dropdownclass City {String namestatic hasMany = [teams: Team]static constraints = {}
}package dropdownclass Team {String namestatic 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 dropdownclass CityController {static scaffold = City// just navigation to the gspdef 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 。
翻译自: https://www.javacodegeeks.com/2012/06/grails-dynamic-dropdown.html
Grails动态下拉菜单相关推荐
- 动态方法注入 grails_Grails动态下拉菜单
动态方法注入 grails 最近,我有一个UI要求,客户希望从两个单独的下拉列表中选择值. 第一个下拉列表的值实质上过滤了第二个下拉列表的值. 鉴于我们支持的财务项目对UI的要求并不严格,因此我不得不 ...
- vue动态生成下拉框_解决vue动态下拉菜单 有数据未反应的问题
问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料 发现 Vue的this理解有误 jsp 下拉菜单 {{item.plantModelName}} JS new Vue({ el ...
- 利用HTML,CSS实现动态下拉菜单
利用HTML,CSS实现动态下拉菜单 HTML部分 CSS部分 静态部分 动态部分 三角符号 运行效果 HTML部分 <!DOCTYPE html> <html><hea ...
- excel表格内容拆分_Excel表格中制作动态下拉菜单的方法,学会了菜单内容想加就加...
To do list heading 在我们日常工作中,利用下拉菜单选择输入,不仅对单元格输入内容进行限制,关键是省去打字的麻烦,点点鼠标就完成输入了.通常情况下,我们是通过通过数据验证(数据有效性) ...
- html 联想下拉菜单,这种Excel下拉菜单你见过吗?具有联想动态下拉菜单
之前有教过大家在Excel中制作下拉菜单功能,下拉菜单功能可以帮助我们在工作中快速的选择内容,而不需要我们手动输入,大大的节省了我们录入内容的时间.不过除了下拉菜单之外,其实,Excel还可以制作出& ...
- thinkphp实现动态下拉菜单(补充 设置默认值)
在下拉菜单中的选项 用动态方式添加 提高项目可扩展性 HTML部分 <span style="font-family:KaiTi_GB2312;font-size:18px;" ...
- qtcreator下拉列表怎么制作_设置EXCEL动态下拉菜单,只需要一个组合键,新手也能快速掌握...
操作版本:OFFICE365 在EXCEL制作一级下拉菜单有4种方法,你掌握几种?一文中,我提到了一级下拉菜单的制作方法,其中用公式法来制作下拉菜单可以实现内容增减后下拉菜单的内容也自动增减,这个方法 ...
- javascript 二级动态下拉菜单选项
</tr> <script language = "JavaScript"> var onecount2; subcat2 = new Array(); o ...
- 动态左侧二级下拉菜单 基于bootstrap js
动态左侧二级下拉菜单 html代码: <!DOCTYPE html> <html lang="en"> <head><meta chars ...
最新文章
- 机器学习(13)岭回归(线性回归的改进)
- Python之超级好用的8个VS Code扩展
- 三维重建6:绑架问题/SensorFusion/IMU+CV-小尺度SLAM
- chrome浏览器net::ERR_TOO_MANY_REDIRECTS
- linux的安装方式(一)
- python 鱼骨图_面向对象编程,鱼骨图分析法
- 评测网站的十个指标!
- 主板风扇转速测试软件,技嘉风扇转速调节及超频软件EasyTune6
- Linux 无线网卡驱动安装 Dell Inspiron R14-N4010 笔记本
- N1小钢炮下载系统-系统的安装及使用-篇一
- excel二极管伏安特性曲线_基础元件介绍—半导体二极管
- 解空间树搜索及最优解
- 关于web服务器硬件配置
- Windows10系统C盘文件实际大小占用空间和可用空间不一致(相差差8到20G)
- i3处理器_千元英特尔10代I3处理器套装跑分72万?微星差异化赢得市场
- 词嵌入向量WordEmbedding的原理和生成方法
- python爬取王者荣耀高清图
- 雷鸟电视卸载自带应用和开机广告+停用自动更新
- PE中Ghost 使用详解
- 企业文件防泄密整体解决方案
热门文章
- jcmd_jcmd,大约JDK 11
- cassandra使用心得_避免在Cassandra中使用清单
- java jpa 异步编程_异步处理时的JPA
- aws sqs_JMS和AWS SQS的更多高级内容
- javadoc 标签_新的Javadoc标签@ apiNote,@ implSpec和@implNote
- sprint boot_Sprint Boot子战争包装
- java8 base64_Java 8中的Base64 –加入乐趣为时不晚
- Java 12常规可用性
- adf 自动输稿器_在ADF实体PK属性中使用MySQL自动增量PK列
- spring java配置_Spring:使基于Java的配置更加优雅