使用grails级联更新下拉列表

    实现级联更新效果有多种方式,现只介绍用jquery框架的ajax技术实现的方式,个人认为使用jquery的方式更好更灵活,因为它只负责传数据,如果用grails自带的异步更新,简单的还可以,如果是复杂一点的就比较难搞。

下列代码无需考虑业务意义

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

    

你可能感兴趣的:(jquery,grails,AJAx技术)