`

grails通过Ajax实现select标签的级联

阅读更多
在grails通过选择select不同的option,通过Ajax查询数据库中的值,返回Json类型的结果,实现页面标签的无刷新级联。
1.页面代码,在id为type.id不同的选择返回不同的值到id为brand的select中。
 <tr> <td valign="top" class="name">
                           <label for="type">设备类型</label>
                    </td>
                      <td>
<select id="type.id" name="type.id" onchange ="setPinPai(this.options[this.selectedIndex].value)">
<g:each in="${purCategoryList}"status="i"var="purCategoryIn">         
<option value="${purCategoryIn.id}">${purCategoryIn.name}</option>
                            </g:each>                                     
                      </select><font color = "red">*</font>
                              </td>
                             </tr>
                             
                             <tr class="prop">
                              <td valign="top" class="name">
                                 <label for="brand">设备品牌:</label>
                              </td>
                              <td>
                                 <select id ="brand" name="brand">

        <g:each in="${brandList}" status="i" var="brand">     
         <option value="${brand.name}">${brand.name}</option>
                            </g:each>                                       
                        </select><font color = "red">*</font>

2.js进行处理,导入prototype类库,发送Ajax异步请求,获得返回的json类型的值,然后加入到id为brand的select中。
 <g:javascript library="prototype" />
        <script language="JavaScript" type="text/javascript">

          function setPinPai(xiaolei){
            var baseUrl = "${createLink(controller:'purList', action:'getJson')}"
            var url = baseUrl + "?bigId=" +(xiaolei)
            
            new Ajax.Request(url, {
              method: 'get',
              asynchronous: true,
              onSuccess:function(req) {update(req.responseText, 'pinpaiMess')}
            })
          }

          function update(json, mess){
          //  alert(json);
              var cjxx = eval( "(" + json + ")" )
              //删除所有的值
              document.getElementById("brand").options.length=0;

              for(var i = 0;i<cjxx.length;i++){     
                var pinPaiText = cjxx[i].name;
                var pinPaiValue = cjxx[i].name;  
                document.getElementById("brand").options.add(new Option(pinPaiText,pinPaiValue));
              }
          }
 </script>

3.controllor中的处理,通过传入的id好进入数据库进行查询,然后返回json结果。
    def getJson ={
//处理已经遗留的数据库
//        println params.id+" getJson""
//        Sql sql = new Sql(dataSource)
//        def com_id = params.id
//        def xiaoleiStr = " select p.name as xiaolei,p.pur_big_cate_id as xiaoleiid from pur_category p "
//        if(com_id!=null&&com_id!="-1"){
//            xiaoleiStr =xiaoleiStr+"where p.id = "+com_id
//        }
        def com_id = params.bigId
        println com_id
        def BrandArray = Brand.findAllByPurCategory(PurCategory.get(com_id))
        //def PurCategoryArray = PurCategory.findAllByPurBigCate(PurBigCate.get(com_id))
       // println BrandArray.size()

        render BrandArray as JSON
    }
2
0
分享到:
评论

相关推荐

    grails ajax

    通过利用Grails提供的便利工具和库,开发者可以快速实现复杂的Ajax功能,同时保持代码的整洁和可维护性。无论是简单的数据获取还是复杂的业务流程,Grails都能提供强大的支持,让Ajax在Grails应用中发挥出应有的价值...

    grails 使用ajax的例子

    在Grails中,可以通过在`head`标签内引入jQuery库,然后使用jQuery的`.ajax()`, `.post()`, `.get()`等方法进行Ajax请求。 4. **示例1:远程函数调用** 一个简单的例子是使用`&lt;g:remoteFunction&gt;`标签更新页面元素...

    精通 Grails 使用 Ajax 实现多对多关系

    本文将深入探讨如何使用Grails的GORM(Grails Object-Relational Mapping)API以及Ajax技术来实现这种复杂的关系。 首先,了解多对多关系的基本概念。在多对多关系中,两个实体类之间存在一对多的双向关联,即每个...

    精通Grails 之用 JSON 和Ajax 实现异步Grails(pdf电子书)

    在Grails中,可以通过`&lt;formRemote&gt;`标签来发起Ajax请求。这种标签利用了Prototype JavaScript库,这是一种轻量级的JavaScript库,简化了AJAX编程。下面是一个示例: ```groovy [controller:'hotel', action:'...

    Grails标签

    Grails标签 主要介绍了grails的标签的一个帮助文档

    Ajax Development With Grails Dojo

    通过学习《Ajax Development With Grails Dojo》,你可以实现以下目标: - **了解如何开始**:从安装Grails和Dojo开始,到搭建开发环境。 - **理解Grails对Ajax的支持**:掌握Grails提供的特定标签和其他机制,了解...

    Grails 下拉框联动最优实现

    在Grails中,我们可以利用AJAX技术实现这种交互,AJAX即异步JavaScript和XML,它允许页面在不刷新整个页面的情况下与服务器交换数据并局部更新页面内容。这正是实现联动效果的关键,因为它能让用户体验更加流畅,...

    grails实现分页技术

    在Grails这个基于Groovy的敏捷开发框架中,实现分页功能对于任何Web应用程序都是至关重要的,特别是当处理大量数据时。Grails提供了一些内置的支持,但如果你需要在自定义的控制器和视图中实现分页,那么就需要遵循...

    grails 文档

    Grails 支持多语言环境,通过i18n资源文件,轻松实现应用的国际化和本地化。 11. **模板引擎与标签库** GSP(Groovy Server Pages)支持自定义标签库,使得视图层逻辑更加清晰,同时提供了内置的标签,如`g:form`...

    使用 Grails 快速开发 Web 应用程序

    在了解了Grails的基本结构后,可以通过创建简单的控制器和领域类来实现基本功能。例如,创建一个用于联系人管理的控制器和领域类,处理CRUD操作。Grails的自动化工具如GORM(Grails Object-Relational Mapping)将...

    the definitive guide to grails 2

    通过GORM(Grails Object Relational Mapping),Grails提供了自动的ORM支持,使得开发者无需编写复杂的SQL语句即可实现数据的持久化操作。 #### Controllers(控制器) 控制器(Controllers)负责处理来自用户的...

    Grails权威指南

     11.2 通过集成hibernate实现orm  11.2.1 使用hibernatecxml映射  11.2.2 ejb3方式的映射  11.2.3 在pojo实体中使用约束  11.2.4 得到sessionfactory对象  11.3 使用spring进行依赖注入  ...

    Grails Grails Grails

    通过阅读这份文档,开发者可以深入理解Grails 1.1的核心特性和开发流程,从而更好地利用Grails构建高效、健壮的Web应用。 总结来说,Grails 是一个强大的Web开发框架,借助Groovy的灵活性和Java生态的稳定性,为...

    Grails权威指南.pdf

    - **AJAX in Grails**:书中会介绍如何使用jQuery或其他库实现异步更新,提升用户体验。 - **Remote Function Calls (RFC)**:通过AJAX调用控制器的方法,实现页面部分更新。 6. **Java平台集成**: - **...

    grails中文入门简介

    验证是Web开发中不可或缺的一部分,Grails通过声明约束和验证约束来实现。它支持客户端验证,使得可以在用户提交表单之前校验数据。Grails的国际化支持非常好,开发者可以通过简单的配置来为不同的语言环境定制应用...

    grails-用户手册

    Grails支持多语言环境,通过`messages.properties` 文件实现国际化,可以根据用户浏览器设置自动选择对应的语言版本。 总结来说,《Grails用户手册》涵盖了从项目创建到部署运行的全过程,包括Grails的基础概念、...

    grails快速开发web

    - **实战技巧**:包括 GORM (Groovy Object Relational Mapping) 的使用、如何在 Grails 中实现 Ajax 功能、处理遗留数据库的方法、利用遗留框架以及如何在 Grails 中使用 WebFlow。 - **高效编程系列**:涵盖使用 ...

    Grails权威指南 Grails权威指南

    通过《Grails权威指南》,你可以学习到如何利用Grails的强大功能来开发高效、可扩展的Web应用,同时也了解到如何利用Groovy语言和Grails框架的最佳实践,提升你的开发技能。这本书深入浅出地讲解了Grails的各个方面...

    grails login

    通过以上步骤,我们已经创建了一个基本的Grails用户登录系统,允许用户登录并区分管理员和普通用户。这个示例展示了Grails框架在实现Web应用核心功能方面的灵活性和易用性。在实际项目中,你可能还需要考虑密码加密...

Global site tag (gtag.js) - Google Analytics