使用grails级联更新下拉列表
2014-08-18 15:56
316 查看
实现级联更新效果有多种方式,现只介绍用jquery框架的ajax技术实现的方式,个人认为使用jquery的方式更好更灵活,因为它只负责传数据,如果用grails自带的异步更新,简单的还可以,如果是复杂一点的就比较难搞。
下列代码无需考虑业务意义
jquery的ajax实现:
1.GSP中_form.gsp的简略代码:
下列代码无需考虑业务意义
jquery的ajax实现:
1.GSP中_form.gsp的简略代码:
<div> <g:select id="company" name="company.id" from="${companyInstanceList}"/> </div> <div> <g:select id="salaryType" name="salaryType" from="${unassignedType}"/> </div> <div> <g:select id="operator" name="operator.id" from="${managements}"/> </div> 2.javascript代码 <script> $("#company").bind("change", function(){ $("#salaryType option").remove(); var company = $("#company").val() $.ajax({ url: "findUnassignedType", type: "POST", data: {'companyId': company} , success: function(result){ //此处result返回的是一个map,key是salaryType,value是salaryType下的operator选项 $.each(result, function(key, value){ $("#salaryType").append("<option value=" + key + ">" + key + "</option>") $("#operator option").remove() for(var i=0; i < value.length; i++){ $("#operator").append("<option value=" + value[i].id + ">" + value[i].name + "</option>") } }); } }); }); $("#company").change(); $("#salaryType").bind("change", function(){ $("#operator option").remove(); var salaryType = $("#salaryType").val() $.ajax({ url: "findManagements", type: "POST", data: {'salaryType': salaryType} , success: function(result){ for(var i=0; i < result.length; i++){ $("#operator").append("<option value=" + result[i].id + ">" + result[i].name + "</option>") } } }); }); $("#salaryType").change(); }) </script> 3.controller代码 /** * ajax查询未分派完的公司的项目种类 * @Author luoshida */ def findUnassignedType() { def cAssigns = CAssign.findAllByCompany(Company.get(params.companyId.toLong())) def unassignedType = CAssign.constraints.salaryType.inList cAssigns.each{elem -> unassignedType = unassignedType - elem.salaryType } Map map = new HashMap() unassignedType.each{ elem -> List operators = new ArrayList() Management.findAllBySalaryTypeAndAssignType(unassignedType.get(0), "企业专管员").each{ elem02 -> operators.add(elem02.operator) } map.put(elem, operators) } render map as JSON } /** * ajax查找项目种类对应的专管员 * @Author luoshida */ def findManagements() { def managements = Management.findAllBySalaryTypeAndAssignType(params.salaryType, "企业专管员") List operators = new ArrayList() managements.each{ elem -> operators.add(elem.operator) } render operators as JSON } 注意,返回的时候必须要以JSON字符串的类型返回,此处要导入一个包grails.converters.JSON
相关文章推荐
- Ajax详解及其案例分析之如何获得Ajax对象,使用Ajax对象发送GET和POST请求,校验用户名,POST和GET请求时的乱码处理,实现级联的下拉列表
- 使用Servlet监听器动态更新select下拉列表
- 使用knockoutjs 实现级联下拉列表
- 下拉列表级联菜单封装(直接拿来使用)
- JavaScript解析XML实现两级级联下拉列表
- JavaScript解析XML实现多级级联下拉列表
- JavaScript实现下拉列表的级联
- 使用JavaScript以,号分割文本框内容为数组并添加到下拉列表
- Excel - 使用跨sheet定义Drop_List 下拉列表
- 使用JSON来做数据传输的动态下拉列表
- 为什么无法更新二级菜单中的下拉列表了,
- N级联下拉列表
- sql,scope_identity,procedure,tran,substring,cast,convert,charindex,插入角色的同时插入角色拥有的权限,权限使用权限列表表示,列表用逗号分隔权限的id,更新角色信息,同时更新权限信息
- 不错的下拉列表.HTML控件和服务器控件都可以使用
- ‘select’的使用:下拉列表分组显示
- 在DataGrid中使用下拉列表ComboBox控件
- select下拉列表动态显示选择公司及部门信息——级联
- 2004-11-8/12 + 连动下拉列表控件(更新版,可在页面放置多个)
- .NET中一般处理程序(ashx)在Ajax中的使用--下拉列表的动态级连
- 如何在SharePoint2007中实现下拉列表(DropDownList)的级联菜单效果