我希望我的选择下拉列表在Grails网站中使用Ajax自动填充

时间:2013-11-17 01:58:29

标签: ajax grails select

我正在尝试在Groovy Grails中创建“选择依赖性下拉列表”。我希望我的新用户从选择的下拉列表中选择他们的国家,provstate和electrolDistrict。我已经尝试了ajaxdependancyselection插件,但我只能让这个国家出现。 ProvState和ElectoralDistricts不会出现在下拉列表中。也许我应该使用对象图构建器或节点构建器。任何建议都会很棒。谢谢。,

1 个答案:

答案 0 :(得分:1)

嘿我把插件放在一起所以如果你需要帮助我告诉我,抱歉直到现在还没有看到这个问题。

如果您可以共享这3个类的域类信息:  country,provstate和electrolDistrict然后我可以帮助你把你需要做的事情放在一起。

首先说明他们的依赖性如何

    country  : String name, static hasMany = [states:provestate]
    provstate: String ???, 
static belongsTo = [ Country ] 
or ? static belongsTo = [ Country:country ],
 static hasMany= [district: electrolDistrict] 

    electrolDistrict : 
 String ???,
 static belongsTo = [ provstate ] 
or ? static belongsTo = [ state:provstate ],

还有: https://github.com/vahidhedayati/ajaxdependancyselectexample

在国家/地区视图下查看,有一些示例扩展了3个选项。

就个人而言,虽然这个解决方案都运行良好但我发现使用remoteFunction比密集表更快,

这是替代方法,我认为我需要在某种方法中将其合并到插件中,它只基于两个选择框,但您只需通过向其添加远程功能即可将第二个选项扩展为第三个选择。 ....

<div class="smallform">




<div id=SelectCountry class="fieldcontain ${hasErrors(bean: furnitureDonationInstance, field: 'country', 'error')} required">
    <label for="country">
        <g:message code="testcity.country.label" default="Choose Country" />
        <span class="required-indicator">*</span>
    </label>
    <g:select id="country" name="country" from="${com.myprofessions.radpost.Globe.list()}" optionKey="iso"  optionValue="country" required="" value="${params.country}" class="many-to-one"
        noSelection="['null': 'Please choose Country']"
        onchange="${remoteFunction (
        controller: 'selector',
        action: 'findCities',
        params: "'id=' + this.value",
        update: 'cityId'
    )}"
    />
</div>


<div id=SelectCity1 class="fieldcontain ${hasErrors(bean: furnitureDonationInstance, field: 'City', 'error')} required">
    <label for="country">
        <g:message code="testcity.city.label" default="Choose Country" />
        <span class="required-indicator">*</span>
    </label>
    <div id="cityId">
<g:select name="city" id="cityId1" optionKey="id" optionValue="city" from="[]" 
noSelection="['null': 'Please choose Country 11']" />
</div>
</div>

现在有一个名为 _cities.gsp 的独立模板,当我被称为选择器的控制器的findCities动作调用时,它包含并将替换cityId div内部内容

<g:select name="city" from="${cities}" optionValue="city" optionKey="id" noSelection="['null': 'Please choose city']"/>

在这里你可以像上面那样添加另一个onChange,并为你的下一个项目重复这个过程

SelectorController:

def findCities() { 
            def s=params.id
            String domclass1= (s.substring(0,1).toUpperCase())
            String domclass2=s.substring(1,s.length())
            String domclass=domclass1+domclass2.toLowerCase()
            Class domainClass = grailsApplication?.domainClasses.find { it.clazz.simpleName ==domclass+'Cities' }?.clazz
            def cities=loadCities(domainClass)
            render(template: 'cities', model:  [cities: cities])
        }
@Cacheable("RADPOST-CITY")
        def loadCities(def domainClass) {
            if (domainClass) {
            def cities=domainClass?.findAll()
            return cities
            }
        }

最终将结果放在一起并将其返回到城市模板

我已经调用了domainClass等因为我在另一个插件中使用它,所以你可以替换所有这些吗?.findAll()等等。

我认为速度差异取决于ajaxdependancyselection插件如何捕获每个项目并使用javascript在select下拉列表中重新创建options元素。

哦顺便说一下它通过iso然后它添加到domclass +'Cities'城市并创建AoCities或AuCities等等,以便注意它并根据你的实际domainClass修改或如上所述删除所有搜索课程并直接调用