`

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 实现多对多关系

    极好的资源,这里边对用Ajax实现多对多关系讲的非常清楚 。

    grails 使用ajax的例子

    介绍了使用ajax的几个常用标签,欢迎志同道合的朋友来看看

    grails ajax

    It is javascript and ajax using in grails, it is very useful

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

    精通Grails 之用 JSON 和Ajax 实现异步Grails。书中包含了全部代码。免费下载

    Grails标签

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

    grails实现分页技术

    供初学者使用,在grails中只有list(自动生成)中有分页实现,而自己新增的页面中需自己实现分页,该文档中描述了如何实现分页以及注意点

    Grails Grails Grails

    Grails Grails Grails Grails Grails

    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 中文参考手册

    6.7.1 用Prototype实现Ajax 6.7.1.1 异步链接 6.7.1.2 更新内容 6.7.1.3 异步表单提交 6.7.1.4 Ajax事件 6.7.2 用Dojo实现Ajax 6.7.3 用GWT实现Ajax 6.7.4 服务端的Ajax 6.8 内容协商 7. 验证 7.1 声明约束 7.2 验证...

    Ajax Development With Grails Dojo

    Ajax Development With Grails Dojo www.grails-exchange.com © Sven Haiges, Yahoo! Inc. GRAILS & DOJO 3 Goals You know how to get started! You know how AJAX is supported by Grails Tags, Libraries...

    Grails权威指南 Grails权威指南

    Grails权威指南Grails权威指南Grails权威指南Grails权威指南Grails权威指南Grails权威指南

    Grails 下拉框联动最优实现

    NULL 博文链接:https://zeroblue.iteye.com/blog/1158924

    Groovy轻松入门——Grails实战基础篇

    在学习任何东西之前,最重要的是培养兴趣,Groovy世界最耀眼的技术之一--Grails相信大家早已耳闻,我将通过Grails实战系列文章 向您展现Grails的迷人风采,使您感受到Grails的魅力,以至疯狂地爱上Grails,并坠入...

    grails 1.0.4

    Grails的出现并不是偶然的,而是随着Web应用的日趋复杂及Web2.0和Ajax的悄然兴起发展起来的。不过在我们继续介绍Grails之前,有必要先探究一下如今其他的Java框架及他们的用户体验,因为正是他们的积累,才会产生...

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

    Grails入门好资料

    grails框架

    grails除了核心模块以外的功能几乎都是通过插件方式实现的。实际上,一个grails插件和一个grails应用基本是完全一样的,同样可以使用grails run-app命令来运行。区别仅在于一个插件的根目录下需要提供一个fooplugin....

    Grails帮助文档

    Grails帮助文档,各种标签的用法,控制器,datasource的用法等!

    grails入门经典

    grails grails入门经典 grails入门 grails例子 grails资料 通过自学一点点积累起来的,相信对你有帮助的。

    Eclipse下搭建Grails项目

    Grails项目的应用越来越多,而对于初学者来说,在Eclipse下搭建Grails项目是一个难题,这个文档将教会你如何搭建Grails项目,希望对你有所帮助。

Global site tag (gtag.js) - Google Analytics