使用grails串聯更新下拉式清單

標籤：grails   jquery   ajax技術   

    實現串聯更新效果有多種方式，現只介紹用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

    

本文出自 “技術隨筆” 部落格，請務必保留此出處http://6367966.blog.51cto.com/6357966/1541627